前言
Cypress 是现代化的前端端对端测试框架，具有易用性和高度可维护性等优点。但在实际使用过程中，我们可能会面临被测试应用中的 DOM 元素拦截导致 Cypress 无法正确执行测试的问题。这篇文章将介绍如何使用 Cypress 提供的命令和插件解决这样的问题。
问题描述
当我们在进行页面跳转时，例如点击一个链接、按下回车键等操作，测试通常会停留在当前页面，无法继续进行。这是由于 Cypress 的命令被浏览器自带的单击事件覆盖，浏览器默认情况下会在新窗口或页面中打开链接，导致 Cypress 等待页面加载但无法通过 DOM 标识检测到加载状态。这样就会导致 Cypress 测试套件在该点上停止执行。
下面我们通过一个简单的示例来说明这个问题：
-- -------------------- ---- -------
------
-- -----------------------------------------
--------
----- ---- - ----------------------------
------------ - --------------- -
-----------------------
----------------- -----------
--
---------
-------以上代码实现了监听 a 元素的点击事件，并在控制台输出消息，而阻止了默认行为跳转到 https://www.google.com/。
现在我们创建一个 Cypress 测试用例，点击该链接，期望可以看到控制台输出 "Link clicked."：
-- -------------------- ---- -------
--------------- ---- ------ -- -- -
---------- --- ------ ------ -- -- -
--------------
-----------
--------
-------- -- -
----------------- -----------
---
---
---但是我们会发现 Cypress 始终等待页面加载，无法执行 then 的回调函数。
解决方案
Cypress 提供了一系列的命令和插件来解决页面跳转问题，其中包括了 cy.visit() 命令、cypress-wait-until 插件以及 cy.request() 命令等。
使用 cy.visit() 命令
在 Cypress 中使用 cy.visit() 命令可以在测试过程中导航到指定的页面。当我们通过该命令导航到新页面时，Cypress 会在新页面完全加载后才继续执行测试。
我们可以把测试用例改为：
-- -------------------- ---- -------
--------------- ---- ------ -- -- -
---------- --- ------ ------ -- -- -
--------------
-----------
-------- ------ ---- --
-------- -- -
----------------- -----------
---
---
---在该测试用例中，我们传递了一个选项 force: true，该选项强制 Cypress 点击链接，即使浏览器点击事件被覆盖。
使用 cypress-wait-until 插件
cypress-wait-until 是一个第三方的 Cypress 插件。使用该插件，我们可以等待指定条件满足后再进行下一步操作。对于我们的场景来说，当我们点击链接后需要等待被跳转的页面完成加载后才能继续测试，因此使用该插件可以方便地解决该问题。
我们可以安装 cypress-wait-until：
npm install -D cypress-wait-until
并在 cypress/support/index.js 文件中导入插件：
import 'cypress-wait-until';
然后，我们就可以在测试用例中使用 waitUntil() 命令来等待条件满足后继续执行测试：
-- -------------------- ---- -------
--------------- ---- ------ -- -- -
---------- --- ------ ------ -- -- -
--------------
-----------
-------- ------ ---- ---
--------------- -- -
------ ----------------- -- --- --- --------------------------
---------- -- -
----------------- -----------
---
---
---在该测试用例中，我们使用 cy.waitUntil() 命令等待浏览器更新 URL，当 URL 不再是 http://localhost:8080/ 时，继续执行下一步操作。
使用 cy.request() 命令
最后，我们可以使用 cy.request() 命令来验证 URL 是否被更新。该命令可以向服务端发送请求，并获取响应数据。我们可以在测试用例执行 click 操作后，使用该命令验证 URL。
-- -------------------- ---- -------
--------------- ---- ------ -- -- -
---------- --- ------ ------ -- -- -
--------------
-----------
-------- ------ ---- ---
----------------- --------------------------
-------------- -- -
-----------------------------------
----------------- -----------
---
---
---在该测试用例中，我们向服务端发送了一个 GET 请求，验证响应状态码是否为 200。如果响应状态码为 200，我们就可以断言跳转已经完成，然后继续执行测试。
结论
无论是使用 cy.visit() 命令、cypress-wait-until 插件还是cy.request() 命令，我们都可以解决在 Cypress 测试框架中遇到的跳转问题。只要我们正确使用合适的工具和技术，我们就可以更轻松地编写出高质量的端对端测试用例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6703347ed91dce0dc84a53aa