Let’s understand what is XHR?
According to Wikipedia, XMLHttpRequest is an API in the form of an object whose methods transfer data between a web browser and a web server. The object is provided by the browser’s JavaScript environment. This is used with protocols other than HTTP. Also, data can be in the form of XML, JSON, HTML, or plain text.
Can we achieve XHR in selenium?
We can achieve by using a certain proxy server running. Grabbing in HAR file for retrieving the value. This can be achieved with the help of certain tools like BrowserMob-proxy. But it is hard to manually manipulate the HAR file.
How can we achieve XHR in Cypress?
This is building in the core of Cypress. Therefore, cypress makes it easy to test the life cycle of Ajax/XHR requests within the application. Cypress provides direct access to the objects and enables the use of assertions. Additionally, we can mock the requests and respond accordingly. Hence, some of the testing scenarios for assertions are:
- Assertion on a request body
- request’s URL
- request’s header
- response body
- response’s status code
- response’s header
- delaying response
- waiting for response
Details can be seen in the Network tab in the browser.
XHR response Header is as follows −
To make a request for XHR we have to use cypress method cy.request(). Also, to redirect the response the method used is cy.intercept(). Hence, we can use the following code.
Mocking the request with Cypress
Let’s see, how we can mock data? Mocking makes the faster running of the test cases.
Step 1: Installing Cypress.
Write the following command in VS code to install cypress
npm i –save-dev cypress
Now write the following command to open cypress
npx cypress open
Step 2: Now remove the example.js file from the integration folder and create one file named “testcase.js”.
Let’s write the code without mocking XHR requests.
Here in the code, there are two test cases written inside the method it(). The first test case checks that images are not returned and the text “No content found” is displayed on the application if Unsplash API does not return any available data. The second test case checks that the image gallery is rendered and returns 5 images. We all are aware that we can make 50 requests per hour to the API for the Unsplash API. The probability of the test cases failing if the limit is crossing. The test cases may pass or may not pass.
Now mocking with Cypress comes into the picture to rescue the above cases. Let us check how we can mock using Cypress, the same set of test cases.
The major concern is to render the images as expected. Write the following code to mock and to Unsplash.
Hence in the code, ‘cy.fixture(‘unsplash’) loads the mock data and saves on ‘cypress/fixture’ folder.
‘cy.server() this explains Cypress that we are creating a mock server and will intercept network calls.
Also we have written assertion to check the image description “Mocking of data is successful”. We can run the test case and check the result.
Finally, Mocking data with Cypress is easy and the above solution should work only work for XHR requests.
References
https://www.cypress.io/blog/2019/12/23/asserting-network-calls-from-cypress-tests/
