Use Cypress functions on variables

May 17, 2022

I’m looping throw all of the .row and need to grab the inner elements within .row. Is there a way to do this? I wasn’t able to find any documentation on this on Cypress’ website.

let num = 0
cy.get('.row').each(row => { 
  let rowDiv = cy.get(row).get('div') // not correct
  let rowBtn = cy.get(row).get('button') // not correct

  cy.get(rowDiv).should('have.text', 'Task ' + num)
  cy.get(rowBtn).should('have.text', "Btn ' + num)

  num++
})

>Solution :

You can use cy.wrap() to turn the yielded JQuery elements back into Cypress Chainables. Additionally, cy.each() can yield you the index of the current iteration, so instead of having to use num, you could just use that index variable.

cy.get('.row')
  .each((row, rowIndex) => { // yields JQuery element and current iteration
    cy.wrap(row).find('div').should('have.text', `Task ${rowIndex}`);
    cy.wrap(row).find('button').should('have.text', `Btn ${rowIndex}`);
  });