Search code examples
cypressshadow-dom

How to select elements with same ID but in different shadow DOMs

So I'm working at a co. as a summer intern and have been tasked with writing tests for their application in cypress.

The application extensively uses shadow DOMs and nested shadow DOMs even. I used the includeShadowDom property true to traverse more easily. But I am facing an issue.

I need to type in 2 input boxes having the same ID and same class but they are in separate shadows. Is there a way I can distinguish between them i.e First occurrence of element with id= and nth occurrence of element with id=?

I can't share any code because it goes against company policy

Solution

  • Assuming you have added includeShadowDom: true in your cypress config file then you can use the eq method to get the respective elements.

    E.g. eq(0) for first occurrence of the element, eq(1) for the second and so on.

    So your code should look like this:

    cy.get('input').eq(0).type('some text')