Re: [GoogleChrome/puppeteer] Query nodes within shadow roots (#858)

**TL;DR: try "Copy JS Path" in Chrome Canary to get a "js selector" for nodes inside Shadow DOM.**

Hi everybody!

In Chrome 72 (current Canary) we introduced a new option - "Copy JS Path", located right next to the "Copy Selector" option: 


![aaa](https://user-images.githubusercontent.com/746130/48461601-450fcf80-e789-11e8-85ae-2c92d92ea970.png)


This produces a javascript one-liner that fetches the selected element. For some element `"#foo"` inside shadow DOM the one-liner might look like this:

```js
document.querySelector('#container').shadowRoot.querySelector('#foo')
```

In puppeteer, one-liner can be used to fetch `ElementHandles` like this:

```js
// Fetch element using the "js selector"
const buttonHandle = await page.evaluateHandle(`document.querySelector('#container').shadowRoot.querySelector('#foo')`);
// Click element
await buttonHandle.click();
```

We think this should help in many cases when dealing with Shadow DOM. Please give it a shot
and let us know what you think!

-Puppeteer Team


-- 
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub:
https://github.com/GoogleChrome/puppeteer/issues/858#issuecomment-438540596