Cypress - Working with XHR

XHR is XML HTTP Request. It is an Application Programming Interface (API) which is available as an object, whose methods send data between a web browser and server. An object in XHR can request data from a server in the form of a response.

Cypress can not only be used for front end automation, but also can control the network traffic by directly accessing the XHR objects. Then, it applies the assertions on the objects.It can mock or stub a response. An XHR details can be seen in the Network tab in the browser.

XHR response Header is as follows −

XHR Response Header

The response is as follows −

Response

To make an XHR request, the cy.request() command is used. The method cy.intercept() is used to redirect the responses to the matching requests.

Implementation of XHR request

Given below is the command to explain the implementation of XHR request in Cypress −

cy.request('https://jsonplaceholder.cypress.io/comments').as('c')
//aliasing request
cy.get('@c').should((response) => {
   expect(response.body).to.have.length(100)
   expect(response).to.have.property('headers')
})
Advertisements