CODEWITHSUNDEEP
javascriptcypressend-to-end
user13933206
user13933206

Reputation:

How to extract text content from a div using Cypress?

I want to get a text from a div with a class name of .inventory_item_name. The HTML looks like this:

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

And my JS code is as follow:

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

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

Upvotes: 5

Views: 15960

Answers (5)

ITselect
ITselect

Reputation: 153

I was working on a cypress project and came across this question. So, I decided to simulate it. I therefore included the line <div class="inventory_item_name">Backpack</div>in the project as below:

<div class="form-group row">
  <label class="col-sm-3 label">Radios</label>
  <div class="col-sm-9">
    <nb-radio-group>
      <nb-radio>Option 1</nb-radio>
      <nb-radio>Option 2</nb-radio>
      <nb-radio disabled>Disabled Option</nb-radio>
    </nb-radio-group>
  </div>
</div>
<div class="form-group row">
  <div class="offset-sm-3 col-sm-9">
    <button type="submit" nbButton status="primary">Sign in</button>
    <br><br>
    <div class="inventory_item_name">Backpack</div>
  </div>
</div>

This updated my DOM as below:

enter image description here

Now, when we write the code below to see the output of the text variable, we see in the image that follows that it is Backpack circled in red. Why is that?

It is Backpack because Backpack is the descendent DOM element of .inventory_item_name

cy.get('.inventory_item_name').then((el) => {
    const text = el.text();
    console.log(text);
    expect(text).to.eq('Backpack');
});

enter image description here

Upvotes: 0

Joshua
Joshua

Reputation: 3186

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

Upvotes: 10

user13874856
user13874856

Reputation:

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
       });

Upvotes: 2

Muditha Perera
Muditha Perera

Reputation: 1248

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)
})

Upvotes: 0

Srinu Kodi
Srinu Kodi

Reputation: 516

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}`);
    })

Upvotes: -1

Related Questions