Simulate a network error using .intercept() command

Filip Hric
InstructorFilip Hric

Share this video with your friends

Send Tweet
Published 3 months ago
Updated 3 months ago

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.

Instructor: [0:00] When we open our application, the list of the boards is loaded through this HTTP request. To match this request, we can create a new intercept and define the method and then the URL of that request. When I Save my test file, I can see the list of matched roots inside the Cypress Runner.

[0:28] We don't have an alias for our request, so let's add one. I'm going to type a new command, .as(), which stands for alias, and then name the request Boards. I can now see the alias inside the Cyprus Runner.

[0:44] The first argument of our intercept command defines which request we want to match. We can add a second argument. This one will define how we want to handle that request. I can pass a force network error to be true. When I now Save my test, I can see how my application behaves when there is a network error.

[1:08] This enables me to check if this message actually appears. I can open the Selector Playground, find the proper selector, copy it and paste that to my code. Now, all that's missing is an assertion, so let me add one. I want to make sure that the element is visible. When I Save the test, you can see it's passing.