How to make sure the order of the buttons are same using cypress

February 25, 2022

I have a use case
I have three buttons Accept,Decline and Cookie Choices.
I click an option and after that when these buttons show-up,
I want to make sure the order of these buttons is exactly the same Accept,Decline and Cookie Choices
How do we automate this scenario in Cypress to make sure the order of these buttons is same.

>Solution :

Select all the 3 buttons using. For example by placing a data-testid on them

<button data-testid="cookie-btn">Accept</button>
<button data-testid="cookie-btn">Decline</button>
<button data-testid="cookie-btn">Cookie choices</button>

then use first and next to go through them sequentially. For example

cy.get('[data-testid="cookie-btn"]')
  .should("have.length", 3)
  .first()
  .should("have.text", "Accept")
  .next()
  .should("have.text", "Decline")
  .next()
  .should("have.text", "Cookie choices");