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

I have a Grid component which includes 24 divs and inside of each div I need to take the value and this value actually arrives in

, which is the best way to do this? Gonna share the image. I would appreciate one exmaple. Thanks!

Image

CodePudding user response：

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

CodePudding user response：

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