CODEWITHSUNDEEP
automationcypress
GreatBear
GreatBear

Reputation: 39

How do I grab an id of an element as a text variable and reuse it later in Cypress

<li class="MuiButtonBase-root 
   MuiMenuItem-root Menu-module_menuItem__2_dUv 
   MuiMenuItem-gutters 
   MuiMenuItem-root 
   Menu-module_menuItem__2_dUv 
   MuiMenuItem-gutters css-564zr3" 
   tabindex="-1" 
   role="menuitem" 
   id="hello.world">
     hello.world
     <span class="MuiTouchRipple-root css-w0pj6f"></span>
</li>

Here I want to store the value of id which is "hello.world" as a string and use it for comparison later

const text=cy.get('span>li').eq(0).invoke('text').as('text');
cy.get('body').contains(text);

Upvotes: 0

Views: 456

Answers (2)

Atul KS
Atul KS

Reputation: 990

In Cypress, commands do not return their subjects, instead yield them so, your code is not going to work. Refer Cypress command- .then() [https://docs.cypress.io/api/commands/then] You can do something like:

   cy.get('span>li').first().then(($textVal) => { 
   expect(textVal.text().contains("First")}

Using .then() command allows user to switch from Cypress context to jQuery context. Now, user can use any jQuery method to do assertions using chai.js [https://docs.cypress.io/guides/references/assertions#Chai-jQuery]. Use cy.wrap() to come back to Cypress context and start using cypress commands as usual

Upvotes: 0

Lyonne
Lyonne

Reputation: 176

Have you actually looked an any Cypress examples? None of then show you that test code.

Try it this way instead

cy.get('li').eq(0).invoke('text').then(text => {
  cy.get('body').contains(text)
})

Upvotes: 2

Related Questions