在 Cypress.io 中，如何勾选包含同名元素但我只想勾选其中一项的跨度中的项目

Question

当使用 cypress 时，如何勾选其中一项，当它们位于 table 和跨度中时。

<table class="pure-table pure-table-horizontal">
  <tbody>
    <tr data-cy="todoItem">
      <td class="undone">
        <span data-cy="markAsCompleted" class="glyphicon glyphicon-ok icon" aria-hidden="true">
        </span>
        Buy Milk
        <span data-cy="markAsDeleted" class="glyphicon glyphicon-remove-sign close" aria-hidden="true">
        </span>
      </td>
    </tr>
    <tr data-cy="todoItem">
      <td class="undone">
        <span data-cy="markAsCompleted" class="glyphicon glyphicon-ok icon" aria-hidden="true">
        </span>
        Call Dad
        <span data-cy="markAsDeleted" class="glyphicon glyphicon-remove-sign close" aria-hidden="true">
        </span>
      </td>
    </tr>
    <tr data-cy="todoItem">
      <td class="undone">
        <span data-cy="markAsCompleted" class="glyphicon glyphicon-ok icon" aria-hidden="true">
        </span>
        Fill Gas
        <span data-cy="markAsDeleted" class="glyphicon glyphicon-remove-sign close" aria-hidden="true">
        </span>
      </td>
    </tr>
  </tbody>
</table>

我正在尝试单击 HTML 的这一部分，因为它是划掉“填充气体”的勾号。

<span data-cy="markAsCompleted" class="glyphicon glyphicon-ok icon" aria-hidden="true"></span>

这是我试过的

cy.get('[data-cy=markAsCompleted]').contains('Fill Gas').click()

我得到的错误是还有 3 个元素带有 cy=markAsCompleted

Answer 1

您想要的一切都包含在单元格 (<td>) 中，所以首先找到它，然后在其中找到需要点击的范围（假设它有事件处理程序）

cy.contains('td', 'Fill Gas')           // target the cell
  .find('[data-cy=markAsCompleted]')    // move to span
  .click()
  .parent()                             // back to the cell
  .should('have.class', 'done')         // check the click results

在 Cypress.io 中，如何勾选包含同名元素但我只想勾选其中一项的跨度中的项目

In Cypress.io how do I tick an item in a span that contains an element with the same name but I only want to tick one of the items

javascript

css

automation

cypress