Unable to register new selector engines

[thernstig]

const {
  selectorEngine,
} = require('query-selector-shadow-dom/plugins/playwright');
const playwright = require('playwright');

describe('Test', () => {
  it('tests', async () => {
    await page.goto('http://google.com/');
    console.log(playwright.selectors);
    await playwright.selectors.register(selectorEngine, { name: 'shadow' });
    console.log(playwright.selectors);
    await page.waitForSelector('shadow=body');
  });
});

I am using https://github.com/Georgegriff/query-selector-shadow-dom, as per above, to register a new selector engine. However, when invoking the waitForSelector it returns Evaluation failed: Error: Unknown engine shadow while parsing selector shadow=body.

I think this might be due to that I import playwright in the suite, when jest-playwright itself already imported it somewhere else. So how would I register a selector engine with jest-playwright?

cc @Georgegriff in case he has some input

[mmarkelov]

@thernstig thank you for report! I just need some time to think about implementation. I suppose that I could add selectors or whole playwright instance to global. And you could do something like this:

const {
    selectorEngine,
} = require('query-selector-shadow-dom/plugins/playwright');
const playwright = require('playwright');

describe('Test', () => {
    it('tests', async () => {
        await page.goto('http://google.com/');
        // it will be available from global
        await selectors.register(selectorEngine, { name: 'shadow' });
        await page.waitForSelector('shadow=body');
    });
});

[thernstig]

I'm happy with anything really, this is the major thing that stops me from going fully Playwright. The library I am using above is great, but eventually I hope Playwright will support shadow dom penetration by default. Going to make a feature request about it soon, as Web Components is growing out in the wild.

[mmarkelov]

@thernstig I just published 0.0.14.
So you can define selectors with jest-playwright.config.js:

const { selectorEngine } = require('query-selector-shadow-dom/plugins/playwright');

module.exports = {
	selectors: [
		{name: 'shadow', script: selectorEngine}
	],
	...
}

[thernstig]

It works! 😃