在 Cypress 中,我想根据按钮的文本内容从一组按钮中选择一个按钮。我该怎么做?这是我的方法:
export const getCustomerButton = () => getNavigationSidenav()
.find('mat-expansion-panel-header')
.each(($el, index, $list) => {
const text = $el.find('.mat-content > mat-panel-title').text();
if (text === 'Customer') {
return $el;
}
return null;
});
我现在遇到的问题是我必须从元素数组中过滤掉空值。有没有更简单的方法?
此代码将生成带有
YOUR_BUTTON_CLASS
的 DOM 元素,其中包含文本“Customer”。这就是您要找的吗?
cy.get('.YOUR_BUTTON_CLASS').contains('Customer');
这里是 .contains
cypress 命令的文档。
或者也许一个更巧妙的解决方案是使用这个:
cy.contains('YOUR_BUTTON_CLASS', 'Customer');
这是可以完成的,因为
contains()
可以容纳 2 个参数。如果它有两个参数,第一个参数始终是元素,第二个参数始终是文本。
这里之前的答案中没有提到的另一个选项。
安装完成后,直接在cypress中导入即可
commands.js
:
import '@testing-library/cypress/add-commands'
在你的测试中
cy.findAllByText("Jackie Chan").click();
cy.findByText("Button Text").should("exist");
cy.findByText("Non-existing Button Text").should("not.exist");
cy.findByLabelText("Label text", { timeout: 7000 }).should("exist");
cy.get("form").within(() => {
cy.findByText("Button Text").should("exist");
});
cy.get("form").then((subject) => {
cy.findByText("Button Text", { container: subject }).should("exist");
});
这非常简单且易于使用。我们在生产站点中使用它以及反应测试库。强烈推荐:)
接受的答案“可以”工作。但是:如果该元素在第一次尝试时不可见,则在后续重试中也找不到该元素。
参见:https://github.com/cypress-io/cypress/issues/3745
Cypress 使用“Sizzle”作为选择器库 - 所以这样:
cy.get('button:contains("FooBar")')`
可以重试。
有多种方法可以做到这一点
语法:
cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)
示例:
cy.contains('button', 'Customer')
cy.contains('.buttonClass', 'Customer')
cy.get('button:contains("Customer")')
cy.contains('Customer')
最简单的方法是:
cy.get('Button_Class').contains('Button_Text')
就您而言,解决方案是:
cy.get('.mat-content > mat-panel-title').contains('Customer')
有相关文档这里。
虽然
cy.contains('selector', 'text')
和 cy.get('selector').contains('text')
都是有效的解决方案,但了解它们之间的区别很重要。
cy.contains()
将生成与您的选择器匹配并包含文本的元素,而 cy.get().contains()
将生成直接包含文本的选择器中的元素 within
示例cy.get('div').contains('sample text')
将产生
span
元素,而
cy.contains('div', 'sample text')
命令将产生
div
元素
<div>
<span>
sample text
</span>
</div>