如何创建自定义命令来填充两种场景中具有不同结构的字段？

Question

所以我有 2 个场景，来自我正在测试的应用程序的不同页面：

场景一：

<tbody>   
     <tr>
        <td class="colLabel90 colCampo">
          <label style="font-weight: bold">* Nome:</label>
        </td>
        <td>
          <input  type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all requiredColor role="textbox" aria-disabled="false" aria-readonly="false">
        </td>   
     </tr>
     <tr>
         .....   
     </tr> 
</tbody>

场景二：

<tr role="row">
   <th id="dataTableFormId:DataTableId:j_idt169" class="ui-state-default ui-sortable-column ui-filter-column ui-resizable-column colFilterSize" role="columnheader" aria-label="Nome: activate to sort column ascending" scope="col" style="width:90%" aria-sort="other">
      <span class="ui-column-resizer ui-draggable ui-draggable-handle">&nbsp;</span>
      <span class="ui-column-title">Name</span>
      <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"> </span>
      <input id="dataTableFormId:DataTableId:j_idt169:filter" name="dataTableFormId:DataTableId:j_idt169:filter" class="ui-column-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" autocomplete="off" role="textbox" aria-disabled="false" aria-readonly="false">
   </th>
   <th id="dataTableFormId:DataTableId:j_idt171" class="ui-state-default ui-sortable-column ui-filter-column ui-resizable-column colFilterSize" role="columnheader" aria-label="Fabricante: activate to sort column ascending" scope="col" style="width:90%">
      <span class="ui-column-resizer ui-draggable ui-draggable-handle" style="display: none;">&nbsp;</span>
      <span class="ui-column-title">Manufacturer</span>
      <span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span>
      <input id="dataTableFormId:DataTableId:j_idt171:filter" name="dataTableFormId:DataTableId:j_idt171:filter" class="ui-column-filter ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" autocomplete="off" role="textbox" aria-disabled="false" aria-readonly="false">
   </th>
</tr>

这是我在 Cypress 上尝试做的事情：

Cypress.Commands.add("typeOnFields", (field, value) => {
   cy.get('#center').contains(field).parent().find('input').clear().type(value)

})
//Where field is the name of the field in <label> or <span>, in this case it's 'Name'

这不起作用，find() 在任何情况下都找不到输入。

Answer 1

因为这两个场景具有不同的结构和 parent 元素，您需要使用 .parents() 的变体，它不断向上移动到包含输入 parent 的第一个 parent =12=]

cy.contains(field)             // return the <label> or <span> with "field"
  .parents(':has(input)')      // move up until element has an <input> inside
  .eq(0)                       // take first (multiple are returned)
  .find('input')               // find the <input> element   
  .clear().type(value)

为了避免复杂，我实际上会在这里使用两个命令，一个用于 table header，一个用于 table body.

如何创建自定义命令来填充两种场景中具有不同结构的字段？

How can I create a custom command to fill fields in both scenarios with different structures?

css-selectors

cypress