How to find by text content in Cypress?

在使用 Cypress 进行自动化测试时，我们可以通过多种方式来查找页面上的元素。如果要通过文本内容来确定元素是否存在，可以使用 .contains() 函数。这个函数非常强大，因为它允许我们根据元素的文本内容来选择元素，无论这些内容是静态还是动态的。

使用 .contains() 方法

.contains() 可以用来查找包含特定文本的元素。这个方法的基本语法是：

javascript
cy.contains(content)

这里的 content 是你希望匹配的文本内容。

示例

假设我们有一个按钮，按钮上的文本是 "提交"。如果我们想要检查这个按钮是否存在，我们可以这样写测试代码：

javascript
cy.contains('提交').should('exist');

这行代码会在整个 DOM 中查找任何包含文本 “提交” 的元素，并验证它是否存在。

根据元素类型和文本查找

有时候我们可能还需要指定元素的类型来进一步确保我们找到正确的元素。比如说，如果页面上有多个元素包含相同的文本，但我们只对其中的按钮感兴趣，我们可以这样做：

javascript
cy.contains('button', '提交').should('exist');

这里，'button' 指定了元素类型，'提交' 是我们想要匹配的文本。这样我们就能更准确地找到那个按钮。

结合选择器和 .contains()

我们还可以结合使用选择器和 .contains() 方法来精确地定位元素。例如，如果我们知道包含文本的按钮位于某个特定的容器中，我们可以这样写：

javascript
cy.get('#formId').contains('button', '提交').should('exist');

这里，#formId 是包含我们目标按钮的容器的 ID。

总结

通过以上方法，我们可以灵活而准确地使用 Cypress 根据文本内容来查找元素。这种方式特别适用于文本内容是动态生成或者可能会变化的情况，因为它不依赖于固定的 HTML 结构或属性。这使得我们的测试更加健壮，能够适应网页的变动。

This code will yield the DOM element with YOUR_BUTTON_CLASS which contains text 'Customer'. Is that what you're looking for?

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

Here the documentation for .contains cypress command.

Or maybe an even slicker solution is to use this:

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

This can be done since contains() can hold 2 arguments. And if it gets two arguments the first one is always the element and the second the text.

Another option that's not mentioned in the previous answers here.

Use testing-library/cypress-testing-library

After the installation, just import it in cypress' commands.js:

shell
import '@testing-library/cypress/add-commands'

And in your tests

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

This is pretty straightforward and easy to use. We use this in our production site along with react testing library. Highly recommend :)

The accepted answer "can" work. However: if the element is not visible on the first try, the element cannot be found in subsequent retries.

See: https://github.com/cypress-io/cypress/issues/3745

Cypress uses "Sizzle" as selector library - so this:

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

would work in retries.

There are multiple ways to do that

Syntaxes:

shell
cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)

Examples:

shell
cy.contains('button', 'Customer')
cy.contains('.buttonClass', 'Customer')
cy.get('button:contains("Customer")')
cy.contains('Customer')