[Feature] page.$ and page.$$ should pierce shadow DOM

It seems like page.$ and page.$$ and their eval counterparts do not pierce the shadow DOM?

Should they maybe? It would not be equal to document.querySelector (or document.querySelectorAll) anymore then, but I’d say it is worth it?

E.g. when using page.$$ which is the only option when e.g. getting multiple elements in a table, to loop and do something on them, it would be nice it pierced the shadow DOM.

We also have another case in tests where we in an afterEach() try to close any open dialogs, just to make sure we have independence between test cases if one fails in the middle of an open dialog. In this case, in the afterEach() we do:

  // a-cool-button is in an open shadow DOM
  const dialog = await page.$('a-cool-dialog[show]');
  if (dialog) {
    await page.click(
      'a-cool-dialog[show] a-cool-button'
    );
  }

We would rather do:

  // a-cool-button is in an open shadow DOM
  const cancelButton= await page.$('a-cool-dialog[show] a-cool-button');
  if (cancelButton) {
    await cancelButton.click();
  }

[thernstig]

Nevermind, it does pierece the shadow DOM. (I’ll be honest here… it was second hand info that it did not work, I should have tested this myself, apologies).

However, the actual description for all these is not correct anymore. https://github.com/microsoft/playwright/blob/master/docs/api.md#pageselector etc. says:

The method runs document.querySelector within the page.

That cannot be true anymore since the functions pierce the shadow DOM, so it is not a direct mapping to that function which follows the CSS spec.

I assume then that the only difference between e.g. page.waitForSelector() and page.$() is that the latter do not have any wait at all? Is page.$ even needed anymore?

(personally I feel all the .$ functions are ambiguous due to no naming and should be deprecated in favor of better named functions where applicable).

[dgozman]

Hmm… Works for me with playwright v1.0.1:

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://shop.polymer-project.org/');
  const sel = 'shop-tab';
  const btns = await page.$$(sel);
  await Promise.all([
    btns[0].click(),
    page.waitForNavigation(),
  ]);
  console.log(page.url());  // Prints https://shop.polymer-project.org/list/mens_outerwear
  await browser.close();
})();

What am I missing? Did you forget to await? Maybe the site is different?