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

【问题标题】：How to click one button that exists two times with same name?如何单击一个存在两次的同名按钮？
【发布时间】：2020-02-07 14:29:16
【问题描述】：

我尝试单击一个名为 .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>

【问题讨论】：

标签： javascript cypress

【解决方案1】：

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

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

【讨论】：

谢谢！我用了你的建议，效果很好。周末愉快@Sean

【解决方案2】：

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

您应该点击按钮本身：

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

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

<button id="whatever">...

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

注意使用# 表示id 而不是点. 作为类选择器。

【讨论】：

感谢您的评论，我从您的帮助中学到了。周末愉快@jeprbio

【解决方案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() { ... }

【讨论】：

感谢您的评论，我从您的帮助中学到了。周末愉快@erwan
不客气，如果我的答案解决了您的问题，请不要犹豫，将我的答案标记为正确答案。也有一个愉快的周末:) @hereinsweden

【解决方案4】：

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

【讨论】：