CODEWITHSUNDEEP
javascriptcypress
Ken M
Ken M

Reputation: 335

How to save a variable/text to use later in Cypress test?

The cypress docs(https://docs.cypress.io/guides/core-concepts/variables-and-aliases.html#Elements) are pretty unclear on how alias and variables can be used to store information during a test.

I'm trying to store the text of a div on one page to use later, for example:

// let vpcName;
it('Store current name to use later', () => {
  // save name for later use - doesn't work
  // cy.get('#value').then(elem => {
  //   vpcName = Cypress.$(elem).text;
  // });

  // using alias - also doesn't work
  cy.get('#value')
    .invoke('text')
    .as('vpcName');
});
  
it('Use previous value to return to correct page', () => {
  cy.contains(this.vpcName).click();
});

Upvotes: 29

Views: 86119

Answers (5)

Alex
Alex

Reputation: 75

I've been struggling with this for few days. Here is my approach if you want to use the saved text (for example) multiple times. However it seems too long to me and I think it could be optimized. Tested on Cypress v11.2.0

 cy.xpath("//tbody/tr[2]/td[2]").then(($text) => {
    let txt = $text.text()

    //expect(txt).to.eq('SomeText')
    cy.wrap(txt).as('txt')
  })

  
   cy.get('@txt').then(txt => {
        //expect(txt).to.contain("SomeText")
        cy.xpath("xpath of search field").type(txt)
     })

Upvotes: 1

nonethewiser
nonethewiser

Reputation: 608

An alternative solution which doesn't actually store the element to a variable but serves some of the same purpose is to wrap the cy.get call in a function. Such as:

const btn = () => cy.get('[data-testid="reset-password-button"]')

btn().should('have.attr', 'disabled')

cy.get('[data-testid="new-password-input"]').type('someNewPW')

btn().should('not.have.attr', 'disabled')

This could be a good option if readability is your main goal.

Upvotes: 1

new_tester
new_tester

Reputation: 437

I just came across this article that explains how and why you store a variable and then use it later in the "Cypress way":

https://www.stevenhicks.me/blog/2020/02/working-with-variables-in-cypress-tests/

In respect to how it should work, here is my example which first, collects the message (the message is shown for only 3 secs then disappears). Secondly, it gets the value using the @ sign. Lastly my code passes the stored message through to an empty function constructed to assert that the value Portsmouth is contained within the message.

it('Current Port change', () => {
  cy.get('#viewport').find('div[id=message]').then(message => {
    let wags = message;
    cy.wrap(wags).as('wags')
  });

  cy.get('@wags').then(wags => {
     expect(wags).to.contain("Portsmouth")
  });
});

let me know if you need further clarification

Upvotes: 42

Punit
Punit

Reputation: 242

Try this:

cy.get('button').then(($btn) => {
  const txt = $btn.text()
  // $btn is the object that the previous command yielded
})

Source: https://docs.cypress.io/guides/core-concepts/variables-and-aliases.html#Return-Values

Upvotes: 21

Zeth
Zeth

Reputation: 2598

I had to resort to

When I was trying to save cookies from one test to another in Cypress

Upvotes: 0

Related Questions