Asserting request properties in Cypress

Introduction

We check request properties to make sure our app sends the right data to the server. This helps catch mistakes early.

When testing if a form sends the correct data after submission.

When verifying that API calls include the right headers or parameters.

When checking if a button click triggers the expected network request.

When ensuring sensitive data is not sent in requests by mistake.

Syntax

Cypress

cy.intercept('METHOD', 'URL', (req) => {
  expect(req.body.property).to.equal('expectedValue')
})

Use cy.intercept to watch network requests.

Inside the callback, use expect to check request details.

Examples

This checks that the login request sends the username 'user123'.

Cypress

cy.intercept('POST', '/api/login', (req) => {
  expect(req.body.username).to.equal('user123')
})

This verifies the request has an authorization header.

Cypress

cy.intercept('GET', '/api/data', (req) => {
  expect(req.headers).to.have.property('authorization')
})

This confirms the HTTP method is PUT for user update requests.

Cypress

cy.intercept('PUT', '/api/user/*', (req) => {
  expect(req.method).to.equal('PUT')
})

Sample Program

This test watches the POST request to '/api/submit'. It checks that the request body has the name 'Alice' and that age is a number. The test fills a form and submits it to trigger the request.

Cypress

describe('Test request properties', () => {
  it('checks POST request body', () => {
    cy.intercept('POST', '/api/submit', (req) => {
      expect(req.body.name).to.equal('Alice')
      expect(req.body.age).to.be.a('number')
    }).as('submitRequest')

    cy.visit('/form')
    cy.get('input[name="name"]').type('Alice')
    cy.get('input[name="age"]').type('30')
    cy.get('form').submit()

    cy.wait('@submitRequest')
  })
})

Important Notes

Always give your intercepts an alias with .as() to wait for them easily.

Assertions inside cy.intercept callbacks run when the request happens.

Use expect from Chai for clear, readable checks.

Summary

Use cy.intercept to watch network requests in Cypress.

Assert request properties inside the intercept callback with expect.

Check body, headers, method, or any request detail to ensure correctness.

Practice

1. What is the primary purpose of using cy.intercept in Cypress tests?

easy

A. To watch and control network requests during test execution

B. To create UI elements dynamically

C. To write CSS styles for the application

D. To generate random test data automatically

Solution

1. Step 1: Understand cy.intercept role

   cy.intercept is used to monitor or stub network requests in Cypress tests.

2. Step 2: Identify correct purpose

   It helps watch and control HTTP requests, not UI or styling tasks.

3. Final Answer:

   To watch and control network requests during test execution -> Option A

4. Quick Check:

   cy.intercept = watch/control requests [OK]

Hint: Remember: intercept = watch network calls [OK]

Common Mistakes:

• Confusing intercept with UI manipulation
• Thinking intercept generates test data
• Mixing intercept with CSS styling

2. Which of the following is the correct syntax to assert that a request method is POST inside a cy.intercept callback?

easy

A. assert(req.method == 'POST')

B. assert.equal(req.method, 'GET')

C. expect(req.method).equals('post')

D. expect(req.method).to.equal('POST')

Solution

1. Step 1: Identify correct assertion syntax

   Cypress uses Chai assertions like expect(value).to.equal(expected).

2. Step 2: Match method and case sensitivity

   HTTP methods are uppercase strings, so 'POST' must be exact.

3. Final Answer:

   expect(req.method).to.equal('POST') -> Option D

4. Quick Check:

   expect().to.equal() with exact case [OK]

Hint: Use expect().to.equal() with exact method case [OK]

Common Mistakes:

• Using lowercase 'post' instead of 'POST'
• Using assert syntax instead of expect
• Checking wrong method like 'GET'

3. Given the following code snippet, what will the assertion check inside the intercept callback?

cy.intercept('POST', '/api/login', (req) => {
  expect(req.body).to.have.property('username', 'admin')
})

medium

A. The request headers must include username 'admin'

B. The request body must include a username property with value 'admin'

C. The response body must have username 'admin'

D. The request URL must contain 'username=admin'

Solution

1. Step 1: Analyze the assertion target

   The assertion checks req.body for a property named 'username' with value 'admin'.

