Cypress 测试中如何进行 Request 拦截-JavaScript中文网-JavaScript教程资源分享门户

Cypress 是一款流行的前端测试框架，可以帮助我们自动化运行浏览器测试并简化测试工作。在测试过程中，对于数据请求的拦截和模拟是非常重要的。本篇文章将深入探讨如何在 Cypress 中进行 Request 拦截，并且提供一些实用的示例代码。

Request 拦截基础

简单来说，Request 拦截就是我们通过代码截获浏览器发送的请求，并可以对这些请求进行修改或模拟返回。这样，我们就可以在自动化测试中模拟各种测试场景，如模拟某些服务器返回错误信息的情况等等。

在 Cypress 中有两种方式进行 Request 拦截，分别是 cy.intercept() 和 cy.route()。具体来说，cy.intercept() 是 Cypress 4.x 之后版本新增的 API ，主要适合后台请求拦截。而 cy.route() 是 Cypress 3.x 版本中存在的 API，主要用于前端静态文件请求拦截。

使用 cy.intercept() 进行 Request 拦截

cy.intercept() 是 Cypress 4.x 版本新增的 API ，需要注意的是仅在 Cypress >= 4.0 的版本中才能使用。下面是一段使用 cy.intercept() 进行 Request 拦截的示例代码：

// javascriptcn.com 代码示例
it('Intercepts a request', () => {
  cy.intercept('GET', '/todos', (req) => {
    req.reply([{
      id: 1,
      title: 'Learn Cypress',
      completed: false
    }])
  })
  cy.visit('/todos')
  cy.get('.todo-list li').should('have.length', 1)
})

上述示例中，我们使用 cy.intercept() 拦截了发送到 /todos 路径的 GET 请求，回复了一个列表数据，让测试场景看起来像是与后端服务器交互获取数据的过程。最后，我们通过 cy.get('.todo-list li') 指令来检查返回列表的长度是否为 1。

需要注意的是，Cypress 会默认先检查是否存在检查过程中发生的错误，如果存在错误就会直接退出测试。因此，在上述示例中，当向 /todos 路径发送 GET 请求时获取到的是一个空数组，因此 cy.get() 指令会抛出 timed out waiting for 1 li 的异常。在使用 cy.intercept() 进行 Request 拦截时，需要特别注意返回数据的格式和类型。

另外，如果需要细致一些的 Request 拦截操作，可以进行更高阶的控制，下面是一个更加复杂的示例：

// javascriptcn.com 代码示例
it('Intercepts using a route alias', () => {
  cy.intercept('/todos', (req) => {
    req.alias = 'todos'
  })
  cy.visit('/todos');
  cy.wait('@todos').then((todos) => {
    expect(todos.response.body).to.include({
      id: 1,
      title: 'Learn Cypress',
      completed: false
    })
  })
})

在这个示例中，我们先使用 cy.intercept() 拦截发送到 /todos 路径的请求，并且把这个请求命名为 todos。之后，在调用 cy.wait() 时，我们使用了 @todos 的别名来等待异步请求完成，然后在异步请求返回时进行检查并校验数据的正确性。

使用 cy.route() 进行 Request 拦截

和 cy.intercept() 相比，在 Cypress 3.x 版本中则可以使用 cy.route() 进行前端文件请求的拦截。和 cy.intercept() 类似，通过 cy.route() 我们可以在测试中模拟各种场景下的 Request 拦截，进而方便地进行测试。

下面是一个使用 cy.route() 进行前端文件请求拦截的示例代码：

// javascriptcn.com 代码示例
it('Intercepts requests to wikipedia', () => {
  cy.server()
  cy.route({
    method: 'GET',
    url: 'https://*.wikipedia.org/**',
    response: 'fixture:wikipedia.html'
  }).as('getWiki')

  cy.visit('https://en.wikipedia.org/wiki/Wikipedia')
  cy.wait('@getWiki')
  cy.get('.logo').should('be.visible')
})

在上述示例中，我们首先通过 cy.server() 启用了 Cypress 中的静态请求服务器，然后通过 cy.route() 配置了拦截条件和需要回复的数据。在访问 https://en.wikipedia.org/wiki/Wikipedia 时，就会拦截发送到 https://*.wikipedia.org/** 的 GET 请求，并返回通过 fixture:wikipedia.html 引入的前端文件数据。最后，我们通过 .as() 分配别名 getWiki，并在之后的异步请求中使用 @getWiki 来等待拦截请求的完成。

需要注意的是，Cypress 中的请求拦截并不仅限于 GET 请求，而且可以支持多种请求类型，包括 POST、PUT、DELETE 等等。

总结

在本篇文章中，我们学习了在 Cypress 测试中进行 Request 拦截的方法，包括使用 cy.intercept() 和 cy.route() 进行 HTTP/HTTPS 请求的拦截以及模拟返回行为。同时，我们还分析了具体的示例代码并给出了在测试场景中需要注意的细节。

通过 Request 拦截技术，我们可以在自动化测试中模拟对于数据请求较为复杂和出错的情况的测试，让我们的测试更加全面和完备。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f88d27f6b2d6eab3086e63