如何访问表兄弟元素，在赛普拉斯中具有标识符的元素

Question

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

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

尽管当我实际需要访问 span 标签的堂兄时，这只会 return span 标签的兄弟姐妹。

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

Answer 1

您能否使用 with .parents() 来识别 table 的父级 class，然后使用 find() 缩小到 input 复选框字段被识别。查看下面的代码，看看它是否有效；

cy.get('input[type="checkbox]').parents('.lh-copy').find('tr').find('td').find('input').click();

或者可以尝试 td

的直接父 class

cy.get('input[type="checkbox]').parents('.hover-bg-near-white').find('td').find('input').click();

Answer 2

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>

如何访问表兄弟元素，在赛普拉斯中具有标识符的元素

How can I access a cousin element, of an element with an identifier in Cypress

html

javascript

testing

e2e-testing

cypress