前言
在前端自动化测试中，元素定位是必不可少的一步。但是，很多时候我们会遇到一些动态化的元素，例如日期选择器、弹出框等。这些元素会因为用户操作等原因而动态生成或者消失，对于这些元素的定位，我们需要特别注意。
在本文中，我们将介绍如何使用 Cypress 在动态化元素的情况下进行有效的元素定位。
动态元素定位
隐式等待
在 Cypress 中，我们可以通过设置 defaultCommandTimeout 来全局地设置默认的命令超时时间。这个超时时间包括定位元素、执行命令等。默认超时时间为 4 秒。
Cypress.config('defaultCommandTimeout', 10000) //设置默认的命令超时时间为 10 秒然而，这种方式并不能很好地解决动态元素定位的问题。特别是在元素加载速度慢或者网络延迟高的情况下，使用 defaultCommandTimeout 并不能保证我们能够在规定时间内定位到元素。
显式等待
为了解决动态元素定位的问题，我们需要使用显式等待。简单来说，显式等待是指我们在代码中显式地设置一个等待条件，只有满足这个条件之后，才继续执行后续的命令。
在 Cypress 中，我们可以使用 cy.wait() 命令来进行显式等待。cy.wait() 命令会等待一段时间，然后再继续执行后续的命令。
cy.get('#my-button').click()
cy.wait(1000) //等待 1 秒
cy.get('#my-element').should('be.visible') //断言 my-element 是否可见上面的代码中，我们先找到一个按钮，并点击它。然后等待一秒钟，最后断言一个元素是否可见。
然而，这种方式也并不能很好地解决动态元素定位的问题。一方面，我们必须手动设置一个合适的等待时间，等待时间太长会浪费时间，而等待时间太短会导致测试失败。另一方面，如果等待条件设置不当，我们也可能错过了元素的出现。
重试定位
为了解决这些问题，我们可以考虑使用重试定位。重试定位是指我们在一定时间内不断尝试定位一个元素，直到找到为止。
在 Cypress 中，我们可以使用 cy.get() 命令的 retry() 方法来实现重试定位。
cy.get('#my-element', { timeout: 10000 }).should('be.visible').retry(5) //查找 my-element，查找超时时间为 10 秒，最多重试 5 次上面的代码中，我们使用 cy.get() 命令来查找一个元素。我们设置了一个超时时间为 10 秒，并最多重试 5 次。如果在这个时间内找到了元素，就结束查找。否则，就会抛出找不到元素的异常。
cy.get().retry() 命令还可以接受一个回调函数作为参数。这个回调函数会在每次查找失败后执行。我们可以利用这个回调函数来模拟用户操作等动态化的场景。
例如，我们在一个登录页面中，要等待验证码的输入框出现。这个验证码在用户点击发送验证码按钮后生成，因此我们需要不断尝试定位这个验证码。
cy.get('#send-verification-button').click() //点击发送验证码按钮
cy.get('#verification-code-input', { timeout: 10000 }).should('be.visible').retry((verificationCodeInput) => {
cy.get('#send-verification-button').click() //重新点击发送验证码按钮
})上面的代码中，我们先点击发送验证码按钮，然后不断尝试定位验证码输入框。当找到验证码输入框时，我们结束查找。如果找不到验证码输入框，则重新点击发送验证码按钮，再次尝试定位。
总结
在本文中，我们介绍了如何使用 Cypress 在动态元素定位的情况下进行有效的元素定位。我们通过设置等待条件进行显式等待，或者使用重试定位来解决动态化元素的问题。这些方法都可以帮助我们准确地定位到元素，进行自动化测试。
// javascriptcn.com 代码示例
//示例代码
describe('动态元素定位测试', () => {
it('找到动态元素', () => {
cy.visit('/dynamic.html')
cy.get('#my-button').click() //点击按钮，弹出动态元素
cy.get('#my-element', { timeout: 10000 }).should('be.visible').retry(5) //查找动态元素，超时时间为 10 秒，最多重试 5 次
cy.get('#my-element').click() //对找到的动态元素进行操作
})
})来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6527ce767d4982a6eba666b7