使用赛普拉斯 - 如何在特定状态下查找相邻项目

Question

我有一张带状态按钮的长桌：

<td class="evaluation-button-cell">
  <button class="conduct btn btn-tertiary">Met</button>
  <button class="conduct btn btn-tertiary">Not Met</button>
</td>
<td class="evaluation-button-cell">
  <button class="conduct btn btn-tertiary">Met</button>
  <button class="conduct btn btn-tertiary">Not Met</button>
  <button class="conduct btn btn-warning">N/A</button>
</td>
<td class="evaluation-button-cell">
  <button class="conduct btn btn-tertiary">Met</button>
  <button class="conduct btn btn-danger">Not Met</button>
  <button class="conduct btn btn-tertiary">N/A</button>
</td>
<td class="evaluation-button-cell">
  <button class="conduct btn btn-success">Met</button>
  <button class="conduct btn btn-tertiary">Not Met</button>
  <button class="conduct btn btn-tertiary">N/A</button>
</td>
<td class="evaluation-button-cell">
  <button class="conduct btn btn-tertiary">Met</button>
  <button class="conduct btn btn-danger">Not Met</button>
</td>

我需要找到一个带有 btn-danger 类的 Not Met 按钮，它还有一个相邻的 N/A 按钮（带有 btn-teriary 类），然后单击 N/A 按钮。

我对 get、find、within 等所有 Cypress 选项有点迷茫。

我可以找到其中一个按钮，但不确定如何验证它旁边还有一个附加按钮，并且两个按钮都具有预期的类的最佳方法。

我的问题是我需要找到具有特定类的按钮，该按钮与具有特定类的另一个按钮相邻。伪代码：

cy.contains('Not Met').and('has.class', 'btn-danger').next().contains('N/A).and('has.class', 'btn-tertiary')...and then somehow click the Not Met button :)

Answer 1

我从您的问题中了解到，您希望单击第二行中“未满足”按钮旁边的 N/A 按钮。为此，您可以尝试以下方法。我已经在本地尝试过，这对我有用，请告诉我进展如何！ 如果表有一些 id 或唯一的类名，请使用它，否则使用 table。您可以使用 next() 方法到达 N/A 按钮，并使用 :nth-child(3) 获取正确的行。

it("Check if cypress click the N/A button in the third row", () => {
    cy.visit('url_here');
    cy.wait(2000);
    cy.get('table > tbody > tr:nth-child(3) > td > button').contains("Not Met").next().click();      
})

Answer 2

解决第一个按钮

cy.contains('Not Met').and('has.class', 'btn-danger')

这失败了，因为cy.contains('Not Met') 产生了一个主题，并且第一个带有“Not Met”文本的按钮没有所需的类。

I recently saw an answer that mentioned 'merging selectors', which is a useful principle when selectors are not specific enough, i.e you can move the 'btn-danger' test up the chain:

cy.get('button[class*=btn-danger]').contains('Not Met')

OR 

cy.contains('button[class*="btn-danger"]', 'Not Met')

现在，第一个选择器会查找具有包含 (*=)“btn-danger”的类属性 ([class...]) 且具有文本“未满足”的按钮。

正确找到伴随按钮

以上使用您提供的示例 html 成功，但要正确测试伴随按钮，我们需要通过复制您定位的行并将第一个伴随按钮更改为“btn-warning”来使其更加困难，即

<td class="evaluation-button-cell">
  <button class="conduct btn btn-tertiary">Met</button>
  <button class="conduct btn btn-tertiary">Not Met</button>
</td>
<td class="evaluation-button-cell">
  <button class="conduct btn btn-tertiary">Met</button>
  <button class="conduct btn btn-tertiary">Not Met</button>
  <button class="conduct btn btn-warning">N/A</button>
</td>

<td class="evaluation-button-cell">
  <button class="conduct btn btn-tertiary">Met</button>
  <button class="conduct btn btn-danger">Not Met</button>
  <button class="conduct btn btn-warning">N/A</button>      <-- not what we seek
</td>

<td class="evaluation-button-cell">
  <button class="conduct btn btn-tertiary">Met</button>
  <button class="conduct btn btn-danger">Not Met</button>
  <button class="conduct btn btn-tertiary">N/A</button>     <-- this is the one
</td>


<td class="evaluation-button-cell">
  <button class="conduct btn btn-success">Met</button>
  <button class="conduct btn btn-tertiary">Not Met</button>
  <button class="conduct btn btn-tertiary">N/A</button>
</td>
<td class="evaluation-button-cell">
  <button class="conduct btn btn-tertiary">Met</button>
  <button class="conduct btn btn-danger">Not Met</button>
</td>

问题

cy.get('button[class*=btn-danger]').contains('Not Met')

OR 

cy.contains('button[class*="btn-danger"]', 'Not Met')

是它们只返回一个主题 - 虽然有三个适合的按钮，但只返回第一个。

这也可以通过将contains() 部分合并到第一个选择器中来解决，

cy.get("button[class*='btn-danger']:contains('Not Met')")

这会产生三个符合条件的按钮。

要获得带有正确伴随按钮的按钮，请将next() 与相同模式的选择器一起使用，

cy.get("button[class*='btn-danger']:contains('Not Met')")
  .next("button[class*='btn-tertiary']:contains('N/A')")
  .click();