Cypress系列(69) - route() 命令详解

Cypress 是一个通过模拟真实浏览器环境来进行端到端测试的 JavaScript 测试框架。在测试中，我们经常需要模拟请求和响应。这时就需要使用 Cypress 的 route() 命令。

什么是 route() 命令？

route() 命令是 Cypress 的一个命令，用于截获浏览器网络请求并返回自定义响应。它会初始化一个带有一个 URL 处理器的 Selenium WebDriver 的 Stub，并在 Stub 中注册一个监听器以筛选从浏览器发出的 HTTP 请求。

route() 命令可以被用于拦截请求，提供自定义响应或修改请求的状态或头信息。它可以用于相关特定场景的定制化需求，例如：

• 测试特定的错误情况
• 模拟服务器上的状态
• 减少测试运行的变化

如何使用 route() 命令？

要使用 route() 命令，需要在 Cypress 脚本中引入该命令，然后调用 cy.route() 方法以配置URL 和 响应。

以下是一个基本的示例：

cy.route({
  method: 'GET',
  url: 'https://jsonplaceholder.cypress.io/comments/*',
  response: [{
    "postId": 1,
    "id": 1,
    "name": "id labore ex et quam laborum",
    "email": "[e-mail]",
    "body": "laudantiu modus invenit quare thopius larvatus"
  }]
}).as('getComment')

cy.visit('https://jsonplaceholder.cypress.io/comments')
cy.wait('@getComment')

这个示例中：

• 路由被设置来拦截 GET 请求到 https://jsonplaceholder.cypress.io/comments/*。
• 路由配置对象中包含：REQUEST方法，URL 必须匹配的 URL，响应的 RESPONSE。

如何使用 route() 命令来测试错误情况？

使用 route() 命令，可以测试某些特定的错误情况，例如服务器上的错误响应。以下示例展示了如何测试错误情况：

cy.route({
  method: 'POST',
  url: 'https://jsonplaceholder.cypress.io/comments',
  status: 400,
  response: {}
}).as('postComment')

cy.get('#submit').click()
cy.wait('@postComment')
cy.get('#error').should('be.visible')

这个示例中：

• 路由被设置来拦截 POST 请求到 https://jsonplaceholder.cypress.io/comments。
• 对错误状态码为 400 的请求进行拦截。
• 将 response 设置为空对象。
• 等待路由请求。
• 检查错误信息是否显示出来。

总结

route() 命令是 Cypress 提供的重要功能，在测试过程中非常有用。通过使用 route() 命令，可以定制自己的测试需求，例如截获请求、模拟响应，或者测试错误情况。这些功能可以使得 Cypress 测试更加灵活、可靠和高效。