如何在赛普拉斯中访问具有标识符的元素的表亲元素答案

【问题标题】：How can I access a cousin element, of an element with an identifier in Cypress如何在赛普拉斯中访问具有标识符的元素的表亲元素
【发布时间】：2019-01-29 21:41:45
【问题描述】：

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

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>

【问题讨论】：

标签： javascript html testing e2e-testing cypress

【解决方案1】：

赛普拉斯使用 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>

【讨论】：

【解决方案2】：

您能否使用.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();

【讨论】：