javascript - 如何访问表兄弟元素，在 Cypress 中具有标识符的元素

Question

我正在尝试单击表格行列表中的复选框 我认为访问此级别的唯一方法是通过具有相应名称的 span 标记。

cy.get('tr > td > span').contains('newCypressTestCore').siblings('td > input').click();

虽然这只会在我实际需要访问 span 标签的堂兄时返回 span 标签的 sibling 。

<tr>
   <td>
     <input type="checkbox" />
   </td>
   <td>
     <span> newCypressTestCore </span>
   </td>
</tr>

Answer 1

Cypress 使用 jquery，所以这个答案很有用 How do I get to cousin elements with JQuery .

closest() 选择器向上扫描树，使用它获取行，然后在其中输入。

规范

describe('cousins', () => {
  it('scans up the table', () => {

    cy.visit('app/table.example.html')

    cy.get('tr > td > span').contains('newCypressTestCore')
      .closest('tr')
      .find('input')
      .should('have.class', 'target')

  })
})

app/table.example.html(沙盒 - Cypress can optionally act as your web server)

<table>
  <tr>
    <td>
      <input type="checkbox" class="not.the.input.you.are.looking.for" />
    </td>
    <td>
      <span> something </span>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="target" />
    </td>
    <td>
      <span> newCypressTestCore </span>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox"  class="not.the.input.you.are.looking.for" />
    </td>
    <td>
      <span> another thing </span>
    </td>
  </tr>
</table>