Cypress - Unable to get the Response Headers - API Automation

Question

I have an API automation test suite using Cypress and one of the issue I am facing in one of the test is to validate the response headers.

For some reason, I am not able to read the response headers using Cypress.

The code is below

cy.request({
  method:'GET',
  url:Cypress.env("Authorisationurl")+tokenId+'&decision=allow&acr_values=1',
  followRedirect: false,
  headers:{
      'Accept': "/*"
  }    
  }).then((response) => {
    const rbody = (response.body);
    cy.log(response.status)

    //THIS GOT ASSERTED TO TRUE
    expect(response.status).to.equal(302)

    //OPTION1
    cy.wrap(response.headers['X-Frame-Options']).then(() => {
      return response.headers['X-Frame-Options'];
    });

    
    //OPTION2
    return response.headers['X-Frame-Options']

    //OPTION3
    return response.headers
})

None of the above options gives me the header information. Infact I am confused with the order of execution too.

This is my output.

for the following code.

const rbody = (response.body);
cy.log(response.status)
cy.log(response)
expect(response.status).to.equal(302)
cy.log(response.headers)
cy.log(response.headers['X-Frame-Options'])
return response.headers['X-Frame-Options']

Also, not very sure what Object{9} indicates. Can anyone please explain what is happening here. I am aware of Cypress flow of execution and the code is written in then block as a call back function.

Option 3 is very scary as it gives an error

cy.then() failed because you are mixing up async and sync code.

In your callback function you invoked 1 or more cy commands but then returned a synchronous value.

Cypress commands are asynchronous and it doesn't make sense to queue cy commands and yet return a synchronous value.

You likely forgot to properly chain the cy commands using another cy.then().

The value you synchronously returned was: Object{9}

Can anyone please help me here as in what is the correct way of doing it. I know Cypress is very quick and easy to use but to move away from Selenium, we need to make coding easier for developers with meaningful error message. Object{9} is not very helpful. Also, Do I need to use Cy.log ? As the sequence of prints is not what I have written in the code. Thanks very much for your time on this.

Answer 1

Please use like this: JSON.parse(JSON.stringify(response.headers))["X-Frame-Options"];

Answer 2

The "mixing async and sync code" message is basically saying you should keep the .then() callback simple.

But you can chain more than one .then() to run the async and sync code separately.

Use an alias to "return" the value. Since cy.request() is asynchronous, you will need to wait for the value and the alias pattern is the most straight-forward way to do this reliably.

WRT Object{9}, it's the result of the way Cypress logs complex objects.

Don't use cy.log() to debug things, use console.log().

cy.request( ... )
  .then(response => {
    expect(response.status).to.equal(200)  // assert some properties
  })
  .then(response => response.headers)      // convert response to response.headers
  .as('headers')

cy.get('@headers')
  .then(headers => {
    console.log(headers)
  })