How to select identically names div elements when writing cypress tests

Question

I'm using cypress to create E2E test for our new application.

The application has a menu that contains buttons to display different data on a map screen. All of these buttons have the same div name, which I can differentiate between by entering the text name of the button:

cy.get('div.sb-item-body').contains('Historical Land Uses').click()
cy.get('div.sb-item-body').contains('Potentially Contaminative Industrial Uses (Past Land Use)').click()
cy.get('div.sb-item-body').contains('Potentially Infilled Land (Water)').click()

There is a further complication where two of the buttons have the same title (Landfill and Waste) as that dataset is in two different sections. So when I attempt to access the second -

cy.get('div.sb-item-body').contains('Landfill and Waste').click()

It is trying to select the first button with that name, and it's failing as that button has been collapsed and is no longer selectable.

Any help would be appreciated.

Answer 1

See the .eq() syntax.

You can use this when the selector returns multiple elements, e.g

cy.get('div.sb-item-body').contains('Landfill and Waste').eq(0).click()
cy.get('div.sb-item-body').contains('Landfill and Waste').eq(1).click()

I'm not sure if the 'collapsed' first button might interfere with it.

A more long-winded way is to use .then() to process the array of returned values, e.g

cy.get('div.sb-item-body').contains('Landfill and Waste').then(els => {
  const buttons = [...els];
  cy.wrap(buttons[0]).click()
  expect(..).to...
  cy.wrap(buttons[1]).click()
  expect(..).to...
})

The spread operator converts the wrapped elements into an array you can work with, and cy.wrap() re-wraps the selected item making it clickable.