Accessing shadow dom elements

[nairk19]

How I can access elements inside a shadow dom with Backstop js?

I did try to access a shadow dom element like any other element but the element was not found.

Like for example I want to access the slot element below within the shadow-root:

[blackfalcon]

I also have this issue. I am considering BackstopJS for the Auro design system using shadow DOM custom elements.

When trying to use a selector ID of an element within the shadow DOM, I get the following error

createBitmaps | Selected 1 of 1 scenarios.
CREATING NEW REFERENCE FILE
Cookie state restored with: []
CREATING NEW REFERENCE FILE
Cookie state restored with: []
CREATING NEW REFERENCE FILE
Cookie state restored with: []
Browser Console Log 0: JSHandle:BackstopTools have been installed.
SCENARIO > BackstopJS Homepage
Element not found for capturing: .inputElement
x Close Browser
Browser Console Log 0: JSHandle:BackstopTools have been installed.
SCENARIO > BackstopJS Homepage
Browser Console Log 0: JSHandle:BackstopTools have been installed.
SCENARIO > BackstopJS Homepage
Element not found for capturing: .inputElement
x Close Browser
Element not found for capturing: .inputElement
x Close Browser

If I target the ID that is on the custom element itself, I can get a return. But since I cannot target in the shadow DOM, I cannot trigger events like hover or click.

[garris]

You need to check documentation for puppeteer or playwright to see how shadow-dom can be accessed.

E.g. if you are using playwright engine -- https://playwright.dev/docs/selectors/#selecting-elements-in-shadow-dom

[blackfalcon]

E.g. if you are using playwright engine

That was the tipoff. Moving to PlayWright allows me to select elements in the shadowDOM without any additional configuration.

[blackfalcon]

To see a setup that is working with the shadow DOM and PlayWright, see https://github.com/AlaskaAirlines/auro-input/pull/104

[celestina01]

I've tried all the methods I've used in Puppeteer and they are not working to select shadow elements in backstopjs. selectors: ['pierce/.button'], "is not a valid selector" selectors: ['div >>> button'], is deprecated. Does anyone know how to select shadow dom elements with Puppeteer?