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 元素。这就是你要找的吗？

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

这里的文档的.contains柏树命令。

Answer 2

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

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

赛普拉斯使用“Sizzle”作为选择器库 - 所以这样：

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

将在重试中起作用。

Answer 3

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

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

这可以完成，因为contains()可以容纳 2 个参数。如果它有两个参数，第一个总是元素，第二个是文本。

Answer 4

此处以前的答案中未提及的另一个选项。

使用testing-library/cypress-testing-library

安装后，只需将其导入到 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");
});

这非常简单且易于使用。我们在我们的生产站点中使用它以及 react 测试库。强烈推荐 ：）

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