前言
在编写前端自动化测试时，正确的元素定位非常重要，而 Cypress 是一个强大的前端自动化测试工具，我们需要掌握一些技巧来确保它的定位函数（如 cy.get()）稳定可靠，接下来我们将为大家分享一些方法。
1. 使用唯一的 ID 或 Class
使用唯一的 ID 或 Class 来定位元素，这种方法是最稳定和推荐的。在开发过程中，每个元素都应该有一个唯一的 ID 或者一个可以唯一标识这个元素的 Class，这样它们就可以轻松地被定位。
例如，在下面的 HTML 中，我们可以使用 #btn-submit 来定位提交按钮：
<button id="btn-submit">提交</button>
如果这个按钮没有唯一的 ID，我们需要找到一个可以唯一标识该元素的 Class，例如：
<button class="btn btn-submit">提交</button>
我们可以使用 .btn-submit 来定位提交按钮。
2. 避免使用 XPath 定位
XPath 是一种用于跨平台和跨浏览器定位元素的方法，但是它比直接使用 ID 或 Class 更容易受到页面结构或样式的改变的影响，因此建议尽量避免使用。如果必须使用 XPath 定位，则应该尽量使用相对于唯一元素的路径来定位，避免使用绝对路径。
例如，在下面的 HTML 中，如果要定位提交按钮，我们可以使用以下 XPath：
//button[@id="btn-submit"]
但是，这个 XPath 是绝对路径，如果页面的结构发生了改变，这个 XPath 可能就会失效。
3. 使用 cy.contains() 定位元素
在某些情况下，元素的 ID 或 Class 不唯一，但是它们的文本内容是唯一的。这时，我们可以使用 cy.contains() 函数来定位元素。例如，在下面的 HTML 中，我们可以使用以下代码来定位 “提交” 按钮：
<button>提交</button>
cy.contains('提交').click();cy.contains() 函数将查找所有包含指定文本的元素，然后返回第一个匹配的元素。
4. 修改 Cypress 默认的超时时间
Cypress 默认情况下会等待 4 秒钟来查找元素，如果元素在超时时间内没有被找到，测试就会失败。有时候，这个超时时间并不足够，我们可以通过修改 defaultCommandTimeout 来增加超时时间。
Cypress.config('defaultCommandTimeout', 10000); // 10 秒在测试用例中使用这个代码后，Cypress 会在 10 秒之内等待元素出现。但是，过长的超时时间可能会导致测试变慢，在修改超时时间之前，应该先排除代码或页面渲染导致的问题。
5. 使用 cy.wrap() 提高可读性和稳定性
有时候，我们会使用 Cypress 的定位函数来获取多个元素，然后在这些元素上执行一些操作。在这种情况下，应该使用 cy.wrap()，它可以将一组元素包裹在一个 Cypress 对象中，我们可以对它们进行更清晰明了的操作。
例如，假设有一组带有“active”类的按钮需要被点击，我们可以这样写：
cy.get('button.active').click();这种代码看起来很简洁，但是如果没有找到 button.active 元素，测试就会失败。我们应该使用 cy.wrap() 包裹这些按钮，如下所示：
cy.get('button.active').then(buttons => {
cy.wrap(buttons).click({ multiple: true });
});这个代码更易于阅读，并且使用 cy.wrap() 可以帮助我们更好地处理可能的查询失败。
结论
元素的正确定位是编写稳健的自动化测试的重要基础。在本文中，我们介绍了一些通过使用唯一的 ID 或 Class、避免使用 XPath 定位、使用 cy.contains()、修改默认超时时间和使用 cy.wrap() 等技巧来提高定位程序的稳定性和可读性的方法。希望这些技巧能够帮助你编写更有效和可靠的 Cypress 测试代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67222b7a2e7021665e0a9fa2