search

garris / BackstopJS

Catch CSS curve balls.
http://backstopjs.org
MIT License
6.82k stars 607 forks source link

Accessing shadow dom elements #1308

Open nairk19 opened 3 years ago

nairk19 commented 3 years ago

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:

Screenshot 2021-05-03 at 17 36 14
blackfalcon commented 2 years ago

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
Screen Shot 2021-12-10 at 3 26 19 PM

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

celestina01 commented 2 years ago

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?