I'm writing Cypress tests for a website that has a series of quotations, some of which have a "Read More" button at the end, which displays the rest of the quote. If I use

cy.get(".quote")

it returns a list of several quotes. I can use

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

to find the first quote that has a Read More button, but I want to know what the index of that element is in the original list of quotes. I'm testing to make sure that the Read More button correctly reveals the full quote, but the button disappears (entirely removed from the DOM, not just set to visibility: none) once it's been clicked, so I can't use the same mand to find the quote again. If I could access the element of that quote, I could just use

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

to pull out that specific quote again once the Read More button is gone.

I'm writing Cypress tests for a website that has a series of quotations, some of which have a "Read More" button at the end, which displays the rest of the quote. If I use

cy.get(".quote")

it returns a list of several quotes. I can use

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

to find the first quote that has a Read More button, but I want to know what the index of that element is in the original list of quotes. I'm testing to make sure that the Read More button correctly reveals the full quote, but the button disappears (entirely removed from the DOM, not just set to visibility: none) once it's been clicked, so I can't use the same mand to find the quote again. If I could access the element of that quote, I could just use

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

to pull out that specific quote again once the Read More button is gone.

• javascript
• dom
• cypress

3 Answers 3

You can do something like this. Apply each over the quotes, then inside each search for the quote you are looking for and then get the index of that quote.

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

Read More button correctly reveals the full quote then button disappears once clicked

Assuming the read more button removes the .read-more from the quote element after being clicked, then you can do the following.

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

If you want to make a mon function for this, the only way I've been able to get the index in this case is by doing the following:

const indexes = []
cy.get('.quote').each(($ele, index) => {
  if ($ele.text().includes('some part of the quote')) {
    indexes.push(index)
  }
})
return indexes

Then if you're expecting it appear just once, just get the first index out of the array.