How can I access to each element inside of a grid element with Cypress?

Question

I have a Grid component which includes 24 divs and inside of each div I need to take the value.

This value actually arrives in <p>, so which is the best way to do this?

Below is the app image. I would appreciate an example.

Answer 1

You could probably do something like storing the data in an object or array outside of the Cypress chain. Without a code example, here's my best guess.

cy.get('grid').within(() => { // cy.within() searches only within yielded element
  const data = {}; // create data object
  cy.get('div').each(($div, index) => { // cy.each() allows us to iterate through yielded elements
    data[index] = $div.text() // or possibly some other JQuery command to get the value
    // additionally, could go without the index at all and make `data` an array.
  }).then(() => {
    // whatever needs to be done with `data`, wrapped in `then` to make sure data is populated correctly.
  });
});

Answer 2

You can add use each for this to loop through the elements and then do further operations:

cy.get('.chakra-stack')
  .find('p')
  .each(($ele) => {
    cy.log($ele.text().trim()) //Logs all the texts one by one
  })

Answer 3

Just add the p selector to your cy.get() command

cy.get('div.chakra-stack p') // access <p> within <div>
  .each($el => {
    cy.wrap($el).invoke('text')
      .then(text => {
        ...
      })
  })

To get the value before the text

cy.get('div.chakra-stack p') // access <p> within <div>
  .each($el => {
    cy.wrap($el)
      .prev()             // element with value 
      .invoke('text')
      .then(value => {
        ...
      })
  })

Answer 4

Accessing values by text label like this

const values = {}
cy.get('div.chakra-stack p') 
  .each($el => {
    const frase = $el.text()
    cy.wrap($el).prev().invoke('text')
      .then(value => values[frase] = +value)
  })
  .then(() => {
    // values = {'shield': 1, 'session': 2, ...}
  })