cy.get div 没有显示器：none

Question

我正在处理其他人编写的一些糟糕的代码。在我们更改它之前，我正在尝试为功能编写一些测试，这样我们就可以确保它在功能更改后一切正常。

我有 8 个这样的兄弟姐妹 div：

<div class="container">

  <!-- Child-1 --> 
  <div class="child-group child-1" style=""> <!-- Notice empty style-tag -->
    <div class="buttons">
      <button class="go-to-child-group-1">Child-group-1</button>
      <button class="go-to-child-group-2">Child-group-2</button>
      <button class="go-to-child-group-3">Child-group-3</button>
      ... <!-- Leaving out all the buttons for readability -->
      <button class="go-to-child-group-8">Child-group-8</button>
    </div>
    <div class="content">Content1 content1 content1</div>
  </div>

  <!-- Child-2 -->
  <div class="child-group child-2" style="display: none"> <!-- Notice display none -->
    <div class="buttons">
      <button class="go-to-child-group-1">Child-group-1</button>
      <button class="go-to-child-group-2">Child-group-2</button>
      <button class="go-to-child-group-3">Child-group-3</button>
      ... <!-- Leaving out all the buttons for readability -->
      <button class="go-to-child-group-8">Child-group-8</button>
    </div>
    <div class="content">Content2 content2 content2</div>
  </div>

  <!-- Child-3 -->
  <div class="child-group child-3" style="display: none"> <!-- Notice display none -->
    <div class="buttons">
      <button class="go-to-child-group-1">Child-group-1</button>
      <button class="go-to-child-group-2">Child-group-2</button>
      <button class="go-to-child-group-3">Child-group-3</button>
      ... <!-- Leaving out all the buttons for readability -->
      <button class="go-to-child-group-8">Child-group-8</button>
    </div>
    <div class="content">Content3 content3 content3</div>
  </div>

  <!-- 
  Etc. etc. etc.
  for group Child-4, Child-5, Child-6, Child-7 and Child-8
  -->

</div>

当您单击其中一个按钮时，它会在活动组上设置 display: none - 并从需要变得可见的子组中删除 display: none。

我正在尝试编写一个测试，首先激活某个子组（通过单击按钮使其可见）然后检查内容是否正确。

但是当我这样做时：

cy.get( ".child-group .buttons .go-to-child-group-2" ).click();

然后我的测试失败并出现此错误：

cy.click() can only be called on a single element. Your subject contained 8 elements. Pass { multiple: true } if you want to serially click each element.

这显然是废话，所有按钮都加载到每个元素上。但我们不能改变这一点，直到更进一步。

如何 select 只有 没有设置 display: none 的 .child-group？

---

解决方案尝试 1：Select 按样式

我在 how to select by style 上找到了这个 post。但是由于我正在尝试 select 没有 样式的那个 ，这使得这变得更加困难。

我试过这个：

cy.get( ".child-group[style*='display: block'] .buttons .go-to-child-group-2" ).click();

但这不起作用。当我检查没有 display: none 的元素时，我找不到 display 样式。我还可以读到 display didn't have any default value.

---

解决方案尝试 2：使 cy.get(...) 忽略所有不可见元素。

我找到了一些关于 Interacting with Elements 的信息，但它没有告诉我如何将那个选项传递给我的 cy.get-函数。

我也查了the documentation for cy.get，但也没找到。

---

解决方案尝试3：点击所有按钮（差）

我可以按照它说的去做，然后点击所有按钮，方法是像这样调用点击功能：

cy.get( ".child-group .buttons .go-to-child-group-2" ).click( {multiple: true, force: true});

这可行，但我希望有更好的解决方案。

Answer 1

我认为您正在寻找 :not() pseudo selector

cy.get('.child-group .buttons .go-to-child-group-2:not([style="display: none"])')

我想这也值得一试，但不确定空字符串是否会抛出它

cy.get('.child-group .buttons .go-to-child-group-2[style=""]')

Answer 2

或者，您可以使用 :visible 选择器。

cy.get('.child-group .buttons .go-to-child-group-2')
  .filter(':visible') // filter only visible elements

Here is a simple example