Support transparently selecting elements under a shadow DOM

[ankur22]

Tested against: dbede12

When trying to create a script for an example to go on the documentation page, I found that the checkbox wasn't being found and it would eventually timeout. The script I ran using k6-browser was:

import { sleep } from 'k6';
import launcher from 'k6/x/browser';

export default function () {
  const browser = launcher.launch('chromium', {
    headless: false,
  });
  const context = browser.newContext();
  const page = context.newPage();
  page.goto("https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-checkbox.html");
  const checkbox = page.locator('#horns');
  checkbox.check();

  sleep(5);
  browser.close();
}

I tested the same scenario in PW using the following and it was able to correctly select the checkbox:

// @ts-check
const { test, chromium } = require('@playwright/test');

test.describe('Editing', () => {
  test('Type login creds', async () => {
    const browser = await chromium.launch({ headless: false });
    const ctx = await browser.newContext();
    const page = await ctx.newPage();
    await page.goto("https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-checkbox.html");
    const l = page.locator('#horns');
    l.check();

    await new Promise(resolve => setTimeout(resolve, 5000));

    await browser.close();
  });
});

[imiric]

This seems like a more general problem with selecting elements under a shadow DOM.

If you notice, input#horns is under a #shadow-root element. In DevTools you can't select it with $('#horns') either, but have to do something like $('shadow-output').shadowRoot.querySelector('#horns'). It's likely that Playwright supports this lookup transparently in some way, and we'd have to look into it. So I think this is more of a missing feature than a bug.

BTW, this workaround should work:

const el = page.evaluate(() => {
  return document.querySelector('shadow-output').shadowRoot.querySelector('input#horns');
});

... though it didn't quite work for me on this page and I don't want to spend more time on this right now. 😓