賽普拉斯在每個內部獲取元素

Question

我有這個代碼

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

        })

我需要這一行來僅返回特定列表中的卡片。 現在它返回所有列表中的所有卡片。

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

我試着玩文字，但它返回 [object object]

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

Answer 1

所以第一個each循環遍歷列表，我假設你想在列表中訪問卡片，所以你可以這樣做：

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', 4)
    //or
    cy.get('.card').its('length').should('eq', 4)
    //or
    cy.get('.card')
      .its('length')
      .then((len) => {
        cy.get('.card').should('have.length', len)
      })
  })
})

Answer 2

您從所有列表中獲取所有卡片的原因是cy.get()從根 DOM 元素進行搜索。 為了將您的搜索限制在之前的 DOM 元素中，您需要使用.within()或.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)
})