Cypress: .each цикл, чтобы найти элемент, который имеет значение

Question

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

Я ищу элемент с определенным значением, используя Cypress. HTML выглядит так:

<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">

Когда я нахожу его, я хочу щелкнуть по нему и выпрыгнуть из цикла.

Вот что у меня есть:

 const buttonButton = '[data-cy-component=button-button]';
 cy.get(buttonButton).each(($el, index, $list) => {
  cy.log(`index: ` + index);
  if (index === 5) {
    cy.wrap($el)
      .should('have.value', 'Save')
      // Click Save button.
      .click();
  }
});

Этот метод работает, но кажется уязвимым. Если моя кнопка «Сохранить» больше не является 5-м (или 6-м) элементом, тест не пройден. Есть ли способ, которым я могу проверить это с IF, а не ДОЛЖНО?

Answer 1

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

<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">


cy.get('[value="Save"]').should('exist');
cy.get('[value="Save"]').click();
cy.get('input[value="Save"]').should('exist');
cy.get('input[value="Save"]').click();

Это также сработало

cy.get('[data-cy-component=button-button][value=Save]').should('exist');
cy.get('[data-cy-component=button-button][value=Save]').click();

За ваш комментарий ниже вы сказали, что на экране их было 2

Я создал этот HTML для его проверки. Обратите внимание, что один скрыт. Мне нужно было бы знать, что делает вас скрытыми или невидимыми. Кроме того, они в разных div, которые, возможно, имеют уникальные идентификаторы?

<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
<input style="visibility:hidden" type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">


cy.get('[value="Save"][style!="visibility:hidden"]').should('length', 1);
cy.get('[value="Save"][style!="visibility:hidden"]').click();