能否在Cypress的cy.route函数中读取并断言响应？求代码实现

Absolutely—you can definitely read and run assertions against XHR responses using cy.route() in Cypress. Let me walk you through the exact workflow with concrete code examples, since that’s the easiest way to grasp it.

Core Workflow #

The process boils down to four simple steps:

1. Define your target route with cy.route() and assign it an alias using .as().
2. Trigger the XHR request (e.g., by clicking a button, submitting a form, or reloading the page).
3. Wait for the request to complete using cy.wait() with your route’s alias.
4. Extract the response object from the waited request and run your desired assertions.

Example: Asserting a GET Request #

Let’s say you have a button that fetches a list of users from /api/users when clicked. Here’s how to capture and validate its response:

// 1. Define the route and alias it
cy.route('GET', '/api/users').as('fetchUsers')

// 2. Trigger the request by clicking the button
cy.get('#load-users-btn').click()

// 3. Wait for the request to finish, then access the response
cy.wait('@fetchUsers').then((xhr) => {
  // 4. Run your assertions
  // Check the request succeeded with a 200 status code
  expect(xhr.status).to.equal(200)
  
  // Verify the response body is an array with at least one user
  expect(xhr.responseBody).to.be.an('array')
  expect(xhr.responseBody.length).to.be.greaterThan(0)
  
  // Assert specific properties of the first user
  expect(xhr.responseBody[0]).to.have.property('id')
  expect(xhr.responseBody[0].fullName).to.include('Smith')
})

Example: Asserting a POST Request #

If you’re testing a form that submits data via POST (e.g., creating a new user), the process is nearly identical—you just adjust the HTTP method and can even validate the request body:

// 1. Define the POST route and alias it
cy.route('POST', '/api/users').as('createUser')

// 2. Fill out and submit the form
cy.get('#user-name').type('Alice Johnson')
cy.get('#submit-form').click()

// 3. Wait for the request to complete
cy.wait('@createUser').then((xhr) => {
  // 4. Assert the request succeeded (201 = Created)
  expect(xhr.status).to.equal(201)
  
  // Validate the response returns the new user data
  expect(xhr.responseBody.fullName).to.equal('Alice Johnson')
  expect(xhr.responseBody).to.have.property('id')
  
  // Optional: Check that the correct data was sent in the request
  expect(xhr.requestBody).to.deep.equal({
    fullName: 'Alice Johnson'
  })
})

Quick Pro Tips #

• If you need to wait for multiple requests to the same endpoint, you can pass a timeout to cy.wait() (e.g., cy.wait('@fetchUsers', { timeout: 10000 })) or wait for multiple aliases at once: cy.wait(['@fetchUsers', '@fetchPosts']).
• All of Cypress’s built-in chai assertions work here, so you can write as simple or complex checks as you need.
• Note: If you’re using Cypress 10 or later, cy.route() is deprecated in favor of cy.intercept() (which offers more flexibility), but the above approach works perfectly for older versions.

内容的提问来源于stack exchange，提问作者Akshay Vijay Jain