Question

我试图单击表行的列表复选框我能想到访问此水平的唯一途径是通过与其对应的名称跨度标签。

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

尽管这只会在我实际上需要访问span标签的堂兄时返回span标签的兄弟姐妹。

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

Answer 1

您能否与.parents()一起使用来标识表的父类，然后使用find()来缩小范围，直到标识了input复选框字段。参见下面的代码，看看是否可行；

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

或者可以尝试使用td的直接父类

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>

如何在Cypress中访问表妹元素和具有标识符的元素

2 个答案: