How do I get a text from a div class Cypress

Viewed 9647

Alright, I want to get a text from a div and a class. The html looks like this:

<div class="inventory_item_name">Backpack</div>

And my Code is this:

 const article = cy.get('.inventory_item_price').then((theElement) => {
      theElement.text();
   });

The problem: When I do cy.log(article) I get Object{5}

4 Answers

Just like Alex mentioned in the comment, you cannot return a value from cy commands. But you can do so in the .then block just like:

 it("should have text of 'Backpack'", () => {

  // I have changed the selector since the class name in your HTML is ".inventory_item_name" not ".inventory_item_price"
  cy.get(".inventory_item_name").then(($el) => {
    const text = $el.text(); // Now you have the text "Backpack"

    // Do the assertion here
    expect(text).to.eq("Backpack");
  });
});

You can learn more about why Cypress doesn't return value in this documentation

As cypress documentation says

You cannot assign or work with the return values of any Cypress command. Commands are enqueued and run asynchronously.

// this won't work the way you think it does
const button = cy.get('button')
const form = cy.get('form')
button.click()

For more information refer : variables-and-aliases

You have a few options. But you need to keep in mind the asynchronous nature of cypress

  • Use alias (if you want to share the article variable in other tests ) so the code will look like this,

Example:

it("Test 1", () => {
cy.get('.inventory_item_price').invoke('text').as('article')
})

//Now you can use this.article in all the other test cases
//If you are using aliases remember Not to use arrow functions on hooks

it("Test 2", function(){
//this will log Backpack
cy.log(this.article)
})
  
  • Use .then, As mentioned by @konekoya in the answer, Since cypress is asynchronous you need to use .then to execute a task after a previous task is completed.

Example:

cy.get('.inventory_item_price').invoke('text').then(article=> {
//you can use articale variable as much as you want inside .then 
//you can't use it outside

const value = articale ;
cy.log(article)
cy.log(value )
})

Note: to get inner Text you there are several methods. You can do the same thing using,

cy.get('.inventory_item_price').then(article => {
const value = articale.text() ;
cy.log(article.text())
cy.log(value)
})

You can't assign text values like this.

const article = cy.get('.inventory_item_price').then((theElement) => {
      theElement.text();
   });

The reason is the bellow code does not return a text element.

cy.get('.inventory_item_price').then((theElement) => {
          theElement.text();
       });

So you need to change it like this.

cy.get('.inventory_item_price').then((theElement) => {
         const article = theElement.text();
         //not you can use article
       });

You can return the article text with below code. Please also look at the link where I have shared the answer for more details.

Storing an element's text in Cypress outside of a chainer method

return cy.get('.inventory_item_price').then((theElement) => {
      return theElement.text();
    }).then(article => {
      cy.log(`article is ${article}`);
    })
Related