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

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

- Phil

---

你有任何可以展示的HTML吗？我看到你已经得到了答案，但是展示一下你尝试选择的部分会有所帮助。 - Maccurt

Answer 1

这段代码将返回带有文本“Customer”的YOUR_BUTTON_CLASS DOM元素。这是否是您正在寻找的内容？

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

这里是关于Cypress命令.contains的文档。

- DurkoMatko

---

请注意，像这样链接多个命令可能会导致不稳定性，因为一旦找到某些元素，即使它找到的所有元素中都不包含“Customer”，get 命令也不会重试（详见文档）。 - JessefSpecialisterren

仅仅执行 cy.get('Customer') 将会尝试获取一个名为 Customer 的元素，这 不是 我们所需要的。 - uinstinct

如果您想获取元素的计数，请使用此方法参考此链接 https://dev59.com/u1MH5IYBdhLWcg3w7Vvx#67699386 - Prasad Kavinda

Answer 2

或许更加流畅的解决方案是使用这个:

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

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

- Mr. J.

---

包含方法仅返回第一个找到的元素。 - TheTanadu

甚至更简单的是：cy.contains('Customer')。 - JohnP2

由于Cypress处理查询重试的方式，建议使用cy.contains（selector，text），它会自动作为单个命令进行重试。因此，这应该是默认答案。 https://docs.cypress.io/guides/core-concepts/retry-ability#Merging-queries - TotomInc

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

这很简单易用。我们在生产网站上与React测试库一起使用它。强烈推荐 :)

- Joshua

---

这就是我要用的 - 感谢你的提示！ - Mike Harrison

我只是想知道在安装这个插件之前，cy.findByText('Button').click() 是否会产生与内置命令 cy.contains('Button').click() 相同的结果。如果不同，有什么区别？ - ebanster

我进行了一个快速测试，看起来返回的按钮略有不同，请参见此截图，但它们都按照应该的方式工作。 - Joshua

findAllByText() 是否有一种方法只针对可见元素？ - kano

没有测试过，但我认为你可以使用.filter(':visible')? - Joshua

Answer 4

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

参见：https://github.com/cypress-io/cypress/issues/3745 Cypress使用"Sizzle"作为选择器库 - 所以这个：

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

会在重试中起作用。

- madflow

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

- Varun Sukheja

Answer 6

最简单的方法是：

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

在您的情况下，解决方案如下：

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

这里有一份关于此的文档链接。

- Utsav Khatiwada