在前端自动化测试中，很多场景需要模拟 AJAX 请求并对其进行拦截和控制，比如测试一个登录页面，在输入用户名和密码后，需要发送一个 AJAX 请求到后端进行验证，此时我们需要在测试中模拟这个 AJAX 请求并对其进行拦截和控制，以保证测试的稳定性和可靠性。Cypress 是一个流行的前端自动化测试工具，它提供了丰富的 API 和功能，可以方便地实现 AJAX 拦截和控制。
Cypress 的网络代理
在 Cypress 中，我们可以使用 cy.intercept() API 来拦截和控制网络请求。这个 API 接收一个 URL 参数，用来匹配请求的 URL，还可以使用其它参数来控制请求的响应。在使用 cy.intercept() API 之前，我们需要先了解 Cypress 的网络代理机制。
Cypress 在启动测试时会创建一个本地的网络代理服务器，所有的网络请求都会经过这个代理服务器。我们可以通过 cy.server() 和 cy.route() API 来控制这个代理服务器的行为。cy.server() API 用来启动代理服务器，cy.route() API 用来定义请求和响应的规则。例如，下面的代码片段定义了一个路由规则，用来拦截所有以 /api/ 开头的请求，并返回一个固定的响应：
cy.server()
cy.route('/api/*').as('api')
cy.visit('/login')
cy.wait('@api').its('response.body').should('eq', { success: true })在上面的代码中，我们使用了 cy.server() API 启动了代理服务器，并使用 cy.route() API 定义了一个路由规则，用来拦截所有以 /api/ 开头的请求，并将其命名为 api。然后我们访问了登录页面，等待 api 路由被触发，然后断言响应的内容是否为 { success: true }。
拦截和控制 AJAX 请求
在了解了 Cypress 的网络代理机制后，我们就可以使用 cy.intercept() API 来拦截和控制 AJAX 请求了。下面是一个例子，用来测试一个登录页面：
-- -------------------- ---- -------
----------------- -- -- -
------------- -- -
-------------------------- ----- -- -
--------------- -- -
---------- -------- ---- --
--
--------------
------------------
--
---------- ----- -------------- -- -- -
---------------------------------------
----------------------------------------
-----------------------
-----------------
--------------------- --------------------------------
--
--在这个例子中，我们使用 cy.intercept() API 拦截了 /api/login 请求，并在请求被触发时返回一个固定的响应 { success: true }。然后我们访问了登录页面，输入用户名和密码，提交表单，等待 login 路由被触发，然后断言页面的 URL 是否为 https://example.com/dashboard。
在实际的测试中，我们可能需要根据不同的测试场景来动态地控制请求的响应。下面是一个例子，用来测试一个搜索页面：
-- -------------------- ---- -------
------------------ -- -- -
------------- -- -
--------------------------- ----- -- -
----- ----- - -----------
-- ------ --- -------- -
--------------- -- -
---------- -------- --------- ------ ----- --
--
- ---- -- ------ --- --------- -
--------------- -- -
---------- -------- ---------- ------- ------- --
--
- ---- -
--------------- -- -
-------------------
--
-
---------------
-------------------
--
---------- ---- ------ ------- --- ------- -- -- -
--------------------------------
-----------------------
------------------
--------------------------------------- --
--
---------- ---- ------ ------- --- -------- -- -- -
---------------------------------
-----------------------
------------------
--------------------------------------- --
--
---------- ---- ----- ------- --- ------- ------- -- -- -
---------------------------------
-----------------------
------------------
-------------------------------------
--
--在这个例子中，我们使用 cy.intercept() API 拦截了 /api/search 请求，并根据查询参数动态地控制请求的响应。如果查询参数为 apple，则返回一个包含两个结果的响应 { results: ['apple', 'apple pie'] }；如果查询参数为 banana，则返回一个包含两个结果的响应 { results: ['banana', 'banana bread'] }；否则返回一个 404 响应。然后我们访问了搜索页面，输入不同的查询参数，提交表单，等待 search 路由被触发，然后断言页面是否显示了正确的结果。
总结
在前端自动化测试中，模拟 AJAX 请求并对其进行拦截和控制是非常重要的。Cypress 提供了丰富的 API 和功能，可以方便地实现 AJAX 拦截和控制。在实际的测试中，我们需要根据不同的测试场景动态地控制请求的响应，以保证测试的稳定性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66029dabd10417a222e6ed15