How to pass content yielded in cy.wait() to the variable and reuse it in the next steps?

Question

I use cy.intercept() and cy.wait() to listen to the request and yield content from it.

let number;

describe("some test", () => {
  before(() => {
    cy.clearCookies();
  });
  it("some test", () => {
    cy.someCommand();
    clientPage.someMethod();
    cy.intercept("**/request").as("idNumber");
    clientPage.someMethod1();
    cy.wait("@idNumber").then((res) => {
      number = res.response.body.numbers.id
    });
    cy.get(#someELement).type(number)
 });
});

It gives me "cy.type() can only accept a string or number. You passed in: undefined" When I try to log cy.log(number) under "number = res.response.body.numbers.id" it works. When I try to pass the variable out of this code block it is undefined. How can I pass it into the further steps?

Answer 1

To make sure the value of number is passed on to the type, you have to add a then, something like:

let number

describe('some test', () => {
  before(() => {
    cy.clearCookies()
  })
  it('some test', () => {
    cy.someCommand()
    clientPage.someMethod()
    cy.intercept('**/request').as('idNumber')
    clientPage.someMethod1()
    cy.wait('@idNumber')
      .then((res) => {
        number = res.response.body.numbers.id
      })
      .then(() => {
        cy.get('#someELement').type(number)
      })
  })
})

If you want to use the variable globally throughout the project, you can use the Cypress.env() method. Cypress Docs.

describe('some test', () => {
  before(() => {
    cy.clearCookies()
  })
  it('some test', () => {
    cy.someCommand()
    clientPage.someMethod()
    cy.intercept('**/request').as('idNumber')
    clientPage.someMethod1()
    cy.wait('@idNumber').then((res) => {
      cypress.env('number', res.response.body.numbers.id) //Sets Number
    })
    cy.get('#someELement').type(Cypress.env('number')) //Gets Number and types it
  })

  it('some different test', () => {
    cy.get('#someELement').type(Cypress.env('number')) //types the number
  })
})

Answer 2

It happens because of the asynchronous nature of cypress, and at the moment number is called, its value was not assigned yet. Any further action can be chained by wait command without polluting your scope with context variables:

 cy.wait("@idNumber").then((res) => {
    cy.get(#someELement).type(res.response.body.numbers.id)
 });

Answer 3

@alex-izbas answer is good if you need for immediate use.

In the option that you need to use it later in your test, you'll need to set it an .alias() and use it in junction with function(){} and this keyword.

describe("some test", () => {
  before(() => {
    cy.clearCookies();
  });
  // use function() {} to be able to use this keyword
  it("some test", function() {
    cy.someCommand();
    clientPage.someMethod();
    cy.intercept("**/request").as("idNumber");
    clientPage.someMethod1();

    // use .its() to get the id and store in alias
    cy.wait("@idNumber")
      .its('response.body.numbers.id')
    // add an assertion to check type with .should()
      .as('number')

    // some more actions

    // get alias using this keyword
    cy.get(#someELement).type(this.number)
 });
});