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

Question

我尝试单击一个名为 .red 的按钮，但问题是有两个按钮具有相同的名称，因此赛普拉斯不知道使用命令 cy.get('.red').click() 来单击其中的哪个按钮

最初我认为我必须在尝试单击按钮之前访问我的课程。

如何使用以下代码单击“红色垃圾桶图标”？

<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

red trash icon是按钮内部的<i>元素，而不是按钮本身。

您应该单击按钮本身：

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

如果你设置的选择器有多个按钮，你可以给它一个特定的类或一个特定的 id：

<button id="whatever">...

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

请注意#用于 ids 而不是点. 作为类选择器。

Answer 2

Cypress .get()命令接受复杂的选择器参数。 因此，如果您想触发对具有red 、 trash和icon类的元素的点击，您可以执行以下操作：

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

Answer 3

问题是您使用的 CSS 选择器过于宽泛。

您可以为您的按钮设置一个唯一的 ID html 属性并使用cy.get('#your-id')找到它，或者您可以制作一个更具体的 CSS 选择器。

例如，您可以像这样选择带有 .red 类的最后一个按钮

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

或者第一行这个

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

或 X 元素使用类似 button.red:nth-of-type() { ... }

Answer 4

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