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)
+#### selectors.register(engineFunction[, ...args])
-- `engineSource` <[string]> String which evaluates to a selector engine instance.
+- `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);
-  await selectors.register(`(${createTagSelector.toString()})()`);
 
   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) {
+  async register(engineFunction: string | Function, ...args: any[]) {
-    this._sources.push(engineSource);
+    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(`
+      const createDummySelector = (name) => ({
-        ({
+        name,
-          name: 'dummy',
         create(root, target) {
           return target.nodeName;
         },
         query(root, selector) {
-            return root.querySelector('dummy');
+          return root.querySelector(name);
         },
         queryAll(root, selector) {
-            return Array.from(root.querySelectorAll('dummy'));
+          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');
     });