data-cy returns multiple elements

[ishratur]

I have data-cy attribute to target a specific element. But when the test runs and trigger a click for the element, I get an error that multiple events yielded so the click fails. I am not sure why it's returning multiple elements although I am using data-cy.

[jjhelguero]

Your app must have multiple elements with a matching data-cy attribute. Checking on your browser console with $$() to see how many matches you receive.

[jjhelguero]

Then there must be another element with data-cy="btn_side_navbar_measurements" existing in your app when Cypress executes cy.get('[data-cy="btn_side_navbar_measurements"]')

[ishratur]

I have few more this type of elements that I mentioned in the code snippet. But the multiple elements error occurs only for few of the elements. Btw, in my code data-cy="btn_side_navbar_measurements" occurs only once.

[jjhelguero]

When your test runs for that click on the cy.get() command and open your dev tools(f12) to see what is returned.

[san-slysz]

@ishratur > On the DOM inspect 'Element' tab (it needs to be have your focus) you can Ctrl-F. This field, as stated by the placeholder, accepts xpath and CSS selectors. Type here and Enter. You'll see 2 found elements cause your DOM just as 2 elements matching your selector. Data-cy (or anything else) is only a unique identifier if your dev make it so. Speak to your front devs.

[rmnrdi]

@san-ouadghiri
I know this is an old post, but how exactly would the devs do that? Element properties?

We're having a similar issue where our element is considered hidden by cypress.
Selecting by data attribute data-el doesn't work.
Selecting by ID #TfrmHome_wcMenu3' does work.

Which is really confusing because Cypress tells you to use data attributes as a best practice, but if they don't work in certain situations, I can't see how they'd be ideal.

Thanks