Cypress 如何处理动态生成的元素？-JavaScript中文网-JavaScript教程资源分享门户

在前端自动化测试中，Cypress 是一个非常强大的工具，可以帮助我们快速地编写和运行测试用例。但是，有时候我们会遇到一些动态生成的元素，这些元素需要等待一段时间才能被找到。本文将介绍 Cypress 如何处理动态生成的元素。

什么是动态生成的元素？

动态生成的元素是指在页面加载后，通过 JavaScript 代码动态生成的元素。这些元素可能由于网络延迟、异步请求等原因，不能立即在页面中找到。这对于自动化测试来说是一个挑战，因为我们需要等待元素出现后才能进行后续操作。

如何处理动态生成的元素？

Cypress 提供了一些方法来处理动态生成的元素。下面是一些常用的方法：

cy.wait()

cy.wait() 方法可以等待一段时间，直到元素出现。例如，我们可以使用以下代码等待一个 ID 为 "dynamic-element" 的元素出现：

cy.wait(5000) // 等待 5 秒钟
cy.get('#dynamic-element').should('exist')

cy.get() + should()

cy.get() 方法可以找到一个元素，should() 方法可以检查元素是否满足特定的条件。例如，我们可以使用以下代码找到一个 ID 为 "dynamic-element" 的元素，并检查它是否可见：

cy.get('#dynamic-element').should('be.visible')

cy.get() + retry()

cy.get() 方法可以找到一个元素，retry() 方法可以在元素不可见时重试。例如，我们可以使用以下代码找到一个 ID 为 "dynamic-element" 的元素，并在元素不可见时重试 10 次：

cy.get('#dynamic-element').retry(10).should('be.visible')

cy.get() + within()

cy.get() 方法可以找到一个元素，within() 方法可以在元素内部查找其他元素。例如，我们可以使用以下代码找到一个 ID 为 "dynamic-element" 的元素，并在这个元素内部查找一个类名为 "dynamic-child" 的元素：

cy.get('#dynamic-element').within(() => {
  cy.get('.dynamic-child').should('exist')
})

cy.get() + then()

cy.get() 方法可以找到一个元素，then() 方法可以在元素上执行其他操作。例如，我们可以使用以下代码找到一个 ID 为 "dynamic-element" 的元素，并在这个元素上点击一个按钮：

cy.get('#dynamic-element').then(($element) => {
  $element.find('.button').click()
})

示例代码

下面是一个使用 Cypress 处理动态生成的元素的示例代码。在这个示例中，我们使用了一个异步请求来动态生成一个元素，并在这个元素中添加一个按钮。然后，我们使用 Cypress 找到这个元素，并在这个元素上点击按钮。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Cypress Demo</title>
  </head>
  <body>
    <div id="container"></div>
    <script>
      setTimeout(() => {
        const $element = document.createElement('div')
        $element.setAttribute('id', 'dynamic-element')
        $element.innerHTML = '<button class="button">Click me</button>'
        document.getElementById('container').appendChild($element)
      }, 5000)
    </script>
  </body>
</html>

// javascriptcn.com 代码示例
describe('Cypress Demo', () => {
  it('should click the dynamic button', () => {
    cy.visit('http://localhost:8080')
    cy.wait(5000)
    cy.get('#dynamic-element').should('exist')
    cy.get('#dynamic-element').then(($element) => {
      $element.find('.button').click()
    })
  })
})

总结

处理动态生成的元素是自动化测试中的一个常见问题，但是使用 Cypress 可以轻松地解决这个问题。在本文中，我们介绍了一些常用的方法，包括 cy.wait()、cy.get() + should()、cy.get() + retry()、cy.get() + within() 和 cy.get() + then()。这些方法可以帮助我们等待元素出现，并在元素上执行其他操作。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6586bc09d2f5e1655d11ade2