Cypress，获取从 cy.get() 返回的特定元素的索引

Question

我正在为一个有一系列报价的网站编写赛普拉斯测试，其中一些报价的末尾有一个“阅读更多”按钮，它显示了报价的 rest。 如果我使用

cy.get(".quote")

它返回几个引号的列表。 我可以用

cy.get(".quote").find(".read-more").first()

找到具有阅读更多按钮的第一个引号，但我想知道该元素的索引在原始引号列表中是什么。 我正在测试以确保“阅读更多”按钮正确显示完整的引用，但是一旦单击该按钮就会消失（完全从 DOM 中删除，而不仅仅是设置为可见性：无），所以我不能使用相同的命令以再次查找报价。 如果我可以访问该引用的元素，我可以使用

cy.get(".quote").eq(element)

在“阅读更多”按钮消失后再次提取该特定报价。

Answer 1

你可以做这样的事情。 将each应用在引号上，然后在每次搜索中搜索您要查找的报价，然后获取该报价的索引。

cy.get('.quote').each(($ele, index) => {
  if ($ele.text().includes('some part of the quote')) {
    cy.log(index) //logs the index
  }
})

Answer 2

阅读更多按钮正确显示完整报价，然后单击后按钮消失

假设read more按钮在单击后从引用元素中删除.read-more ，那么您可以执行以下操作。

cy.get('.quote') // returns all quotes
  .find('.read-more') // only quotes with 'read more' 
  .each(($quote) => {
       cy.wrap($quote).find('.read-more-button').should('be.visible').click() //check read more button is visible, then click
       cy.wrap($quote).invoke('text').should('include.text',COMPLETE_QUOTE) // you can alter the should to however you best see to the text assertion
       cy.wrap($quote).find('.read-more-button').should('not.exist') // particular read more button does not exist in DOM
})