feat(selectors): selectors.register accepts function (#753)

docs/api.md

@@ -3034,11 +3034,12 @@ Contains the URL of the response.
 Selectors can be used to install custom selector engines. See [Working with selectors](#working-with-selectors) for more information.
 
 <!-- GEN:toc -->
-- [selectors.register(engineSource)](#selectorsregisterenginesource)
+- [selectors.register(engineFunction[, ...args])](#selectorsregisterenginefunction-args)
 <!-- GEN:stop -->
 
-#### selectors.register(engineSource)
-- `engineSource` <[string]> String which evaluates to a selector engine instance.
+#### selectors.register(engineFunction[, ...args])
+- `engineFunction` <[function]|[string]> Function which evaluates to a selector engine instance.
+- `...args` <...[Serializable]> Arguments to pass to `engineFunction`.
 - returns: <[Promise]>
 
 An example of registering selector engine which selects nodes based on tag name:
@@ -3066,8 +3067,7 @@ const { selectors, firefox } = require('playwright');  // Or 'chromium' or 'webk
     }
   });
 
-  // Construct an expression which evaluates to our selector instance.
-  await selectors.register(`(${createTagSelector.toString()})()`);
+  await selectors.register(createTagSelector);
 
   const browser = await firefox.launch();
   const context = await browser.newContext();

src/selectors.ts

@@ -17,6 +17,7 @@
 import * as zsSelectorEngineSource from './generated/zsSelectorEngineSource';
 import * as dom from './dom';
 import Injected from './injected/injected';
+import { helper } from './helper';
 
 let selectors: Selectors;
 
@@ -34,8 +35,9 @@ export class Selectors {
     this._sources = [zsSelectorEngineSource.source];
   }
 
-  async register(engineSource: string) {
-    this._sources.push(engineSource);
+  async register(engineFunction: string | Function, ...args: any[]) {
+    const source = helper.evaluationString(engineFunction, ...args);
+    this._sources.push(source);
     ++this._generation;
   }
 

test/queryselector.spec.js

@@ -539,20 +539,19 @@ module.exports.describe = function({testRunner, expect, selectors, FFOX, CHROMIU
       expect(await page.$eval('div', e => e.nodeName)).toBe('DIV');
       const error = await page.$('dummy=foo').catch(e => e);
       expect(error.message).toContain('Unknown engine dummy while parsing selector dummy=foo');
-      await selectors.register(`
-        ({
-          name: 'dummy',
-          create(root, target) {
-            return target.nodeName;
-          },
-          query(root, selector) {
-            return root.querySelector('dummy');
-          },
-          queryAll(root, selector) {
-            return Array.from(root.querySelectorAll('dummy'));
-          }
-        })
-      `);
+      const createDummySelector = (name) => ({
+        name,
+        create(root, target) {
+          return target.nodeName;
+        },
+        query(root, selector) {
+          return root.querySelector(name);
+        },
+        queryAll(root, selector) {
+          return Array.from(root.querySelectorAll(name));
+        }
+      });
+      await selectors.register(createDummySelector, 'dummy');
       expect(await page.$eval('dummy=foo', e => e.id)).toBe('d1');
       expect(await page.$eval('css=span >> dummy=foo', e => e.id)).toBe('d2');
     });