Cypress 是一个用于前端自动化测试的强大工具。它非常易于学习和使用，但某些情况下仍会遇到一些问题。其中一个常见的问题是在测试期间出现以下错误：
----- --- -------- ----- -------- --- ------- --- -- --- -------
该错误通常在获取或单击元素时出现，即 Cypress 无法找到或无法交互某个元素。
问题原因
此错误的常见原因是元素未完全加载或不在视图范围内。
Cypress 是一种异步测试工具，它将不断尝试执行你的测试，直到它们成功或超时。如果元素仍未加载或仍不在视图范围内，Cypress 将重试若干次，直到超时。
此错误表示，这个元素在超过指定时间的等待时间之后仍未出现在响应的页面上。
解决方法
等待元素加载
在开始交互之前，等待页面上的元素完全加载是解决此问题的最简单方法。在 Cypress 中，有几种方法可以等待元素加载：
cy.get()
使用 cy.get() 方法来获取元素，该方法会在元素出现在页面上之前重试，直到超时。
-------------------------------------------
cy.wait()
使用 cy.wait() 方法来等待所需元素出现。这对于与后端进行交互或在加载时执行一些操作的测试很有用。
-------------- -------------------------------------------
注：这里等待了 5000 毫秒，但最好在需要等待的时间上设置更合理的值。
滚动视图
元素在页面上但可能不在视图范围内，例如在下拉列表或表格中。这时，需要在交互之前在视图中先将其滚动到可见区域内。
在 Cypress 中，使用 .scrollIntoView() 方法来将元素滚动到视图范围内。
------------------------------------------------------------
重试左右策略
如果元素不在视图中（但已加载到 DOM 中），则可能需要等待元素在视图中出现。
使用 Cypress 默认的 “smart” 重试策略，它将在元素出现在视图中之前重试。该策略将检查元素是否位于页面上某个位置。
--------------------- - -------- ----- ------------------------
在此示例中，等待时间为 15 秒，以确保给定的元素在此期间出现。
但是，我们也可以使用其他重试策略。例如在重试期间使用 spinalTap 策略：
--------------------- - ------------------------- ----- ---------------------- ----- ------------------------ ----- ------------------ ----- -------------- ----- -------------- -- ------------------------
该策略将尝试在许多方面重试元素，包括网络和 WebSocket 失败，状态代码失败等。
用例演示
在下面的示例中，我们将测试登录到 GitHub 网站并查找某个仓库。
在这个过程中，我们将等待登录模态框出现，等待仓库页面完全加载，并确保搜索框出现在页面上并可以进行输入。
--------------- --- -------- -- -- -
-------- -- --- -------- --- - ------------ -- -- -
-------------------------------
-- ---- --- ----- --- ------ -- -- ------- --- ----- --
------------------------------------------------------------ -------------
-- ---- --- ----- ----- -- ------ --- ---- -- ----- -------
----------------------------------------------
----------------------------------------
-------------------------------------
---------------------------------------
-- ---- --- ----- ----- -- ---------
--------------------------------------------------
-- ------ --- --- ----------
------------------------------------------------------------------------------------
-- ---- --- --- ---------- ---- -- ---- --- ----- ---- -- -------- ---------
-------------------------- ------------
--------------------------- ---------------------- -----------
---
---在这个示例中，我们使用上述解决方法来确保 cypress 仓库页面被正确加载，搜索框可见并可以进行输入。
结论
当使用 Cypress 自动测试时，Timed out retrying after 30000ms: the element XXX is not visible 错误是常见的问题。但是，我们可以使用不同的解决方法，例如等待元素加载，滚动视图和使用不同的重试策略。
通过使用这些工具和策略，可以更轻松地编写稳健的 Cypress 测试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672db028eedcc8a97c85a4ea