什么是动态生成元素
动态生成元素是指在页面上通过脚本动态生成的 HTML 元素，这些元素在页面加载时并不存在，只有在某些条件满足时才会被创建并添加到页面中。这种元素的特点是它们的属性和内容在不同的情况下可能会发生变化，因此在进行 UI 自动化测试时需要特别注意。
Cypress 的解决方案
Cypress 是一个流行的前端端到端测试框架，它提供了一些解决方案来处理动态生成元素。以下是一些常用的方法：
等待元素的出现
Cypress 提供了 cy.get() 方法来获取页面上的元素，但是如果元素是动态生成的，可能会出现获取不到的情况。这时可以使用 cy.wait() 方法来等待元素的出现。例如，以下代码等待一个 #dynamic-element 元素出现并进行操作：
------------- -- -- - - ----------------------------------
使用 cy.contains() 方法
如果动态生成元素的内容是已知的，可以使用 cy.contains() 方法来获取元素。例如，以下代码获取一个包含文本为 "dynamic element" 的元素：
-------------------- -----------------
使用 cy.get() 方法的回调函数
如果以上方法都不能解决问题，可以使用 cy.get() 方法的回调函数来等待元素的出现。例如，以下代码等待一个 #dynamic-element 元素出现并进行操作：
-------------------------- - -------- ----- ----------- -- - ----------- --
在上面的代码中，{ timeout: 10000 } 参数指定了等待时间为 10 秒。
示例代码
以下是一个示例代码，演示了如何使用 Cypress 处理动态生成元素：
----------------- ------- ------ -- -- -
---------- ----- --- ------- --------- -- -- -
-------------------------------
-------------------------
------------- -- -- - -
----------------------------------
--
--在上面的示例代码中，测试首先访问了一个页面，然后点击了一个按钮，接着等待 1 秒后点击了一个动态生成的元素。
总结
处理动态生成元素在 UI 自动化测试中是一个常见的问题，但是使用 Cypress 可以很容易地解决这个问题。需要注意的是，等待元素出现的时间应该根据实际情况进行调整，以确保测试的可靠性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6605f6bbd10417a2223d5f5b