Cypress 是一种用于编写自动化测试的前端测试框架，它提供了一组简单易用的 API，使测试变得容易和有趣。然而，当您在测试期间使用 cy.contains() 命令时，您可能会遇到一个非常常见的错误，即找不到匹配的元素。在本文中，我们将看看这个问题的一些原因，并提供解决此问题的几种方法。
问题原因
在 Cypress 中，cy.contains() 命令允许查找包含某个文本内容的 DOM 元素。但是，当您在测试期间使用该命令时，您可能会遇到以下错误消息：
cy.contains() failed because the subject did not contain the text: hello world
这是因为 Cypress 无法找到包含指定文本的元素。这通常发生在元素还没有被加载完成，或者它不在您的应用程序的可见部分中时。
下面是一些可能导致 cy.contains() 命令失败的常见原因：
- DOM 元素还未加载完成
- 您正在查找的元素位于应用程序的不可见部分，例如：隐藏在下拉框中等
- 您无法准确地识别文本，因为它是仅在用户操作过程中才会显示的动态文本。
解决方案
以下是几种解决 cy.contains() 命令找不到元素的问题的方法：
等待加载完成
在测试期间等待 DOM 元素加载完成后再查找它们是一个明智的决策。在 Cypress 中，您可以使用 cy.wait() 命令等待，直到元素加载完成。例如：
cy.get('.title').should('have.text', 'Hello World!')
cy.wait(1000) // 等待 1 秒钟
cy.contains('Hello World!')指定可见性
如果您的元素在应用程序中的不可见部分，则可能需要指定元素的可见性，以便 Cypress 可以找到它。使用 cy.contains() 命令时，您可以使用 visible 选项来查找可见元素，例如：
cy.contains('Hello World!', { visible: true })使用标识符
如果您无法识别元素或文本，您可以使用 ID、类或其他属性来查找元素。例如：
cy.get('#title').contains('Hello World!')添加断言
添加断言可以帮助您识别测试过程中的问题。在 Cypress 中，您可以使用 cy.contains() 命令的 .should() 函数来添加断言，例如：
cy.contains('Hello World!').should('be.visible').and('have.text', 'Hello World!')示例
一些情景示例，解释了如何使用 Cypress 来解决 cy.contains() 找不到元素的问题。在每个示例中，我们都使用 .wait() 命令等待 1 秒钟，以获取元素加载完成的时间。您也可以根据需要更改此等待时间。
示例 1：等待加载完成
cy.get('.title').should('have.text', 'Hello World!')
cy.wait(1000) // 等待 1 秒钟
cy.contains('Hello World!')示例 2：使用可见选项
cy.contains('Hello World!', { visible: true })示例 3：使用标识符
cy.get('#title').contains('Hello World!')示例 4：添加断言
cy.contains('Hello World!').should('be.visible').and('have.text', 'Hello World!')总结
在 Cypress 中，cy.contains() 命令是一个广泛使用的命令，但它可能会遇到一些常见的错误。对于找不到匹配的元素的情况，您可以使用等待加载完成、指定可见性、添加标识符或添加断言来解决问题。这些方法中的任何一种都可以帮助您找到并解决 cy.contains() 命令中的常见问题。
希望这篇文章可以帮助您更好地使用 Cypress 并解决其文本匹配问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482e1dc48841e989423e602