赛普拉斯 - 如何通过文本内容查找？

Question

在 Cypress 中，我想 select 根据文本内容从一组按钮中选出一个按钮。我该怎么做？这是我的方法：

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

Here the documentation 用于 .contains 赛普拉斯命令。

Answer 2

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

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

这是可以做到的，因为 contains() 可以容纳 2 个参数。如果它有两个参数，第一个始终是元素，第二个始终是文本。

Answer 3

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

使用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");
});

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

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

赛普拉斯 - 如何通过文本内容查找？

Cypress - how to find by text content?

javascript

end-to-end

cypress