How to intercept a networkrequest and check its requestHeaders with Cypress

Question

I am working with Cypress and I am testing the FrontEnd.

I would like to check the requestHeaders of the following networkcall. The call is already been intercepted and stubbed namely AssessmentStub:

From the browserDevTools you can see following: I want to assert the x-classification and its value that you can find in the request Headers.

This call is a GET call requested by the webaplication. I am testing the UI and want to check if it is requesting the correct x-classification in the request Header.

The code looks like the following now, but it is not working:

       it.only('Is the Frontend requesting the correct API-Endpoint after changing the Classification', () => {
    cy.get('app-assessment-tests-header > app-classification-selector').click()
    cy.intercept('GET', '**/api/assessmenttestreference').as('AssesmentStub')

    cy.get('.popup').contains('HAVO').click()

    cy.get('@AssesmentStub').then((request) => {
        expect(Request.Headers).to.have.property('x-classification', 'f0651c9a-649b-4217-a85f-ce5c79f0d773')
    })

});

Answer 1

You can try this:

cy.wait('@AssesmentStub')
  .its('request.headers')
  .should(
    'have.property',
    'x-classification',
    'f0651c9a-649b-4217-a85f-ce5c79f0d773'
  )

Answer 2

The issue with the code you provided is that the cy.get() yields the entire network call, including request and response. The following code should get you closer.

it.only('Is the Frontend requesting the correct API-Endpoint after changing the Classification', () => {
    cy.get('app-assessment-tests-header > app-classification-selector').click()
    cy.intercept('GET', '**/api/assessmenttestreference').as('AssesmentStub')

    cy.get('.popup').contains('HAVO').click()

    cy.get('@AssesmentStub').then((call) => {
        expect(call.request.Headers).to.have.property('x-classification', 'f0651c9a-649b-4217-a85f-ce5c79f0d773')
    }) // use `call.request` instead of `request`
});