Shadow Dom Query

[cmoniot-gala]

Does xk6-browser support locating elements contained in a shadow dom? For example I'm trying to input text into a search box contained inside a shadow dom but I get the error ERRO[0030] Uncaught (in promise) GoError: filling "#input" with "Hello World": websocket: close 1006 (abnormal closure): unexpected EOF: GoError running at reflect.methodValueCall (native)

import { chromium } from 'k6/x/browser';

export default function () {
  const browser = chromium.launch({ headless: false });
  const page = browser.newPage();
  page.setViewportSize({ width: 1200, height: 1080 })

  page
    .goto('https://books-pwakit.appspot.com/', { waitUntil: 'networkidle' })
    .then(() => {
      const searchBox = page.locator('#input')
      searchBox.fill('Hello World')
    })
    .finally(() => {
      page.close();
      browser.close();
    });
}

[ankur22]

Hi @cmoniot-gala,

xk6-browser doesn't transparently support shadow doms yet. We have a ticket open for a similar issue: #475.

For now you can use page.evaluate as a workaround to interact with elements in the shadow dom:

import { chromium } from 'k6/x/browser';

export default function () {
  const browser = chromium.launch({ headless: false });
  const page = browser.newPage();
  page.setViewportSize({ width: 1200, height: 1080 })

  page
    .goto('https://books-pwakit.appspot.com/', { waitUntil: 'networkidle' })
    .then(() => {
      page.evaluate(() => {
        document.querySelector('book-app').shadowRoot
        .querySelector('app-header')
        .querySelector('.toolbar-bottom')
        .querySelector('book-input-decorator')
        .querySelector('#input')
        .value = "Hello World";
      });
    })
    .finally(() => {
      page.close();
      browser.close();
    });
}

Cheers,
Ankur

[cmoniot-gala]

Hi @ankur22 ,

Thanks for the quick response and example code. This work around is great. I'm looking forward to seeing shadow dom query support in a future version.

Best,

Caleb