Waiting for network requests

Right at the beginning of the existing test suite, there's room for improvement.

I'm referring to the following piece of code:

beforeEach(() => {
  cy.visit('/')

  cy.assertLoadingIsShownAndHidden()
  cy.contains('button', 'More').should('be.visible')
})

This code (sometimes) works, but it's not how a real user behaves when using a web application that performs searches. The user does not first wait for the Loading ... component to be visible, then not visible, and then for the pagination button to be visible.

If we put ourselves in the user's shoes, after visiting the application, we simply expect it to be ready to receive a new search. Nothing more.

With that in mind, it would be great if we could intercept the request the application makes to the Hacker News API, give it an alias, and then wait for that request to finish before moving on.

Luckily, we're using Cypress to write our tests. 🚀

Cypress offers a feature called cy.intercept() that can help us a lot. You define a route you want Cypress to intercept, provide an alias with .as('alias'), then perform an action that triggers the request, and finally, wait for it before proceeding, using the cy.wait('@alias') command.

Here is a complete example:

cy.intercept('GET', '**/search?query=React&page=0').as('getStories')
cy.visit('/') // This triggers the default search request defined above.
cy.wait('@getStories')

Commands overview 📖

cy.intercept()

Spies on (and optionally stubs) network requests that match a given route, so you can wait on them, assert on them, or control their behavior.

Syntax:

cy.intercept(url)
cy.intercept(method, url)
cy.intercept(routeMatcher)

Example:

cy.intercept('GET', '**/search?query=React&page=0')

.as()

Assigns an alias to an intercepted route (or to any subject), so you can refer to it later by a friendly name.

Syntax:

.as(aliasName)

Example:

cy.intercept('GET', '**/search?query=React&page=0').as('getStories')

👨‍🏫 A routeMatcher object gives you a more expressive way to match requests. For example:

cy.intercept({
  method: 'GET',
  pathname: '**/search',
  query: { query: 'React', page: '0' }
}).as('getStories')

cy.wait()

Waits for an aliased request to happen before continuing, making your tests deterministic instead of relying on visible/non-existent elements or arbitrary fixed waits.

Syntax:

cy.wait('@alias')

Example:

cy.wait('@getStories')

Suggested content 📚

• cy.intercept() - official documentation
• cy.wait() - official documentation
• How to wait for a request to finish before moving on with Cypress

Exercise 1 🎯

Refactor the first beforeEach block of the test suite so that, instead of waiting for elements to be visible or not, it waits for a GET request to **/search?query=React&page=0 before moving on.

Exercise 2 🎯

Refactor the beforeEach block once more so it waits for a GET request to the pathname **/search, passing the query and page values as properties of the query object accepted by cy.intercept() (see the instructor note above).

Exercise 3 🎯

In the following tests, GET requests are also made to the Hacker News API.

Refactor them using one of the approaches above, so we test the application as close as possible to how real users interact with it:

• shows 20 stories, then the next 20 after clicking "More"
• types and hits ENTER
• types and clicks the submit button
• searches via the last searched term
• shows a max of 5 buttons for the last searched terms

👨‍🏫 When you're done, run the tests (with npm test, or with the Cypress App by running npm run cy:open) and make sure they all pass before moving on.

Show the world what you learned 🌎

To show your professional network what you learned in this lesson, post the following on LinkedIn.

I am taking the "Cypress Interception" course by @Walmyr Lima e Silva Filho at the @Talking About Testing school, where I learned how to intercept and wait for network requests to make my tests more reliable and closer to real user behavior. #TalkingAboutTesting #TATSchool #CypressInterception #Cypress

👨‍🏫 Remember to tag me in your post. Here is my LinkedIn profile.