 Resources from Filip Hric in 2022

Your app can react in various way on different network conditions. Cypress has a great toolset for setting up those conditions, which enable you to test your app thoroughly. That way you can ship your app with confidence.

Cypress’ .intercept() command is one of the most fun command to use. And it’s also one of the most useful.

Especially when you are done with all your happy paths and want to increase your test coverage with some edge cases.

These edge cases can mean different data, headers or server behavior. You can modify all of these, dynamically or with a static fixture prepared beforehand

Fast, easy and reliable testing for anything that runs in a browser.

cypress

Test network edge cases with cy.intercept() command in Cypress

When you don’t want to stub your response or create your data before the test, you can change the request your application makes altogether. If your server recognizes different queries, you can modify your request‘s URL and add a query that will specify what kind of data you want to get.

Dynamically Add Queries in Cypress Intercept Function Requests

You can simulate a network condition, where an http request does not make it to server. When that happens, you want to make sure the app is showing the user a correct message. By passing `forceNetworkError` attribute, you’ll be able to simulate such network conditions and see how application behaves under given circumstances.

Simulate a network error using .intercept() command

Server may respond differently when providing a response to a logged in user. Usually, a user is identified when an authorization header is sent with the request. With .intercept(), we can dynamically add a header to a request and skip the login process. Server will provide the same response as it would when a user would go through login process.

Send Network Requests with Authorization Headers in an Intercepted Request with Cypress

With .intercept() command, we can change the response body. This enables us to provide our own response instead of the real one coming from server. We can then test our application’s behavior under different situations and test different edge cases.

Change a Response Body with cy.intercept to Provide Your Own Data in an API Call

Frontend application can react differently to various server responses. One way to test the application behavior is to change response status code. .intercept() command in Cypress has the ability to stub the status code and error message that the server would provide on error.

Stub an API Request Status Code and Error Message with cy.intercept

When user waits too long, we might want to give them an option to reload page and try again. This is usually a hard case to reach and test effectively. But the .intercept() command provides us with a `throttleKbps` option that can limit the bandwidth, or we can use `delay` option that will delay our response for a given time.

Test Slow Network Conditions in Cypress by Throttling and Delaying Intercepted Requests

Servers sometimes use entity tags that identify a user and provide them with a cached response if needed. This can create ambiguity in your tests. To make your tests more stable, you can modify the request headers that take care of this caching. By deleting `if-none-match` header with `.intercept()` command, you will get a fresh response from server every time.

Prevent Response Caching in Cypress by Deleting 'if-none-match' Request Header

When a static response is not enough, we can take the real data from server and modify it to our liking. This saves a ton of time, because we don’t need to create the data ourselves. Instead, we can take e.g. response body and change only a desired attribute. This gives us one more advantage, because we can first make assertions on real data, and only then make changes. This is a great advantage compared to providing a static response, that essentially creates a blind spot for any API changes.

Dynamically Combine Real and Mocked Response Body Data in Cypress

When testing certain user stories, you may want to start with a clean state, but then return to the initial page and see the data you have created. This can be problematic if you are stubbing your requests. Luckily, you can limit how many times you a request should be intercepted.

Configure cy.intercept to Only Intercept a Network Request Once 

Instead of explicitly providing the exact body, you can choose to save the data you want to use in a separate file. When you create a file in the fixtures folder, you can reference it using `fixture` option in the .intercept() command. This will automatically look into the fixtures folder and load the data from the file.

Filip Hric