Cypress get element inside each-CodePudding

I have this code

        cy.visit('http://localhost:3000/')
        cy.get('.list').each((list, index, lists) => {
            cy.contains('Learn').click()
            cy.url().should('include', '/localhost')

            cy.get(`[data-testid="card-input-${index}"]`)
                .type('Learn Cypress')
                .should('have.value', 'Learn Cypress')
            cy.get(`[data-testid="btnAdd-${index}"]`).click()


            cy.get(".card").each((card, index, cards) => {
                cy.get(cards).should('have.length', 4)
            })

        })

I need this line to return only cards from the specific list. Right now it returns all cards from all lists.

 cy.get(cards).should('have.length', 4)

I tried playing with literals, but it return [object object]

 cy.get(`${cards}>card`).should('have.length', 4)

CodePudding user response：

So the first each, is looping over the list and I am assuming that within the list you want to access the cards, So you can do something like this:

cy.visit('http://localhost:3000/')
cy.get('.list').each((list, index, lists) => {
  cy.contains('Learn').click()
  cy.url().should('include', '/localhost')

  cy.get(`[data-testid="card-input-${index}"]`)
    .type('Learn Cypress')
    .should('have.value', 'Learn Cypress')
  cy.get(`[data-testid="btnAdd-${index}"]`).click()

  cy.wrap(list).within(() => {
    cy.get('.card').should('have.length', 3)
  })
})

CodePudding user response：

The reason you have been getting all the cards from all list is due to the cy.get() searching from the root DOM element. In order to limit your search to a previous DOM element you'll want to use either .within() or .find().

cy.visit('http://localhost:3000/')
cy.get('.list').each((list, index) => {

  cy.contains('Learn').click()
  cy.url().should('include', '/localhost')
  cy.get(`[data-testid="card-input-${index}"]`)
    .type('Learn Cypress')
    .should('have.value', 'Learn Cypress')
  cy.get(`[data-testid="btnAdd-${index}"]`).click()

  cy.wrap(list)
    .find('.card')
    .should('have.length', 4)
})