Question

我尝试单击一个名为.red的按钮，问题是有两个名称相同的按钮，因此Cypress不知道要使用cy.get（'。red'）。click（）命令单击哪个按钮。 / p>

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

<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()

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

Answer 2

赛普拉斯.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

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

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

4 个答案: