Cy.get div, у которого нет дисплея: на нем нет

Я работаю над плохим кодом, который написал кто-то другой. Я пытаюсь написать несколько тестов для функциональности, прежде чем мы ее изменим, чтобы мы могли убедиться, что все это работает после изменений функций.

У меня есть 8 разделов братьев и сестер, например:

<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.

Явная хрень, что все кнопки грузятся на каждый элемент. Но мы не можем изменить это, пока не продвинемся дальше.

Как выбрать только тот .child-group, который не установил display: none?

Попытка решения 1. Выбрать по стилю

Я нашел этот пост на как выбрать по стилю. Но поскольку я пытаюсь выбрать один стиль без, это усложняет задачу.

Я пробовал это:

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

Но это не работает. И когда я проверяю элемент без display: none, то не могу найти на нем display-стиля. И я также мог прочитать, что display не имеет значения по умолчанию.

Попытка решения 2: заставить cy.get(...) игнорировать все невидимые элементы.

Я нашел немного о Взаимодействие с элементами, но мне не сказали, как я могу передать эту опцию моей cy.get-функции.

Я также проверил документация для cy.get, но тоже ничего не нашел.

Попытка решения 3. Просто нажмите все кнопки (плохо)

Я мог бы сделать то, что он говорит, и нажать все кнопки, вызвав функцию щелчка следующим образом:

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

Это работает, но я надеялся на лучшее решение.