javascript - Cypress:获取新的重新加载的元素

Question

我在重新加载元素时遇到问题。在我们的网站上，每个分页页面上有 10 个元素。如果删除一个元素，下一个元素会滑入，依此类推。 我遇到的问题是最初找到了 10 个元素。如果我现在删除所有 10 个元素，我的函数就完成了，尽管还重新加载了其他元素，这些元素也必须被删除。如何捕获函数中重新加载的元素？

deleteDeliveryAddresses() {
    const deleteRow = (selector, rowsToDelete) => {

        if (rowsToDelete === 0) return

        cy.get('foerch-delivery-addresses-item .row:contains("automated address name")').eq(0)
          .as('rowDeleted')
          .find('button:nth-child(2)').click({force:true})
        cy.xpath("//button[normalize-space()='Bestätigen']").should('be.visible').click()
        cy.xpath("//button[normalize-space()='Bestätigen']").should('not.exist')
        cy.wait(1000)     

        deleteRow(selector, --rowsToDelete)
    }

    const selector = 'foerch-delivery-addresses-item .row:contains("automated address name")'

    cy.get(selector).then($rows => {
        const rowsToDelete = $rows.length
        deleteRow(selector, rowsToDelete)
    })
}

Answer 1

理想情况下，您会知道测试必须处理的数据中有多少行。然后您的测试就会简单而完美地运行。

假设情况并非如此，请尝试刷新递归函数导出点的计数。

这是第二好的选择，因为执行重新计数时页面可能不稳定。

已更新

• 添加了 pageCount 限制以避免“超出最大调用堆栈大小”，例如，如果删除按钮选择器出现问题且行并未实际删除。

• 将递归调用移至 .then() 内，位于 cy.wait(1000) 之后，以确保稳定的行删除速度(即允许完成删除操作)

deleteDeliveryAddresses() {

  const selector = 'foerch-delivery-addresses-item .row:contains("automated address name")'

  const deleteRow = (rowsToDelete, pageCount = 0) => {

    // Set a page limit to avoid "Maximum call stack size exceeded"
    // if something goes wrong, for example rows are not deleted
   
    if (pageCount > 10) throw 'Too many pages processed'

    if (rowsToDelete === 0) {

      pageCount++   // track how many pages

      // refresh row count, using jQuery expression instead of .get()
      // so that if truly no more rows, test will exit gracefully
      // Table must be stable at this point
      rowsToDelete = Cypress.$(selector).length  

      if (rowsToDelete === 0) return
    }

    cy.get(selector).eq(0)
      .find('button:nth-child(2)').click({force:true})

    cy.xpath("//button[normalize-space()='Bestätigen']")
      .should('be.visible').click()
    cy.xpath("//button[normalize-space()='Bestätigen']")
      .should('not.exist')

    cy.wait(1000).then(() => {
      deleteRow(--rowsToDelete, pageCount)   // delay next delete until wait is complete
    })
  }

  cy.get(selector).then($rows => {
    const rowsToDelete = $rows.length
    deleteRow(rowsToDelete)
  })
}

否则，这是使用页数的可能模式

deleteDeliveryAddresses() {

  const rowSelector = 'foerch-delivery-addresses-item .row:contains("automated address name")'
  const pageCountSelector = '...something that indicate to the user the total page count'
  const rowsPerPage = 10

  const deleteRow = (rowsToDelete) => {

    if (rowsToDelete === 0) return

    cy.get(rowSelector).eq(0)
      .find('button:nth-child(2)').click({force:true})

    cy.xpath("//button[normalize-space()='Bestätigen']")
      .should('be.visible').click()
    cy.xpath("//button[normalize-space()='Bestätigen']")
      .should('not.exist')

    cy.wait(1000).then(() => {
      deleteRow(--rowsToDelete)   // delay next until wait is complete
    })
  }

  cy.get(pageCountSelector).then($pageCounter => {
    const pageCount = +$pageCounter.text()  // numeric from element text
    if (pageCount > 1) {
      deleteRow((pageCount -1) * rowsPerPage) // all but last page
    }

    // last page might be partial (less than 10)
    cy.get(rowSelector).then($rows => deleteRow($rows.length)
  })
}