Merge pull request #19 from Georgegriff/playwright

add a plugin for playwright selector engine

Author: Georgegriff

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 .vscode
-coverage
+coverage
+.DS_Store

README.md

@@ -18,9 +18,28 @@ Both of the methods above accept a 2nd parameter, see section `Provide alternati
 
 ## Examples
 
+### Playwright
+
+Playwright works really nicely with this package.
+
+This module exposes a playwright `selectorEngine`: https://github.com/microsoft/playwright/blob/master/docs/api.md#selectorsregisterenginefunction-args
+
+```javascript
+const { selectorEngine } = require("query-selector-shadow-dom/plugins/playwright");
+const playwright = require('playwright');
+...
+await playwright.selectors.register(selectorEngine, { name: 'shadow' })
+...
+  await page.goto('chrome://downloads');
+  // shadow= allows a css query selector that automatically pierces shadow roots.
+  await page.waitForSelector('shadow=#no-downloads span', {timeout: 3000})
+```
+
+For a full example see: https://github.com/Georgegriff/query-selector-shadow-dom/blob/master/examples/playwright
+
 ### Puppeteer 
 
-There are some puppeteer examples available in the exampes folder of this repository.
+There are some puppeteer examples available in the examples folder of this repository.
 
 [Puppeteer examples](https://github.com/Georgegriff/query-selector-shadow-dom/blob/master/examples/puppeteer)
 

examples/playwright/custom-engine.js

@@ -0,0 +1,21 @@
+const { selectorEngine } = require("query-selector-shadow-dom/plugins/playwright");
+const playwright = require('playwright')
+
+const main = async () => {
+  await playwright.selectors.register(selectorEngine, { name: 'shadow' })
+
+  const browser = await playwright.chromium.launch({ headless: false})
+  const context = await browser.newContext({ viewport: null })
+  const page = await context.newPage()
+
+  await page.goto('chrome://downloads')
+
+  await page.waitForSelector('shadow=#no-downloads span', {timeout: 3000})
+  await new Promise(resolve => setTimeout(resolve, 3000))   
+
+  await page.close()
+  await context.close()
+  await browser.close()
+}
+
+main()

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "query-selector-shadow-dom",
-    "version": "0.3.4",
+    "version": "0.4.0",
     "description": "use querySelector syntax to search for nodes inside of (nested) shadow roots",
     "main": "src/querySelectorDeep.js",
     "scripts": {
@@ -15,7 +15,8 @@
     },
     "files": [
         "/src/",
-        "dist/querySelectorShadowDom.js"
+        "dist/querySelectorShadowDom.js",
+        "/plugins/"
     ],
     "author": "George Griffiths <GeorgeGriff>",
     "keywords": [
@@ -39,6 +40,7 @@
         "karma-rollup-preprocessor": "^6.0.0",
         "karma-spec-reporter": "0.0.32",
         "npm-watch": "^0.4.0",
+        "playwright": "^0.10.0",
         "puppeteer": "^2.0.0",
         "rollup": "^0.67.0",
         "rollup-plugin-babel": "^4.0.3",

package.json

@@ -0,0 +1,29 @@
+
+const fs = require("fs");
+const path = require("path");
+
+// load the library in UMD format which self executes and adds window.querySelectorShadowDom
+const querySelectorShadowDomUMD = fs.readFileSync(path.resolve(__dirname, "../../dist/querySelectorShadowDom.js"))
+
+// a string because playwright does a .toString on a selector engine and we need to
+// make sure that query-selector-shadow-dom is injected and loaded into the function closure
+const engineString =`
+    options = options || {};
+    const name = options.name || 'shadow';
+    ${querySelectorShadowDomUMD}
+    return {
+        name: name,
+        create(root, target) {
+            return undefined;
+        },
+        query(root, selector) {
+            return querySelectorShadowDom.querySelectorDeep(selector, root);
+        },
+        queryAll(root, selector) {
+            return querySelectorShadowDom.querySelectorAllDeep(selector, root);
+        }
+    }
+`
+const selectorEngine = new Function("options", engineString)
+
+module.exports = { selectorEngine };