Better Support for Shadow DOM

Since Copy JS Path has landed in Chrome DevTools, we now have a way to address nodes inside shadow DOM.

Details: https://github.com/GoogleChrome/puppeteer/issues/858#issuecomment-438540596

This, however, doesn’t simplify life much when it comes to sugar methods, such as page.click, page.select and others.

It’d be nice to have a way to address nodes in shadow DOM in these methods.

Suggestions:

1. Teach page.click and others to accept an array of selectors. (source).

await page.select(['#container', 'select#foo'], 'value');

1. Teach page.click and others to treat jsPaths as selectors.

await page.select("document.querySelector('body > toolbar-component > toolbar-section.left')", 'value');

cc @JoelEinbinder

[thernstig]

@aslushnikov Is there any planned worked for this from the Puppeteer team? Considering about %8 of page loads use custom elements (and most likely shadow dom) it feels like a prominent framework such as Puppeteer could use a more native approach 😃

[felixfbecker]

Another thing to consider that in an application where every (web)component is a shadow root, this would basically be equivalent to an exact step by step DOM path instead of a “selector”. This means you would have to update all your e2e tests every time you change anything about the DOM structure, which would be extremely annoying (no matter if it supports JS path or arrays).

Maybe another better option would be to have an option { penetrateShadowRoot: true } to the functions that would recursively dig into shadow roots.