Как нажать одну кнопку, которая существует два раза с тем же именем?

Question

Я пытаюсь нажать кнопку с именем .red, и проблема в том, что есть две кнопки с одинаковым именем, поэтому Cypress не знает, какую из них нажать с помощью команды cy.get ('. Red'). Click ()

Как я могу использовать приведенный ниже код, чтобы щелкнуть «значок красного цвета sh»?

<div class="one wide column">
    <div class="ui vertical right floated buttons">
        <a class="ui basic button" role="button" href="/admin/assignments/edit/37">
            <i aria-hidden="true" class="cog icon"></i>
        </a>
        <button class="ui basic button">
            <i aria-hidden="true" class="red trash icon"></i>
        </button>
    </div>
</div>

Answer 1

Команда Cypress .get () принимает сложные аргументы селектора. Поэтому, если вы хотите вызвать клик по элементу, который имеет классы red, trash и icon, вы можете сделать следующее:

cy.get('.red.trash.icon').click()

Answer 2

red trash icon является элементом <i> внутри кнопки, а не самой кнопки.

Вы должны выполнить нажатие на самой кнопке:

cy.get('.button').click()

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

<button id="whatever">...

cy.get('#whatever').click()

Обратите внимание на использование # для идентификаторов вместо точка . как селектор класса.

Answer 3

Как рекомендуется в документации Cypress, вы должны добавить пользовательский атрибут data-cy вместо использования generi c селекторов

Answer 4

Проблема в том, что вы используете слишком широкий селектор CSS.

Вы можете либо установить уникальный атрибут ID html для вашей кнопки и найти его с помощью cy.get('#your-id'), либо вы можете сделать подробнее c CSS селектор.

Например, вы можете выбрать последнюю кнопку с классом .red, например,

cy.get('button.red:last-of-type')

или первую строку это

cy.get('button.red:first-of-type')

или элемент X, использующий что-то вроде button.red:nth-of-type () {...}