Cypress 是一个流行的前端自动化测试框架，可以用于编写功能测试、端到端测试等自动化测试。对于一些需要调用外部 API 的测试用例，我们可能需要设置代理来模拟生产环境中的请求，或者进行接口拦截和修改。那么在 Cypress 中如何设置代理呢？本文将详细介绍 Cypress 中如何进行代理设置，并提供示例代码。
准备工作
在开始之前，需要先安装 Cypress，并确保项目具有以下文件：
cypress.json：Cypress 配置文件。cypress/plugins/index.js：Cypress 插件脚本文件。
此外，还需要了解一些基本的代理知识，如何使用代理来拦截和修改请求，以及如何配置代理的地址和端口等。
Cypress 中的代理设置
Cypress 通过配置文件 cypress.json 来实现代理设置。在 cypress.json 文件中添加以下配置：
-- -------------------- ---- -------
-
---------- ------------------------
------ -
---------- ------------------------
--
-------------- -
--------- -----------------------
--
-------------------- -----
-其中，baseUrl 表示测试使用的基本地址；env 表示测试环境使用的变量；proxyServer 表示配置的代理服务器；chromeWebSecurity 表示是否禁用浏览器的同源策略。
在 proxyServer 中，可以配置以下参数：
target：代理服务器的地址和端口，可以是 IP 或域名。proxyAuth：代理服务器的身份验证信息，支持basic和ntlm认证。proxyHeaders：代理服务器需要增加或修改的请求头信息。onProxyRes：在代理服务器返回响应后，对响应进行修改或处理。onProxyReq：在代理服务器发出请求前，对请求进行修改或处理。
在 cypress/plugins/index.js 中添加以下代码：
-- -------------------- ---- -------
----- ----- - --------------------------------
-------------- - ---- ------- -- -
----- ------ - -
------- --------------------------
------------- -----
----------- ---------- -- -
-- ------ ----- --------
------ --------
--
----------- ---------- -- -
-- ------ ----- -------
------ --------
--
-
--------------------------- -------- - --- -------------- -- -
-- ------- --- --- -------- ----
--------------------------------------------------------------------- - ----
-- ---- --- ----- ------------- -- --- ------ --------
----------------------------------------------------------------------
------ -------------
--
---------------------- --------- -- -
-- --- --------------------- -- ------ --------
----- - - ------------- --------------- ----------------
------------------ - -
-------- --------
-
------ -------
--
-其中，http-proxy-middleware 是一个常用的 Node.js 代理服务器中间件，可以帮助我们简化代理服务器的配置工作。在插件脚本中，使用 http-proxy-middleware 来创建代理服务器，并通过 before:browser:launch 事件来禁用浏览器的同源策略，并将代理配置传递给 Chrome 实例；通过 dev-server:start 事件来将代理服务器添加到 Cypress 的本地服务器中。
示例代码
下面是一个简单的示例，演示了如何使用 Cypress 进行代理设置。
-- -------------------- ---- -------
-------------- --- ---- ------- -- -- -
------------- -- -
-- --- -- --- ----- -------------
------------- -
----------------- -
------ ---------
-- --------------- --- ------ ------- ------
----------
----- --- - --- ------------------------------------------
----- ---- - --
-- --- --- ------ ------- ------ -- ---- - ------- --- --- ----- ------
--------- - ----------------- -----
--
-
--
--
---------- --- ----- ------- ------- -- -- -
-------------------------------------------
-- ---- ---- --- ------- --- ---- ---- ------- --- -----
---------------------------------------- ---------
--
--在这个示例中，我们使用了 onBeforeLoad 事件来修改 Cypress 的初始加载行为，删除了全局的 fetch 方法，并通过 eval 方法重新定义了一个 fetch 方法，用于发送请求。通过这种方式，我们可以在测试中以更灵活且精确的方式控制代理的使用逻辑。
结论
在 Cypress 中设置代理并不难，我们只需要在配置文件中添加相应的配置，然后通过插件脚本来创建代理服务器，并将代理配置传递给浏览器实例即可。当然，对于具体的业务场景和需求，还需要根据实际情况进行一些细节的调整和修改。希望本文对大家能够有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b30f9d91dce0dc888446c