在 Cypress 测试中，一个常见的问题是元素定位失败。当我们编写测试用例时，通常会基于页面上的元素来执行一些操作或进行一些断言。但是，有时候我们可能会遇到无法定位到特定元素的问题，这可能是由于以下原因导致的：元素还没有加载；元素已经被移除或隐藏了；或者元素根本不存在。那么在这种情况下，我们该如何处理呢？
本文将介绍在 Cypress 测试中如何处理元素定位失败的情况。我们将讨论以下话题：
- 如何使用 Cypress 中的
get方法定位元素 - 当元素定位失败时，Cypress 的默认行为是什么
- 针对元素定位失败的处理策略
一. 使用 Cypress 中的 get 方法定位元素
在 Cypress 中，我们可以使用 get 方法来定位页面上的元素。get 方法的参数可以是选择器字符串、DOM 元素、XPath 或函数。如果通过选择器字符串定位元素，请确保将其写得十分精确和有意义，这样我们就可以避免出现意料之外的情况。
以下是一些常见的选择器定位元素的示例：
cy.get('.user-avatar');
cy.get('#new-post-form');
cy.get('[data-cy="submit-button"]');
cy.get('[name="username"]');
cy.get(':contains("Sign up")');当我们编写测试时，我们可以将 get 方法链式调用，这样在页面上找到元素后，我们可以执行任何我们想要的操作，例如在输入字段中输入文本、单击按钮或断言元素是否存在等。
cy.get('#username-input')
.type('foobar')
.should('have.value', 'foobar');
cy.get('[data-cy="submit-button"]').click();
cy.get('.success-message').should('be.visible');二. 当元素定位失败时，Cypress 的默认行为是什么
当我们使用 get 方法定位页面上的元素时，如果无法找到元素，Cypress 会抛出 CypressError 异常，该异常会中断测试执行并使测试失败。这种默认行为通常是合理的，因为它确保了我们编写的测试用例在页面上执行正确的元素操作和断言。
然而，在某些情况下，我们实际上希望测试用例继续运行，而不是停止，当元素无法找到时，我们需要提供一些自定义的容错处理机制。
三. 针对元素定位失败的处理策略
在 Cypress 测试中，我们可以使用几种不同的方法来处理元素定位失败的情况。
1. 使用 should 方法
Cypress 的 should 方法允许我们在一定时间内等待元素出现。如果元素在指定时间内出现，则 should 方法会返回一个 Cypress 链式对象，我们可以在对象上执行任何操作。
cy.get('.user-avatar').should('exist').click();在上面的例子中，Cypress 会等待 .user-avatar 元素出现，如果它在一定时间内不出现，那么测试将失败。
我们也可以使用 should 方法的 not 谓词来断言元素不存在。
cy.get('#nonexistent-element').should('not.exist');在上面的例子中，如果 #nonexistent-element 元素在页面上不存在，则该测试将通过。
2. 使用 find 方法
Cypress 的 find 方法可以在指定的元素内查找子元素。当在某父元素中查找子元素定位失败时，我们可以使用该方法来进行重试。
cy.get('.parent-element')
.find('.nested-element')
.click();在上面的例子中，Cypress 会在 .parent-element 元素内查找 .nested-element 元素。如果 .nested-element 元素在指定时间内无法找到，则测试将失败。
3. 使用 retry 方法
Cypress 的 retry 方法允许我们在一定时间内重试元素定位。如果元素在指定时间内无法找到，则它将重试直到找到它或达到最大重试次数。
cy.get('#nonexistent-element').retry(3).click();在上面的例子中，Cypress 将尝试在 #nonexistent-element 元素中重试 3 次。如果它在最大重试次数内无法找到，则测试将失败。
4. 使用 then 方法
Cypress 的 then 方法允许我们在元素定位失败时，执行自定义的错误处理逻辑。在 then 方法中，我们可以捕获元素定位失败的异常，并通过抛出一个新的异常来处理该问题。
cy.get('#nonexistent-element')
.then(($element) => {
if ($element.length === 0) {
throw new Error('Unable to locate element.');
}
return $element;
})
.click();在上面的例子中，如果找不到 #nonexistent-element 元素，则 then 方法将抛出一个新的 Error 异常。在这种情况下，我们可以使用 on('fail', ...) 方法来捕获该异常，并在测试报告中记录它。
cy.on('fail', (error) => {
if (error.message.includes('Unable to locate element.')) {
// Handle the error.
}
});结论
当我们编写 Cypress 测试用例时，元素定位失败是一个不可避免的情况。在本文中，我们介绍了一些处理元素定位失败的有效技术。我们可以使用 should 方法、find 方法、retry 方法或 then 方法来处理元素定位失败的情况。我们希望这些技术可以帮助你编写更健壮和可靠的 Cypress 测试用例。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671688dbad1e889fe21cea92