2. Step 2: Understand request vs response and headers

   It does not check URL, response, or headers, only the request body.

3. Final Answer:

   The request body must include a username property with value 'admin' -> Option B

4. Quick Check:

   expect(req.body).to.have.property('username', 'admin') [OK]

Hint: Check if property is in req.body, not URL or headers [OK]

Common Mistakes:

• Confusing request body with URL query
• Checking response instead of request
• Looking at headers instead of body

4. Identify the error in this Cypress intercept assertion:

cy.intercept('GET', '/api/data', (req) => {
  expect(req.headers['Content-Type']).to.equal('application/json')
})

medium

A. The assertion syntax is incorrect

B. The method should be POST, not GET

C. Headers keys are case-insensitive; 'Content-Type' should be 'content-type'

D. The intercept callback must use res instead of req

Solution

1. Step 1: Check header key case sensitivity

   HTTP headers are case-insensitive, but Cypress normalizes header keys to lowercase in the req.headers object. The code uses 'Content-Type' which is incorrect; it should be 'content-type'.

2. Step 2: Validate other parts

   Method GET is valid, assertion syntax is correct, and req is proper for request interception.

3. Final Answer:

   Headers keys are case-insensitive; 'Content-Type' should be 'content-type' -> Option C

4. Quick Check:

   Cypress req.headers use lowercase keys [OK]

Hint: Cypress req.headers uses lowercase keys [OK]

Common Mistakes:

• Using wrong HTTP method
• Misusing response object instead of request
• Incorrect assertion syntax

5. You want to assert that a POST request to /api/submit contains a JSON body with a non-empty email property and a header Authorization starting with 'Bearer '. Which is the best way to write this assertion inside cy.intercept?

hard

A. cy.intercept('POST', '/api/submit', (req) => {
expect(req.body.email).to.be.a('string').and.not.be.empty
expect(req.headers.authorization).to.match(/^Bearer /)
})

B. cy.intercept('POST', '/api/submit', (req) => {
expect(req.body.email).to.exist
expect(req.headers.authorization).to.include('Bearer')
})

C. cy.intercept('POST', '/api/submit', (req) => {
assert.isString(req.body.email)
assert.include(req.headers.authorization, 'Bearer')
})

D. cy.intercept('POST', '/api/submit', (req) => {
expect(req.body.email).to.be.empty
expect(req.headers.authorization).to.equal('Bearer')
})

Solution

1. Step 1: Check email property assertion

   cy.intercept('POST', '/api/submit', (req) => { expect(req.body.email).to.be.a('string').and.not.be.empty expect(req.headers.authorization).to.match(/^Bearer /) }) asserts email is a non-empty string using to.be.a('string').and.not.be.empty, which is precise.

2. Step 2: Check Authorization header assertion

   cy.intercept('POST', '/api/submit', (req) => { expect(req.body.email).to.be.a('string').and.not.be.empty expect(req.headers.authorization).to.match(/^Bearer /) }) uses regex to.match(/^Bearer /) to ensure header starts with 'Bearer ', which is exact and case-sensitive.

3. Step 3: Compare other options

   cy.intercept('POST', '/api/submit', (req) => { expect(req.body.email).to.exist expect(req.headers.authorization).to.include('Bearer') }) uses correct lowercase header key, but .to.exist only checks existence (could be empty or falsy), and .to.include checks substring anywhere, not prefix.
   cy.intercept('POST', '/api/submit', (req) => { assert.isString(req.body.email) assert.include(req.headers.authorization, 'Bearer') }) uses non-standard assert style and misses non-empty check; include not prefix.
   cy.intercept('POST', '/api/submit', (req) => { expect(req.body.email).to.be.empty expect(req.headers.authorization).to.equal('Bearer') }) incorrectly expects empty email and exact 'Bearer' match only.

4. Final Answer:

   expect(req.body.email).to.be.a('string').and.not.be.empty
   expect(req.headers.authorization).to.match(/^Bearer /) -> Option A

5. Quick Check:

   Use precise type and regex assertions for properties [OK]

Hint: Use type checks and regex for precise property assertions [OK]

Common Mistakes:

• Ignoring case sensitivity in headers
• Checking only existence, not content
• Using wrong assertion style inconsistently