如何单击一个存在两次同名的按钮？

Question

I try to click a button named .red and the problem is that there are two buttons with same name so Cypress does not know which of them to click with command cy.get('.red').click()

Originally I thought I have to access my class before trying to click the button.

How can I use below code to click "red trash icon"?

<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

The red trash icon is the <i> element of inside the button, not the button itself.

You should perform click on the button itself:

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

And if there is more than one button with the selector you have set you can give it a specific class or a specific id:

<button id="whatever">...

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

Notice the use of # for ids instead of the dot . as a class selector.

Answer 2

The Cypress .get() command accepts complex selector arguments. So if you wanted to trigger a click on an element that has red , trash and icon classes, you could do the following:

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

Answer 3

The problem is you're using a too broad CSS selector.

You could either set a unique ID html attribute to your button and find it with cy.get('#your-id') or you could make a more specific CSS selector.

For example you could select the last button with .red class like this

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

or the first one line this

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

or the X element using something like button.red:nth-of-type() { ... }

Answer 4

按照 Cypress 文档中的建议，您应该添加自定义data-cy属性而不是使用通用选择器