Cypress - 如何通过文本内容查找？

Question

在 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;
  });

我现在遇到的问题是我必须从元素数组中过滤掉空值。有没有更简单的方法？

Answer 1

此代码将生成带有

YOUR_BUTTON_CLASS

的 DOM 元素，其中包含文本“Customer”。这就是您要找的吗？

cy.get('.YOUR_BUTTON_CLASS').contains('Customer');

这里是 .contains

 cypress 命令的文档

。

Answer 2

或者也许一个更巧妙的解决方案是使用这个：

cy.contains('YOUR_BUTTON_CLASS', 'Customer');

这是可以完成的，因为

contains()

可以容纳 2 个参数。如果它有两个参数，第一个参数始终是元素，第二个参数始终是文本。

Answer 3

这里之前的答案中没有提到的另一个选项。

使用测试库/赛普拉斯测试库

安装完成后，直接在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");
});

这非常简单且易于使用。我们在生产站点中使用它以及反应测试库。强烈推荐:)

Answer 4

接受的答案“可以”工作。但是：如果该元素在第一次尝试时不可见，则在后续重试中也找不到该元素。

参见：https://github.com/cypress-io/cypress/issues/3745

Cypress 使用“Sizzle”作为选择器库 - 所以这样：

cy.get('button:contains("FooBar")')`

可以重试。

Answer 5

有多种方法可以做到这一点

语法：

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

Answer 6

最简单的方法是：

cy.get('Button_Class').contains('Button_Text')

就您而言，解决方案是：

cy.get('.mat-content > mat-panel-title').contains('Customer')

有相关文档这里。

Answer 7

虽然

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>