Tutorial 19 – Handle 503 status code error in cypress
When we launch some of the applications, we might get ‘service unavailable’ error or 503 response code. As you can read below, this error comes when the server is not ready to handle the request.
To understand this, open a new browser and launch https://app.hubspot.com/login
The below page gets displayed for around 5 seconds. This is basically the 503 error from the server that we are talking about
After 5 seconds or so, the application’s login page comes up, see below
So, this website/application takes around 5 seconds before it displays the login page. So cypress immediately throws an error in such a case.
Let us practically see that. Below is a spec file that launches the hubspot url
Open the Test runner by executing below command
Select Electron browser from dropdown
Click the above Test to execute it.
When you run the Test, cypress tries to launch the url & immediately it gives CypressError. The response from web server is 503 error.
To solve this problem, we can take help from the following message that is part of above cypress error:
So let’s just copy this option
Put a comma and flower braces in the cy.visit command, see below
Paste the option inside brackets
Save the script.
Now cypress is ignoring the 503 error (in the background), there is no error now, the application stars loading, see below
After 5 seconds, the login page comes up and the Test is pass, see below
So this is how we handle the status code errors.
Close the above window & terminate the Test runner window.
For reference purpose, you can launch below url to see the ‘visit’ method:
https://docs.cypress.io/api/commands/visit.html#Syntax
See below, you can see the ‘options’ as one of the arguments (that we have used above to solve the 503 issue)
If you further scroll down the page, you can see various options, one of them being ‘failOnStatusCode’ which is ‘True’ by default. Here ‘True’ means that the Test will fail for response codes other than 2xx and 3xx. So, in our case we were getting 5xx response code and hence the Test was failing. To resolve this issue, we changed the default to ‘false’
We will now execute the same spec file from our terminal. To do that, let us first right click the spec file and copy it’s relative path
We will run the below command from terminal:
node_modules\.bin\cypress run --spec cypress\integration\examples\Handle503error.spec.js --headed --no-exit --browser=electron
See below
Hit Enter
We again see the same result and the Test gets Passed
Thank you for reading!