Cypress 是一个现代化的 JavaScript 测试框架，它能够帮助前端开发人员进行端到端的自动化测试，其中包括 UI 测试和 API 测试。在实际的项目中，我们经常会遇到动态生成的元素，例如通过 Ajax 请求获取的数据、动态生成的表单、弹出层等。在本文中，我们将探讨如何使用 Cypress 处理动态生成的元素。
1. 等待元素的出现
通常情况下，动态生成的元素可能需要一定的时间才能完全出现在页面中，而 Cypress 提供了丰富的等待方法来解决这个问题。例如，可以使用 cy.get() 方法获取元素，并加上 { timeout: 10000 } 参数表示等待 10 秒：
cy.get('.my-element', { timeout: 10000 }).should('be.visible');在这个示例中，如果 .my-element 元素在 10 秒内没有出现在页面中，那么测试将会失败。需要注意的是，cy.get() 方法实际上会一直等待元素的出现，直到超时或者元素确实出现。
除了 cy.get()，Cypress 还提供了其他的等待方法，例如 cy.contains()、cy.wait() 等，可以根据实际情况选择使用。
2. 处理多个元素
有时候，需要对多个动态生成的元素进行处理。例如，可以使用 cy.get() 方法与 each() 方法结合，对每个元素进行操作。
cy.get('.my-elements').each(($el, index, $list) => {
// 对每个元素执行操作
});在这个示例中，.my-elements是一组元素的共同类名，$el 代表其中的一个元素，index 是该元素在列表中的位置，$list 则代表了整个列表。使用 each() 方法可以让我们对每个元素进行单独的处理。
3. 等待元素的状态改变
有些动态生成的元素，例如加载指示器，可能需要等到它们的状态改变才能进行下一步操作。Cypress 提供了 cy.waitUntil() 方法来处理这种情况。
cy.get('.loading-indicator').should('be.visible');
cy.waitUntil(() => {
// 判断加载指示器的状态是否改变
}, { timeout: 10000, interval: 500 });在这个示例中，首先等待加载指示器的出现，然后使用 cy.waitUntil() 方法等待其状态的改变，直到指定的函数返回真值或超时为止。interval 参数表示轮询的间隔时间，默认是 50 毫秒。该方法可以在动态元素的状态改变时使用，例如等待表格数据加载完成后才进行断言。
4. 使用自定义命令简化操作
在处理动态生成的元素时，我们可能需要多次使用相同的代码进行等待操作，这会导致测试代码的冗长和重复。Cypress 支持自定义命令来简化操作，例如：
Cypress.Commands.add('waitForElement', (selector) => {
cy.get(selector, { timeout: 10000 }).should('be.visible');
});
// 使用自定义命令
cy.waitForElement('.my-element');在这个示例中，我们定义了名为 waitForElement 的自定义命令，在其中对元素进行等待操作。之后，我们可以在测试代码中使用 cy.waitForElement() 来等待元素的出现。这种方式能够大幅度简化代码，在处理多个动态生成的元素时尤为有用。
总结
处理动态生成的元素是 Cypress 测试框架中常见的操作之一。在本文中，我们介绍了 Cypress 提供的等待方法，包括等待元素的出现、处理多个元素、等待元素的状态改变等，同时也探讨了如何使用自定义命令来简化操作。希望本文能够帮助大家更有效地使用 Cypress 进行测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6501bfc695b1f8cacdf63799