如何点击带有 aria 标签的按钮？

Question

我正在尝试使用赛普拉斯测试框架自动单击按钮。

源代码是用React编写的，我试图单击的元素是一个带有伪代码的按钮。

这是用 React 代码编写的按钮的 HTML。

<form class="search" action="/search?q=somevalue">
    <button type="button" aria-label="Submit search" class="ms-search__form-submitSearch msc-btn">
    ::before
    </button>
</form>

这是我试图用来让元素单击的测试代码

cy.get('[aria-label="Submit search"]').click()

但是点击不起作用。

我也尝试过

cy.get('[aria-label="Submit search"]').click('{force:true}')
Cy.get('[aria-label="Submit search"]').trigger('mousedown')

这些都不起作用，单击按钮时没有触发任何事件。当我手动单击按钮时，效果很好。

Answer 1

测试单击时可能未附加事件侦听器。

参见 解决第一次点击问题

添加 cypress-cdp 包并尝试使用

cy.hasEventListeners()

const selector = '[aria-label="Submit search"]';
cy.hasEventListeners(selector, { type: 'click' });
cy.get(selector).click();

---

作为没有上述包的快速检查，请在单击之前（暂时）添加硬

cy.wait(300)

。

我还看到过 React hooks 未完成的情况，因为测试有 JS 线程，在这种情况下，您可能需要的是

cy.wait(0)

让 Cypress 释放线程。

Answer 2

假设您的按钮位于特定元素内：

<div id="external-wrapper">
    <button type="button" aria-label="Submit search" class="ms-search__form-submitSearch msc-btn">
    ::before
    </button>
</div>

您可以先识别容器，然后找到“aria-label”：

cy.get('#external-wrapper').find('[aria-label="Submit search"]').click('{force:true}');

Answer 3

cy.get('form').find('[aria-label="Submit search"]').click();

cy.get('表单'):

此命令选择页面上的元素。该表单通常用于对允许用户向服务器提交数据的输入元素进行分组，例如搜索栏或登录表单。

.find('[aria-label="提交搜索"]'):

find 命令用于在所选元素中搜索后代元素。 在这里，它正在寻找一个具有 aria-label 属性且值为“提交搜索”的元素。 aria-label 属性通常用于通过为屏幕阅读器提供文本标签来提高可访问性。在这种情况下，它将该元素标记为用于提交搜索的元素。

.click():

此命令单击在上一步中找到的元素。此操作模拟用户单击“提交搜索”按钮。