在前端开发中，自动化测试已经成为了必不可少的一部分。Cypress 是一款非常强大的 JavaScript 自动化测试工具，它能够帮助我们有效地测试我们的应用程序。然而，有时候我们的应用程序可能会动态生成元素，这就给测试带来了新的挑战。在这篇文章中，我会介绍如何使用 Cypress 处理动态生成的元素。
如何识别动态生成的元素
动态生成的元素是指在页面加载完成之后，通过 JavaScript 代码添加到 DOM 树中的元素。这类元素并不存在于原始的 HTML 代码中，因此在自动化测试过程中可能会被无视。为了解决这个问题，我们需要寻找一种方法来识别动态生成的元素。
可以通过以下两种方法来识别动态生成的元素：
方法 1：使用 cy.wait() 命令
Cypress 提供了一个非常有用的命令 cy.wait()，可以等待特定时间或者等待特定的条件成立。使用 cy.wait() 命令可以等待动态生成的元素加载完成后再进行操作。
cy.wait('@dataLoaded').then(() => {
cy.get('.dynamic-element').should('exist');
});在上面的示例中，我们通过 cy.wait() 命令等待一个名为 @dataLoaded 的事件触发。一旦事件触发，就会执行回调函数中的代码，检查是否存在一个类名为 dynamic-element 的元素。
方法 2：使用 cy.get() 命令
Cypress 还提供了一个非常有用的命令 cy.get()，可以让我们查询并操作元素。如果动态生成的元素具有特定的属性或类名，我们可以使用该命令来查找元素。
cy.get('.dynamic-element', { timeout: 10000 }).should('exist');在上面的示例中，我们使用 cy.get() 命令查找一个类名为 dynamic-element 的元素，同时设置了一个 10 秒的超时时间。一旦找到该元素，就会执行断言逻辑，检查元素是否存在。
如何处理动态生成的内容
在测试中，动态生成的元素可能会伴随着动态生成的内容，例如输入框、下拉列表等。这些动态生成的内容可能需要我们通过特定的操作才能触发。以下是一些常见的解决方法：
方法 1：使用 cy.type() 命令
如果动态生成的元素是一个输入框，我们可以使用 cy.type() 命令输入特定的文本。
cy.get('.username-input').type('Alice')在上面的示例中，我们使用 cy.get() 命令查找一个类名为 username-input 的输入框，然后使用 cy.type() 命令输入文本 Alice。
方法 2：使用 cy.select() 命令
如果动态生成的元素是一个下拉列表，我们可以使用 cy.select() 命令选择特定的选项。
cy.get('.fruit-list').select('apple')在上面的示例中，我们使用 cy.get() 命令查找一个类名为 fruit-list 的下拉列表，然后使用 cy.select() 命令选择 apple 选项。
方法 3：使用 cy.wrap() 命令
如果动态生成的元素是一个按钮或链接，我们可以使用 cy.wrap() 命令包装该元素，然后使用 .click() 等命令模拟点击事件。
cy.get('.submit-button').then($button => {
cy.wrap($button).click();
})在上面的示例中，我们使用 cy.get() 命令查找一个类名为 submit-button 的按钮，然后使用 cy.wrap() 命令包装该元素，并使用 .click() 命令模拟点击事件。
总结
在本文中，我们介绍了如何使用 Cypress 处理动态生成的元素。主要包括两个方面的内容：如何识别动态生成的元素和如何处理动态生成的内容。当遇到动态生成的元素时，我们可以通过 cy.wait() 命令或者 cy.get() 命令来识别元素；当需要处理动态生成的内容时，我们可以使用 cy.type() 命令、cy.select() 命令等命令来模拟特定的操作。通过这些方法，我们可以更加高效地完成自动化测试任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64867afe48841e9894509e38