How to use values from DOM in cypress test?

Question

if I have a page containing:

  <span data-testid="credit-balance">
    10
  </span>

In Cypress, how do I extract the value to a variable to use in tests?

Something along the lines of:

const creditBalance = cy.get('[data-testid="credit-balance"]').value();

Answer 1

Assigning return values with const, var, and let is considered an anti pattern while using Cypress. However, when you find yourself wanting to do so, is best practice to accomplish this with closures.

it("uses closures to reference dom element", () => {

   cy.get("[data-testid=credit-balance]").then(($span) => {

   // $span is the object that the previous command yielded

   const creditBalance = $span.text();

   cy.log(creditBalance);

  })

});

Another way to do this would be to use Aliases if you want to store and compare values or share values between tests using hooks.

it("aliasing the value from dom element", () => {

  cy.get("[data-testid=credit-balance]").as("creditBalance")

  cy.get("@creditBalance").should("contain", 10)

});

How you approach this really depends on the objective of your test. I recommend checking out more examples from the documentation: try Variables and Aliases , Best Practices, and FAQ

Answer 2

If you would like to retrieve the value and perform any assertions with it, a fast, efficient method would also be the use .invoke

it('Getting the value and performing an assertion', () =>{
   cy.get('selector').invoke('val').should('eq',10) 
})

Doc