custome engine experiment

Author: George Griffiths

examples/playwright/custom-engine.js

@@ -1,4 +1,4 @@
-const { selectorEngine } = require("query-selector-shadow-dom/plugins/playwright");
+const { selectorEngine } = require("../../plugins/playwright");
 const playwright = require('playwright')
 
 const main = async () => {
@@ -10,7 +10,9 @@ const main = async () => {
 
   await page.goto('chrome://downloads')
 
-  await page.waitForSelector('shadow=#no-downloads span', {timeout: 3000})
+  const element = await page.waitForSelector('.//div', {timeout: 3000})
+  const span = await element.$$("div > .illustration + span")
+  console.log(span)
   await new Promise(resolve => setTimeout(resolve, 3000))   
 
   await page.close()

examples/puppeteer/clicking-elements.js

@@ -1,28 +1,22 @@
 const puppeteer = require('puppeteer');
-const path = require('path');
-const fs = require('fs');
+const { queryHandler } = require("../../plugins/puppeteer");
 (async () => {
     try {
+        puppeteer.__experimental_registerCustomQueryHandler('shadow', queryHandler);
         const browser = await puppeteer.launch({
-            headless: false
+            headless: false,
+            devtools: true
         })
         const page = await browser.newPage()
-        await page.goto('http://127.0.0.1:5500/test/')
-
-        // makes the library available in evaluate functions which run within the browser context
-        await page.addScriptTag({
-            path: path.join(__dirname, 'node_modules/query-selector-shadow-dom/dist/querySelectorShadowDom.js')
-        });
+        await page.goto('http://127.0.0.1:5501/test/')
 
 
         // ensure btn exists and return it
-        const btn = (await page.waitForFunction(() => {
-            const btn = querySelectorShadowDom.querySelectorDeep(".btn-in-shadow-dom");
-            return btn;
-        })).asElement();
+        const btn = await page.$("shadow/.btn-in-shadow-dom");
+        console.log(btn);
         await btn.click();
         // check btn was clicked (this page expected btn to change text of output)
-        const outputSpan = await page.evaluateHandle(() => querySelectorShadowDom.querySelectorDeep(".output"));
+        const outputSpan = await page.$("shadow/.output");
         const text = await page.evaluate((output) => output.innerText, outputSpan);
         // prints the text from the output
         console.log(text);