Использование 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>

Мне нужно найти кнопку Not Met с классом btn-danger, который также имеет смежную кнопку N / A (с классом btn-teriary) и нажимает кнопку N / A.

Я немного растерялся во всех опциях Cypress get, find, et, et c.

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

Моя проблема Мне нужно найти кнопку с указанным классом c рядом с другой кнопкой с указанным классом c. Код Псуэдо:

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') возвращает один объект, а первая кнопка с текстом «Не выполнено» не имеет требуемой class.

Недавно я видел ответ , в котором упоминалось «объединение селекторов», что является полезным принципом, когда селекторы не указаны c достаточно, то есть вы можете переместить «btn-danger» 'проверить цепочку:

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

OR 

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

Первый селектор теперь ищет кнопку с атрибутом класса ([class ...]), содержащую (* =) "btn-danger", и имеет текст "Not" Met '.

Правильное нахождение кнопки-компаньона

Вышеприведенное успешно выполняется с примером 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();

Answer 2

Как я понял из вашего вопроса, вы sh нажмете на кнопку N/A рядом с кнопкой "Не встретил" во втором ряду. Для этого вы можете попробовать следующий подход. Я пробовал на местном, и это работает для меня, пожалуйста, дайте мне знать, как это идет! Если таблица имеет некоторый идентификатор или уникальное имя класса, используйте это, иначе используйте 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();      
})