Asserting request properties in Cypress - Build an Automation Script

Verify HTTP request properties on form submission

Preconditions (3)

Step 1: Enter 'Alice' in the name field

Step 2: Enter '[e-mail]' in the email field

Step 3: Enter 'Hello, this is a test message.' in the message field

Step 4: Click the submit button with id 'submit-btn'

Step 5: Intercept the POST request to '/api/contact'

Step 6: Assert that the request method is POST

Step 7: Assert that the request body contains the entered name, email, and message

Step 8: Assert that the request headers include 'Content-Type' with value 'application/json'

✅ Expected Result: The POST request to '/api/contact' is sent with correct method, headers, and body matching the form inputs

Automation Requirements - Cypress

Assertions Needed:

Request method is POST

Request body contains correct form data

Request headers include 'Content-Type: application/json'

Best Practices:

Use cy.intercept() to spy on network requests

Use aliases for intercepted requests

Use cy.wait() to wait for the request to complete before assertions

Avoid hardcoding selectors; use IDs or data attributes

Keep assertions clear and focused

Automated Solution

Cypress

describe('Contact form request properties test', () => {
  it('should send correct POST request on form submission', () => {
    cy.visit('/contact');

    cy.intercept('POST', '/api/contact').as('postContact');

    cy.get('#name').type('Alice');
    cy.get('#email').type('[e-mail]');
    cy.get('#message').type('Hello, this is a test message.');

    cy.get('#submit-btn').click();

    cy.wait('@postContact').then(({ request }) => {
      expect(request.method).to.equal('POST');
      expect(request.headers['content-type']).to.include('application/json');
      expect(request.body).to.deep.equal({
        name: 'Alice',
        email: '[e-mail]',
        message: 'Hello, this is a test message.'
      });
    });
  });
});

This test visits the contact form page first.

It uses cy.intercept() to watch for POST requests to /api/contact and gives it an alias @postContact.

Then it fills the form fields using their IDs and clicks the submit button.

After clicking, it waits for the intercepted request to happen with cy.wait().

Inside the wait callback, it asserts the request method is POST, the content-type header includes 'application/json', and the request body exactly matches the form data entered.

This ensures the form sends the correct request with expected properties.

Common Mistakes - 4 Pitfalls

Not using cy.intercept() and trying to assert request properties directly

Using hardcoded XPath selectors or brittle selectors instead of stable IDs

Not waiting for the intercepted request before asserting

Checking request headers with exact string match instead of includes

Bonus Challenge

Now add data-driven testing with 3 different sets of form inputs to verify request properties for each

Show Hint