前言
在前端开发过程中，我们经常需要对网页进行测试。而 Cypress 是一个用于前端自动化测试的工具，它提供了一套简单易用的 API，可以方便地对网页进行测试，包括查找 DOM 元素、模拟用户操作、断言结果等。
本文将重点介绍 Cypress 中如何查找 DOM 元素，包括基本的查找方法、常见的查找策略、优化查找性能等。
基本的查找方法
Cypress 提供了一系列方法来查找 DOM 元素，这些方法都以 cy. 开头，如 cy.get()、cy.contains()、cy.find() 等。
其中，cy.get() 是最基本的查找方法，可以根据 CSS 选择器、XPath 表达式等来查找元素。例如：
cy.get('#my-element') // 根据 ID 查找元素
cy.get('.my-class') // 根据 class 查找元素
cy.get('input[name="username"]') // 根据属性查找元素
cy.get('button:contains("Submit")') // 根据文本内容查找元素需要注意的是，cy.get() 返回的是一个 Promise 对象，需要使用 .then() 或 await 等方法来获取实际的 DOM 元素。
除了 cy.get()，Cypress 还提供了其他几个常用的查找方法：
cy.contains()：根据文本内容查找元素，可以指定父元素或查找范围。cy.find()：在指定元素内部查找元素，可以与cy.get()一起使用，实现更精确的查找。
常见的查找策略
除了基本的查找方法，Cypress 还提供了一些常见的查找策略，可以根据元素属性、位置、状态等进行查找。
根据属性查找
在实际的测试中，我们通常需要根据元素的属性值来查找元素，例如根据 href 属性查找链接，根据 src 属性查找图片等。
Cypress 提供了一系列方法来根据属性查找元素，包括：
cy.get('[href]')：查找具有href属性的元素。cy.get('[href="/home"]')：查找href属性值为/home的元素。cy.get('[href^="https://"]')：查找href属性值以https://开头的元素。cy.get('[href$=".pdf"]')：查找href属性值以.pdf结尾的元素。cy.get('[href*="google"]')：查找href属性值包含google的元素。
类似地，还可以根据其他属性进行查找，例如 id、class、name、value 等。
根据位置查找
有时候我们需要根据元素在页面中的位置来查找元素，例如查找第一个或最后一个元素、查找第 N 个元素等。
Cypress 提供了一些方法来根据位置查找元素，包括：
cy.get('.my-class:first')：查找第一个具有my-class类名的元素。cy.get('.my-class:last')：查找最后一个具有my-class类名的元素。cy.get('.my-class:eq(2)')：查找第 3 个具有my-class类名的元素。cy.get('.my-class:gt(2)')：查找下标大于 2 的具有my-class类名的元素。cy.get('.my-class:lt(3)')：查找下标小于 3 的具有my-class类名的元素。
根据状态查找
在实际的测试中，我们通常需要根据元素的状态来查找元素，例如根据是否可见、是否选中、是否禁用等。
Cypress 提供了一些方法来根据状态查找元素，包括：
cy.get('.my-class:visible')：查找可见的具有my-class类名的元素。cy.get('.my-class:hidden')：查找隐藏的具有my-class类名的元素。cy.get('.my-class:enabled')：查找可用的具有my-class类名的元素。cy.get('.my-class:disabled')：查找禁用的具有my-class类名的元素。cy.get('.my-class:checked')：查找被选中的具有my-class类名的元素。cy.get('.my-class:not(:checked)')：查找未被选中的具有my-class类名的元素。
优化查找性能
在实际的测试中，我们需要尽可能地优化查找性能，以提高测试效率和稳定性。
以下是一些优化查找性能的方法：
- 尽可能使用具有唯一标识的元素进行查找，例如 ID。
- 尽可能使用具有具体含义的选择器进行查找，例如类名、标签名等。
- 避免使用复杂的选择器，例如后代选择器、通配符等。
- 避免使用不稳定的选择器，例如基于位置的选择器、基于文本内容的选择器等。
- 尽可能使用缓存的元素进行查找，例如使用
cy.wrap()包装已经查找到的元素。
示例代码
以下是一些示例代码，演示了如何使用 Cypress 查找 DOM 元素：
// javascriptcn.com 代码示例
// 根据 ID 查找元素
cy.get('#my-element').click()
// 根据 class 查找元素
cy.get('.my-class').click()
// 根据属性查找元素
cy.get('input[name="username"]').type('admin')
cy.get('button:contains("Submit")').click()
// 根据文本内容查找元素
cy.contains('Login').click()
// 在指定元素内部查找元素
cy.get('#my-element').find('.my-class').click()
// 查找第一个具有 my-class 类名的元素
cy.get('.my-class:first').click()
// 查找可见的具有 my-class 类名的元素
cy.get('.my-class:visible').click()总结
通过本文的介绍，我们了解了 Cypress 中如何查找 DOM 元素，包括基本的查找方法、常见的查找策略、优化查找性能等。希望本文能够帮助读者更好地使用 Cypress 进行前端测试，提高测试效率和稳定性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6584e165d2f5e1655df75a94