[Experimental] Puppeteer Custom Engine support

examples/puppeteer/clicking-elements.js

@@ -1,28 +1,21 @@
 const puppeteer = require('puppeteer');
-const path = require('path');
-const fs = require('fs');
+const { QueryHandler } = require("../../plugins/puppeteer");
 (async () => {
     try {
+        await 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')
-        });
-
-
         // ensure btn exists and return it
-        const btn = (await page.waitForFunction(() => {
-            const btn = querySelectorShadowDom.querySelectorDeep(".btn-in-shadow-dom");
-            return btn;
-        })).asElement();
+        await page.waitForSelector("shadow/.btn-in-shadow-dom");
+        const btn = await page.$("shadow/.btn-in-shadow-dom");
         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);

examples/puppeteer/custom-engine.js

@@ -0,0 +1,23 @@
+const {  QueryHandler } = require("../../plugins/puppeteer");
+const puppeteer = require('puppeteer')
+
+const main = async () => {
+  await puppeteer.__experimental_registerCustomQueryHandler('shadow', QueryHandler);
+
+  const browser = await puppeteer.chromium.launch({ headless: false})
+  const context = await browser.newContext({ viewport: null })
+  const page = await context.newPage()
+
+  await page.goto('chrome://downloads')
+
+  const element = await page.waitForSelector('shadow/div', {timeout: 3000})
+  const span = await element.$$("shadow/div > .illustration + span")
+  console.log(span)
+  await new Promise(resolve => setTimeout(resolve, 3000))   
+
+  await page.close()
+  await context.close()
+  await browser.close()
+}
+
+main()

examples/puppeteer/multiple-elements.js

@@ -0,0 +1,23 @@
+const puppeteer = require('puppeteer');
+const { QueryHandler } = require("../../plugins/puppeteer");
+(async () => {
+    try {
+        await puppeteer.__experimental_registerCustomQueryHandler('shadow', QueryHandler);
+        const browser = await puppeteer.launch({
+            headless: false
+        })
+        const page = await browser.newPage()
+        await page.goto('http://127.0.0.1:5500/test/')
+        await page.waitForSelector("shadow/.btn-in-shadow-dom")
+        const elements = await page.$$("*");
+        const elementsShadow = await page.$$("shadow/*");
+        console.log("All Elements on Page Excluding Shadow Dom", elements.length);
+        console.log("All Elements on Page Including Shadow Dom", elementsShadow.length);
+
+        await browser.close()
+
+    } catch (e) {
+        console.error(e);
+    }
+
+})()

examples/puppeteer/typing-to-elements.js

@@ -1,29 +1,20 @@
 const puppeteer = require('puppeteer');
-const path = require('path');
-const fs = require('fs');
+const { QueryHandler } = require("../../plugins/puppeteer");
 (async () => {
     try {
+        await puppeteer.__experimental_registerCustomQueryHandler('shadow', QueryHandler);
         const browser = await puppeteer.launch({
             headless: false
         })
         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')
-        });
 
+        const inputElement = await page.waitForSelector("shadow/#type-to-input");
 
-        // returns an https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-elementhandle
-        const inputElement = (await page.waitForFunction(() => {
-            return querySelectorShadowDom.querySelectorDeep("#type-to-input");
-        })).asElement();
-
-        // https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#elementhandletypetext-options
         await inputElement.type("Typed text to input");
 
         const value = await page.evaluate(inputElement => inputElement.value, inputElement);
-        console.log(value);
+        console.log("Value", value);
 
         await browser.close()