如何单击带有ARIA标签的按钮？

Question

我正在尝试使用柏树测试框架自动单击按钮。

源代码用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钩子未完成的情况，因为测试具有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（'form'）：

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

.find（'['[aria-label =“ crist search'']'）：

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

.click（）：

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

说明：

在上述代码中，他从表单标签中提到
我已将HTML表单标签代替类或ID
对于柏树，使用唯一的ID或类来触发元素以“ [aria-label =“ crist search”]”，然后单击该元素。