前端自动化测试是开发中不可或缺的环节之一，而 Cypress 作为现在比较流行的自动测试工具，其使用广泛。虽然 Cypress 可以很简单地使用选择器辅助寻找元素，但是在使用 cy.contains() 方法时仍可能遇到找不到指定元素的问题，本文将为大家提供解决方法。
核心问题
cy.contains() 方法是 Cypress 中常用的定位元素方法之一，其可以直接寻找文本内容，在 DOM 中定位对应的元素。使用它可以简便高效地定位简单的元素，但是却不够准确。
在实际使用中，我们可能会遇到寻找错误的元素的情况，此时就会出现“cy.contains() 未找到指定的元素”这样的报错。以下是该函数的基本语法：
cy.contains(selector, content)
其中，selector 是一个 CSS 选择器，表示要匹配的元素，而 content 则是表示要找到的文本内容。如果成功找到匹配的元素，则函数会直接点击其上执行之后的操作，但失败则会出现错误。
解决方法
类似于使用其他自动化测试工具定位元素的方法，如果使用 cy.contains() 定位元素失败，我们可以考虑使用其他的方法。以下是几个简单但实用的方法：
使用 cy.get() 定位父级元素：有时候，要找的元素在一个父级元素中，并不是文本内容所处的位置，此时我们需要使用其他的选择器或方法来定位到该元素的位置。例如，我们可以先使用 cy.get() 方法定位到该父级元素，再使用查询方法筛选出我们需要的元素。
选择更为准确的文本内容：如果文本内容比较多，可能会有多个元素都包含相同的文本内容，此时我们依然需要使用其他方法来筛选元素。例如，我们可以选择更为准确的文本内容，避免匹配错误。
使用其他选择器：与使用 cy.get() 方法一样，我们可以使用其他的选择器定位元素。
示例代码
以下是一些用于解决 cy.contains() 报错的示例代码：
示例 #1
使用 cy.get() 定位父级元素：
cy.get('ul').contains('li', '目标项目名称').click()通过先定位到 ul 元素，就可以准确地获取到该文本内容对应的子元素。
示例 #2
选择更为准确的文本内容：
cy.contains('确认').first().click()
cy.contains('已确认').click()在这个例子中，我们使用两个不同的文本内容来分别操作不同的元素，而这两个元素都包含“确认”文本。因此，我们可以使用 first() 方法来选择第一个。
示例 #3
使用其他选择器：
cy.get('.target-class > button').click() // 使用 class 选择器寻找指定元素
cy.get('#target-id > a').click() // 使用 id 选择器寻找指定元素这些选择器都非常灵活，可以根据具体选择器的特点针对性地定位元素，且不会像 contains() 方法那样出现匹配错误的问题。
总结
以上就是解决 cy.contains() 报错的方法，当我们在使用 Cypress 进行自动化测试时遇到了类似的问题，可以根据上述方法尝试解决。通过这些方法，我们可以更好地深入了解 Cypress 的使用方法，并创建出准确的自动化测试脚本。
希望本文对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469b194968c7c53b098a1ff