Cypress Training Advent Lesson Day 8

Match network calls using a request header 🧢

One of my favorite tricks for testing sites that make GraphQL calls is to match network calls using a custom request header. Can you do it? I have set up the lesson “Spec 19: Intercept a specific request by matching the header” as an exercise.

it('matches the request using a header', () => {
  // intercept any request with the request header "x-requesting: fruit"
  // visit the page and confirm the network call was made
  // tip: https://on.cypress.io/intercept allows 
  // using request header(s)
  // note: matching by the response header is not 
  // supported in Cypress v9
})

The test matches the network request by one of its headers

Unfortunately, Cypress does not allow matching network requests by the request body or its part, follow issue #8560 for updates.

A couple of blog posts

I have recently written a couple of blog posts that will teach you new tricks:

• Test A Slow-Loading jQuery Plugin

• Skip Before Each Hook

Previous lessons

Lessons marked with 📡 are from the Cypress Network Testing Exercises course. Lessons marked with 🔌 are from the Cypress Plugins course.

• Day 1: 📡 “Spec 08: Import the JSON fixture directly into the spec”

• Day 2: 📡 “Spec 14: Reloads the page until it sees the word Bananas"Cypress

• Day 3: 🔌 “Lesson a3: Log the messages from the test to the terminal“

• Day 4: 📡 “Spec 04: The application is showing the loading element“

• Day 5: 📡 “Spec 11: Test how the application makes a network request every minute”

• Day 6: 🔌 “Lesson a7: Re-run the tests when the source files change with cypress-watch-and-reload plugin“

• Day 7: 📡 “Spec 16: Get the fruits from the test using the cy.request command“