Asserting request properties in Cypress - Test Execution Trace

Test Overview

This test checks that a network request is sent with the correct URL and HTTP method when a button is clicked. It verifies the request properties to ensure the app behaves as expected.

Test Code - Cypress

Cypress

describe('Request properties test', () => {
  it('should send a GET request to /api/data when button clicked', () => {
    cy.intercept('GET', '/api/data').as('getData');
    cy.visit('https://example.com');
    cy.get('#load-data-btn').click();
    cy.wait('@getData').its('request').then((req) => {
      expect(req.method).to.equal('GET');
      expect(req.url).to.include('/api/data');
    });
  });
});

Execution Trace - 4 Steps

Step	Action	System State	Assertion	Result
1	cy.intercept sets up a spy for GET requests to /api/data and aliases it as 'getData'	No page loaded yet, intercept ready to capture matching requests	-	PASS
2	cy.visit opens the page at https://example.com	Browser shows the example.com homepage with a button #load-data-btn visible	-	PASS
3	cy.get finds the button with id 'load-data-btn' and clicks it	Button clicked, triggering a network request to /api/data	-	PASS
4	cy.wait waits for the intercepted request '@getData' to complete	Request to /api/data captured by intercept	Verify request method is 'GET' and URL includes '/api/data'	PASS

Failure Scenario

Failing Condition: The request to /api/data is not sent or uses a different HTTP method

Execution Trace Quiz - 3 Questions

What does cy.intercept('GET', '/api/data').as('getData') do in the test?

A It clicks the button with id 'getData'

B It listens for GET requests to /api/data and names this intercept 'getData'

C It sends a GET request to /api/data immediately

D It waits for the page to load

Key Result

Always intercept and alias network requests before triggering actions that send them, so you can wait for and assert on the exact request properties.