How to store the response of a request in Cypress? - cypress

Question

I have the following code
cy.intercept('GET', Cypress.env('activationCode')).as('getActivationCode')
let validationCode;
cy.request('GET', Cypress.env('activationCode'))
.then( ({ body }) => {
validationCode = body
console.log(body);
// this have the value
})
cy.wait('#getActivationCode')
console.log(validationCode)
// this is undefined
I need to receive a variable from a get request to fill a form but I don't know how to expect it to receive the value so that the execution can continue.
I don't want to code inside the then of the request.

Answer 1

console.log(validationCode) This is coming as undefined because of non-cypress commands are run before the cypress commands. So before validationCode is updated with any value, it is being printed. To avoid this us cy.log(). Also the the way cypress recommends to use variables is by using alias.
cy.intercept('GET', Cypress.env('activationCode')).as('getActivationCode')
cy.request('GET', Cypress.env('activationCode')).then(({body}) => {
cy.wrap(body).as('responseBody') //save response body using alias
console.log(body)
// this have the value
})
cy.wait('#getActivationCode')
cy.get('#responseBody').then((responseBody) => {
cy.log(responseBody) //prints the response body
})
If you want to use console.log you can do this:
let validationCode
cy.request('GET', Cypress.env('activationCode'))
.then(({body}) => {
validationCode = body
console.log(body)
// this have the value
})
.then(() => {
cy.wait('#getActivationCode')
console.log(body)
})

Answer 2

Cypress commands are async, so you should be careful when you mix async and sync code.
You can easily accessa certain property from a request by using the .its() command.
cy.intercept('GET', Cypress.env('activationCode'))
.its('response.body.variableIWant') // you'll need drill down to your specific variable you want
.as('variableIWant')
// some other code
cy.get('#variableIWant')
Another way using .then()
cy.intercept('GET', Cypress.env('activationCode'))
.its('response')
.then( resp = >{
// some code to get variable you want
return variableIWant //this will become new subject for cy commands
})
.as('variableIWant')
// some other code
cy.get('#variableIWant')

Answer 3

Another alternative, use combination before(), function() and .this
before(function() {
cy.request('GET', Cypress.env('activationCode'))
.then( ({ body }) => {
return body
})
.as('validationCode') // puts body into this.validationCode
})
it('tests the validationCode', function() {
console.log(this.validationCode)
})
it('another test of validationCode', function() {
console.log(this.validationCode)
})
You should look at Verifying the request modification
cy.intercept() cannot be debugged using cy.request()! Cypress only intercepts requests made by your front-end application.
Which means the cy.request() will not fire the cy.intercept()