I am working on identifying an element that is inside a shadow-root. The issue is that I have a shadow-root within another shadow-root, which is inside a third shadow-root, and so on. So far, what I have done is identify each of these shadow-roots in order to access the element in question. According to what I read in the documentation, Playwright is designed to work with Shadow DOM when the element is identified using data-testid, as long as XPath is not used (I am using CSS selectors).

However, I haven’t been able to identify the element successfully. I am attaching an image so you can get a better idea of the structure. If you need any more information to help me, please feel free to let me know. Thank you in advance!

PD: All shadow-root are open, I also tried using the codegen

What I Tried:
Accessing elements within multiple nested Shadow Roots:

I tried to access an element inside a Shadow DOM that is nested within other Shadow DOMs (several levels of shadow-root).
I used CSS selectors instead of XPath, as Playwright is designed to work well with Shadow DOM when CSS selectors are used (not XPath).
Using data-testid:

I tried to identify elements inside the Shadow DOMs using the data-testid attribute, as suggested in Playwright’s documentation to facilitate element identification.
I mentioned that all the shadow-roots are open (open shadow DOMs), meaning they should be accessible via selectors.
Using codegen:

I attempted to use Playwright’s codegen tool to automatically generate the code and see if it would make identifying the element inside the nested Shadow DOMs easier.
What Didn’t Work:
Despite trying these approaches, I wasn’t able to correctly identify the element inside the nested Shadow DOMs.
Specifically, the strategy I employed did not allow me to successfully access the target element within the nested Shadow DOM structure, even when using CSS selectors like data-testid and with the Shadow DOMs being open (which should allow direct access to the elements).