如何使用 Cypress 自动化点击 aria 标签？

Question

我正在尝试使用 cypress 自动化框架来自动化按钮单击功能。应用程序源代码是用 React.js 编写的，我尝试单击的元素是一个带有伪代码的按钮。 这是用react代码编写的按钮的源代码。

<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

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

<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 2

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

参见 解决第一次点击问题

添加 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 3

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