使用Cypress-如何在特定状态下查找相邻项

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危险类的未满足按钮，它还有一个相邻的N/a按钮（具有btn材料类），然后单击N/a按钮。

我有点迷失在柏树的所有选项中，比如得到、找到、在里面等等。

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

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

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

解析第一个按钮

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

这会失败，因为cy.contains（'Not Met'）生成一个主题，并且第一个包含文本“Not Met”的按钮没有所需的类。

我最近看到一个答案提到了合并选择器，这是一个有用的原则，当选择器不够具体，也就是说，你可以移动btn危险测试链：

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

OR 

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

第一个选择器现在查找具有class属性（[class…]）的按钮包含（*=）“btn危险”，并具有文本“未满足”。

正确找到配对按钮

上面的成功与您提供的示例html，但要正确测试伴侣按钮，我们需要通过复制您的目标行并将第一行中的伴侣按钮更改为btn警告，即

html prettyprint-override"><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();

Answer 2

我从您的问题中了解到，您希望单击第二行“未满足”按钮旁边的N/A按钮。为此，您可以尝试以下方法。我在当地试过，这对我很有效，请告诉我进展如何！如果表具有某些id或唯一的类名，请使用该id或类名，否则请使用table。您可以使用next（）方法到达N/A按钮，并使用：第N个子项（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();      
})