From 99b7aaace8c3f5090ddf91dcf14408a169286202 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Fri, 15 May 2020 15:21:49 -0700
Subject: [PATCH] chore: refactor injected script harness (#2259)

---
 src/chromium/crExecutionContext.ts            |   6 +-
 src/chromium/crPage.ts                        |   6 +-
 src/dom.ts                                    |  37 +-
 src/firefox/ffExecutionContext.ts             |   6 +-
 src/firefox/ffPage.ts                         |   8 +-
 src/frames.ts                                 |   2 +-
 .../{injected.ts => injectedScript.ts}        |  92 +-
 ...ig.js => injectedScript.webpack.config.js} |   6 +-
 src/injected/selectorEvaluator.ts             |  97 ---
 src/injected/zsSelectorEngine.ts              | 794 ------------------
 .../zsSelectorEngine.webpack.config.js        |  45 -
 src/javascript.ts                             |  16 +-
 src/selectors.ts                              | 116 +--
 src/types.ts                                  |   6 +
 src/webkit/wkExecutionContext.ts              |   4 +-
 src/webkit/wkPage.ts                          |   6 +-
 src/webkit/wkWorkers.ts                       |   2 +-
 test/queryselector.spec.js                    | 133 ---
 utils/runWebpack.js                           |   3 +-
 19 files changed, 186 insertions(+), 1199 deletions(-)
 rename src/injected/{injected.ts => injectedScript.ts} (79%)
 rename src/injected/{selectorEvaluator.webpack.config.js => injectedScript.webpack.config.js} (85%)
 delete mode 100644 src/injected/selectorEvaluator.ts
 delete mode 100644 src/injected/zsSelectorEngine.ts
 delete mode 100644 src/injected/zsSelectorEngine.webpack.config.js

diff --git a/src/chromium/crExecutionContext.ts b/src/chromium/crExecutionContext.ts
index 845eac0063..90cf79b174 100644
--- a/src/chromium/crExecutionContext.ts
+++ b/src/chromium/crExecutionContext.ts
@@ -49,7 +49,7 @@ export class CRExecutionContext implements js.ExecutionContextDelegate {
       }).catch(rewriteError);
       if (exceptionDetails)
         throw new Error('Evaluation failed: ' + getExceptionMessage(exceptionDetails));
-      return returnByValue ? valueFromRemoteObject(remoteObject) : context._createHandle(remoteObject);
+      return returnByValue ? valueFromRemoteObject(remoteObject) : context.createHandle(remoteObject);
     }
 
     if (typeof pageFunction !== 'function')
@@ -91,7 +91,7 @@ export class CRExecutionContext implements js.ExecutionContextDelegate {
       }).catch(rewriteError);
       if (exceptionDetails)
         throw new Error('Evaluation failed: ' + getExceptionMessage(exceptionDetails));
-      return returnByValue ? valueFromRemoteObject(remoteObject) : context._createHandle(remoteObject);
+      return returnByValue ? valueFromRemoteObject(remoteObject) : context.createHandle(remoteObject);
     } finally {
       dispose();
     }
@@ -122,7 +122,7 @@ export class CRExecutionContext implements js.ExecutionContextDelegate {
     for (const property of response.result) {
       if (!property.enumerable)
         continue;
-      result.set(property.name, handle._context._createHandle(property.value));
+      result.set(property.name, handle._context.createHandle(property.value));
     }
     return result;
   }
diff --git a/src/chromium/crPage.ts b/src/chromium/crPage.ts
index 8042e39e2c..1a7cd8e386 100644
--- a/src/chromium/crPage.ts
+++ b/src/chromium/crPage.ts
@@ -577,7 +577,7 @@ class FrameSession {
       session.send('Runtime.runIfWaitingForDebugger'),
     ]).catch(logError(this._page));  // This might fail if the target is closed before we initialize.
     session.on('Runtime.consoleAPICalled', event => {
-      const args = event.args.map(o => worker._existingExecutionContext!._createHandle(o));
+      const args = event.args.map(o => worker._existingExecutionContext!.createHandle(o));
       this._page._addConsoleMessage(event.type, args, toConsoleMessageLocation(event.stackTrace));
     });
     session.on('Runtime.exceptionThrown', exception => this._page.emit(Events.Page.PageError, exceptionToError(exception.exceptionDetails)));
@@ -608,7 +608,7 @@ class FrameSession {
       return;
     }
     const context = this._contextIdToContext.get(event.executionContextId)!;
-    const values = event.args.map(arg => context._createHandle(arg));
+    const values = event.args.map(arg => context.createHandle(arg));
     this._page._addConsoleMessage(event.type, values, toConsoleMessageLocation(event.stackTrace));
   }
 
@@ -846,7 +846,7 @@ class FrameSession {
     }).catch(logError(this._page));
     if (!result || result.object.subtype === 'null')
       throw new Error('Unable to adopt element handle from a different document');
-    return to._createHandle(result.object).asElement()!;
+    return to.createHandle(result.object).asElement()!;
   }
 }
 
diff --git a/src/dom.ts b/src/dom.ts
index 576ff82848..745c352131 100644
--- a/src/dom.ts
+++ b/src/dom.ts
@@ -20,7 +20,8 @@ import * as path from 'path';
 import * as util from 'util';
 import * as frames from './frames';
 import { assert, helper } from './helper';
-import { Injected, InjectedResult } from './injected/injected';
+import InjectedScript from './injected/injectedScript';
+import * as injectedScriptSource from './generated/injectedScriptSource';
 import * as input from './input';
 import * as js from './javascript';
 import { Page } from './page';
@@ -52,29 +53,35 @@ export class FrameExecutionContext extends js.ExecutionContext {
     this.frame = frame;
   }
 
-  _adoptIfNeeded(handle: js.JSHandle): Promise<js.JSHandle> | null {
+  adoptIfNeeded(handle: js.JSHandle): Promise<js.JSHandle> | null {
     if (handle instanceof ElementHandle && handle._context !== this)
       return this.frame._page._delegate.adoptElementHandle(handle, this);
     return null;
   }
 
-  async _doEvaluateInternal(returnByValue: boolean, waitForNavigations: boolean, pageFunction: string | Function, ...args: any[]): Promise<any> {
+  async doEvaluateInternal(returnByValue: boolean, waitForNavigations: boolean, pageFunction: string | Function, ...args: any[]): Promise<any> {
     return await this.frame._page._frameManager.waitForSignalsCreatedBy(async () => {
       return this._delegate.evaluate(this, returnByValue, pageFunction, ...args);
     }, Number.MAX_SAFE_INTEGER, waitForNavigations ? undefined : { noWaitAfter: true });
   }
 
-  _createHandle(remoteObject: any): js.JSHandle {
+  createHandle(remoteObject: any): js.JSHandle {
     if (this.frame._page._delegate.isElementHandle(remoteObject))
       return new ElementHandle(this, remoteObject);
-    return super._createHandle(remoteObject);
+    return super.createHandle(remoteObject);
   }
 
-  _injected(): Promise<js.JSHandle<Injected>> {
+  injectedScript(): Promise<js.JSHandle<InjectedScript>> {
     if (!this._injectedPromise) {
-      this._injectedPromise = selectors._prepareEvaluator(this).then(evaluator => {
-        return this.evaluateHandleInternal(evaluator => evaluator.injected, evaluator);
-      });
+      const custom: string[] = [];
+      for (const [name, { source }] of selectors._engines)
+        custom.push(`{ name: '${name}', engine: (${source}) }`);
+      const source = `
+        new (${injectedScriptSource.source})([
+          ${custom.join(',\n')}
+        ])
+      `;
+      this._injectedPromise = this.doEvaluateInternal(false /* returnByValue */, false /* waitForNavigations */, source);
     }
     return this._injectedPromise;
   }
@@ -94,14 +101,14 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
     return this;
   }
 
-  async _evaluateInMain<R, Arg>(pageFunction: types.FuncOn<{ injected: Injected, node: T }, Arg, R>, arg: Arg): Promise<R> {
+  async _evaluateInMain<R, Arg>(pageFunction: types.FuncOn<{ injected: InjectedScript, node: T }, Arg, R>, arg: Arg): Promise<R> {
     const main = await this._context.frame._mainContext();
-    return main._doEvaluateInternal(true /* returnByValue */, true /* waitForNavigations */, pageFunction, { injected: await main._injected(), node: this }, arg);
+    return main.doEvaluateInternal(true /* returnByValue */, true /* waitForNavigations */, pageFunction, { injected: await main.injectedScript(), node: this }, arg);
   }
 
-  async _evaluateInUtility<R, Arg>(pageFunction: types.FuncOn<{ injected: Injected, node: T }, Arg, R>, arg: Arg): Promise<R> {
+  async _evaluateInUtility<R, Arg>(pageFunction: types.FuncOn<{ injected: InjectedScript, node: T }, Arg, R>, arg: Arg): Promise<R> {
     const utility = await this._context.frame._utilityContext();
-    return utility._doEvaluateInternal(true /* returnByValue */, true /* waitForNavigations */, pageFunction, { injected: await utility._injected(), node: this }, arg);
+    return utility.doEvaluateInternal(true /* returnByValue */, true /* waitForNavigations */, pageFunction, { injected: await utility.injectedScript(), node: this }, arg);
   }
 
   async ownerFrame(): Promise<frames.Frame | null> {
@@ -352,7 +359,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
   async setInputFiles(files: string | types.FilePayload | string[] | types.FilePayload[], options?: types.NavigatingActionWaitOptions) {
     this._page._log(inputLog, `elementHandle.setInputFiles(...)`);
     const deadline = this._page._timeoutSettings.computeDeadline(options);
-    const injectedResult = await this._evaluateInUtility(({ node }): InjectedResult<boolean> => {
+    const injectedResult = await this._evaluateInUtility(({ node }): types.InjectedScriptResult<boolean> => {
       if (node.nodeType !== Node.ELEMENT_NODE || (node as Node as Element).tagName !== 'INPUT')
         return { status: 'error', error: 'Node is not an HTMLInputElement' };
       if (!node.isConnected)
@@ -500,7 +507,7 @@ export function toFileTransferPayload(files: types.FilePayload[]): types.FileTra
   }));
 }
 
-function handleInjectedResult<T = undefined>(injectedResult: InjectedResult<T>, timeoutMessage: string): T {
+function handleInjectedResult<T = undefined>(injectedResult: types.InjectedScriptResult<T>, timeoutMessage: string): T {
   if (injectedResult.status === 'notconnected')
     throw new NotConnectedError();
   if (injectedResult.status === 'timeout')
diff --git a/src/firefox/ffExecutionContext.ts b/src/firefox/ffExecutionContext.ts
index 76c8ff25b2..768636b35e 100644
--- a/src/firefox/ffExecutionContext.ts
+++ b/src/firefox/ffExecutionContext.ts
@@ -39,7 +39,7 @@ export class FFExecutionContext implements js.ExecutionContextDelegate {
       checkException(payload.exceptionDetails);
       if (returnByValue)
         return deserializeValue(payload.result!);
-      return context._createHandle(payload.result);
+      return context.createHandle(payload.result);
     }
     if (typeof pageFunction !== 'function')
       throw new Error(`Expected to get |string| or |function| as the first argument, but got "${pageFunction}" instead.`);
@@ -71,7 +71,7 @@ export class FFExecutionContext implements js.ExecutionContextDelegate {
       checkException(payload.exceptionDetails);
       if (returnByValue)
         return deserializeValue(payload.result!);
-      return context._createHandle(payload.result);
+      return context.createHandle(payload.result);
     } finally {
       dispose();
     }
@@ -97,7 +97,7 @@ export class FFExecutionContext implements js.ExecutionContextDelegate {
     });
     const result = new Map();
     for (const property of response.properties)
-      result.set(property.name, handle._context._createHandle(property.value));
+      result.set(property.name, handle._context.createHandle(property.value));
     return result;
   }
 
diff --git a/src/firefox/ffPage.ts b/src/firefox/ffPage.ts
index a5891c95ad..b1505db73f 100644
--- a/src/firefox/ffPage.ts
+++ b/src/firefox/ffPage.ts
@@ -184,7 +184,7 @@ export class FFPage implements PageDelegate {
   _onConsole(payload: Protocol.Runtime.consolePayload) {
     const {type, args, executionContextId, location} = payload;
     const context = this._contextIdToContext.get(executionContextId)!;
-    this._page._addConsoleMessage(type, args.map(arg => context._createHandle(arg)), location);
+    this._page._addConsoleMessage(type, args.map(arg => context.createHandle(arg)), location);
   }
 
   _onDialogOpened(params: Protocol.Page.dialogOpenedPayload) {
@@ -205,7 +205,7 @@ export class FFPage implements PageDelegate {
   async _onFileChooserOpened(payload: Protocol.Page.fileChooserOpenedPayload) {
     const {executionContextId, element} = payload;
     const context = this._contextIdToContext.get(executionContextId)!;
-    const handle = context._createHandle(element).asElement()!;
+    const handle = context.createHandle(element).asElement()!;
     this._page._onFileChooserOpened(handle);
   }
 
@@ -229,7 +229,7 @@ export class FFPage implements PageDelegate {
     workerSession.on('Runtime.console', event => {
       const {type, args, location} = event;
       const context = worker._existingExecutionContext!;
-      this._page._addConsoleMessage(type, args.map(arg => context._createHandle(arg)), location);
+      this._page._addConsoleMessage(type, args.map(arg => context.createHandle(arg)), location);
     });
     // Note: we receive worker exceptions directly from the page.
   }
@@ -457,7 +457,7 @@ export class FFPage implements PageDelegate {
     });
     if (!result.remoteObject)
       throw new Error('Unable to adopt element handle from a different document');
-    return to._createHandle(result.remoteObject) as dom.ElementHandle<T>;
+    return to.createHandle(result.remoteObject) as dom.ElementHandle<T>;
   }
 
   async getAccessibilityTree(needle?: dom.ElementHandle) {
diff --git a/src/frames.ts b/src/frames.ts
index 0c7d6b8fb1..5bbef9a3d9 100644
--- a/src/frames.ts
+++ b/src/frames.ts
@@ -786,7 +786,7 @@ export class Frame {
     const task = async (context: dom.FrameExecutionContext) => context.evaluateHandleInternal(({ injected, predicateBody, polling, timeout, arg }) => {
       const innerPredicate = new Function('arg', predicateBody);
       return injected.poll(polling, timeout, () => innerPredicate(arg));
-    }, { injected: await context._injected(), predicateBody, polling, timeout: helper.timeUntilDeadline(deadline), arg });
+    }, { injected: await context.injectedScript(), predicateBody, polling, timeout: helper.timeUntilDeadline(deadline), arg });
     return this._scheduleRerunnableTask(task, 'main', deadline) as any as types.SmartHandle<R>;
   }
 
diff --git a/src/injected/injected.ts b/src/injected/injectedScript.ts
similarity index 79%
rename from src/injected/injected.ts
rename to src/injected/injectedScript.ts
index 38a2b1d71e..9096675700 100644
--- a/src/injected/injected.ts
+++ b/src/injected/injectedScript.ts
@@ -15,15 +15,83 @@
  */
 
 import * as types from '../types';
+import { createAttributeEngine } from './attributeSelectorEngine';
+import { createCSSEngine } from './cssSelectorEngine';
+import { SelectorEngine, SelectorRoot } from './selectorEngine';
+import { createTextSelector } from './textSelectorEngine';
+import { XPathEngine } from './xpathSelectorEngine';
 
 type Predicate<T> = () => T;
-export type InjectedResult<T = undefined> =
-  (T extends undefined ? { status: 'success', value?: T} : { status: 'success', value: T }) |
-  { status: 'notconnected' } |
-  { status: 'timeout' } |
-  { status: 'error', error: string };
 
-export class Injected {
+export default class InjectedScript {
+  readonly engines: Map<string, SelectorEngine>;
+
+  constructor(customEngines: { name: string, engine: SelectorEngine}[]) {
+    this.engines = new Map();
+    // Note: keep predefined names in sync with Selectors class.
+    this.engines.set('css', createCSSEngine(true));
+    this.engines.set('css:light', createCSSEngine(false));
+    this.engines.set('xpath', XPathEngine);
+    this.engines.set('xpath:light', XPathEngine);
+    this.engines.set('text', createTextSelector(true));
+    this.engines.set('text:light', createTextSelector(false));
+    this.engines.set('id', createAttributeEngine('id', true));
+    this.engines.set('id:light', createAttributeEngine('id', false));
+    this.engines.set('data-testid', createAttributeEngine('data-testid', true));
+    this.engines.set('data-testid:light', createAttributeEngine('data-testid', false));
+    this.engines.set('data-test-id', createAttributeEngine('data-test-id', true));
+    this.engines.set('data-test-id:light', createAttributeEngine('data-test-id', false));
+    this.engines.set('data-test', createAttributeEngine('data-test', true));
+    this.engines.set('data-test:light', createAttributeEngine('data-test', false));
+    for (const {name, engine} of customEngines)
+      this.engines.set(name, engine);
+  }
+
+  querySelector(selector: types.ParsedSelector, root: Node): Element | undefined {
+    if (!(root as any)['querySelector'])
+      throw new Error('Node is not queryable.');
+    return this._querySelectorRecursively(root as SelectorRoot, selector, 0);
+  }
+
+  private _querySelectorRecursively(root: SelectorRoot, selector: types.ParsedSelector, index: number): Element | undefined {
+    const current = selector.parts[index];
+    if (index === selector.parts.length - 1)
+      return this.engines.get(current.name)!.query(root, current.body);
+    const all = this.engines.get(current.name)!.queryAll(root, current.body);
+    for (const next of all) {
+      const result = this._querySelectorRecursively(next, selector, index + 1);
+      if (result)
+        return selector.capture === index ? next : result;
+    }
+  }
+
+  querySelectorAll(selector: types.ParsedSelector, root: Node): Element[] {
+    if (!(root as any)['querySelectorAll'])
+      throw new Error('Node is not queryable.');
+    const capture = selector.capture === undefined ? selector.parts.length - 1 : selector.capture;
+    // Query all elements up to the capture.
+    const partsToQuerAll = selector.parts.slice(0, capture + 1);
+    // Check they have a descendant matching everything after the capture.
+    const partsToCheckOne = selector.parts.slice(capture + 1);
+    let set = new Set<SelectorRoot>([ root as SelectorRoot ]);
+    for (const { name, body } of partsToQuerAll) {
+      const newSet = new Set<Element>();
+      for (const prev of set) {
+        for (const next of this.engines.get(name)!.queryAll(prev, body)) {
+          if (newSet.has(next))
+            continue;
+          newSet.add(next);
+        }
+      }
+      set = newSet;
+    }
+    const candidates = Array.from(set) as Element[];
+    if (!partsToCheckOne.length)
+      return candidates;
+    const partial = { parts: partsToCheckOne };
+    return candidates.filter(e => !!this._querySelectorRecursively(e, partial, 0));
+  }
+
   isVisible(element: Element): boolean {
     // Note: this logic should be similar to waitForDisplayedAtStablePosition() to avoid surprises.
     if (!element.ownerDocument || !element.ownerDocument.defaultView)
@@ -95,7 +163,7 @@ export class Injected {
     return { left: parseInt(style.borderLeftWidth || '', 10), top: parseInt(style.borderTopWidth || '', 10) };
   }
 
-  selectOptions(node: Node, optionsToSelect: (Node | types.SelectOption)[]): InjectedResult<string[]> {
+  selectOptions(node: Node, optionsToSelect: (Node | types.SelectOption)[]): types.InjectedScriptResult<string[]> {
     if (node.nodeName.toLowerCase() !== 'select')
       return { status: 'error', error: 'Element is not a <select> element.' };
     if (!node.isConnected)
@@ -126,7 +194,7 @@ export class Injected {
     return { status: 'success', value: options.filter(option => option.selected).map(option => option.value) };
   }
 
-  fill(node: Node, value: string): InjectedResult<boolean> {
+  fill(node: Node, value: string): types.InjectedScriptResult<boolean> {
     if (node.nodeType !== Node.ELEMENT_NODE)
       return { status: 'error', error: 'Node is not of type HTMLElement' };
     const element = node as HTMLElement;
@@ -175,7 +243,7 @@ export class Injected {
     return result;
   }
 
-  selectText(node: Node): InjectedResult {
+  selectText(node: Node): types.InjectedScriptResult {
     if (node.nodeType !== Node.ELEMENT_NODE)
       return { status: 'error', error: 'Node is not of type HTMLElement' };
     if (!node.isConnected)
@@ -207,7 +275,7 @@ export class Injected {
     return { status: 'success' };
   }
 
-  focusNode(node: Node): InjectedResult {
+  focusNode(node: Node): types.InjectedScriptResult {
     if (!node.isConnected)
       return { status: 'notconnected' };
     if (!(node as any)['focus'])
@@ -262,7 +330,7 @@ export class Injected {
     input.dispatchEvent(new Event('change', { 'bubbles': true }));
   }
 
-  async waitForDisplayedAtStablePosition(node: Node, rafCount: number, timeout: number): Promise<InjectedResult> {
+  async waitForDisplayedAtStablePosition(node: Node, rafCount: number, timeout: number): Promise<types.InjectedScriptResult> {
     if (!node.isConnected)
       return { status: 'notconnected' };
     const element = node.nodeType === Node.ELEMENT_NODE ? (node as Element) : node.parentElement;
@@ -305,7 +373,7 @@ export class Injected {
     return { status: result === 'notconnected' ? 'notconnected' : (result ? 'success' : 'timeout') };
   }
 
-  checkHitTargetAt(node: Node, point: types.Point): InjectedResult<boolean> {
+  checkHitTargetAt(node: Node, point: types.Point): types.InjectedScriptResult<boolean> {
     let element = node.nodeType === Node.ELEMENT_NODE ? (node as Element) : node.parentElement;
     while (element && window.getComputedStyle(element).pointerEvents === 'none')
       element = element.parentElement;
diff --git a/src/injected/selectorEvaluator.webpack.config.js b/src/injected/injectedScript.webpack.config.js
similarity index 85%
rename from src/injected/selectorEvaluator.webpack.config.js
rename to src/injected/injectedScript.webpack.config.js
index 1cd60a020c..c1cd15cf75 100644
--- a/src/injected/selectorEvaluator.webpack.config.js
+++ b/src/injected/injectedScript.webpack.config.js
@@ -18,7 +18,7 @@ const path = require('path');
 const InlineSource = require('./webpack-inline-source-plugin.js');
 
 module.exports = {
-  entry: path.join(__dirname, 'selectorEvaluator.ts'),
+  entry: path.join(__dirname, 'injectedScript.ts'),
   devtool: 'source-map',
   module: {
     rules: [
@@ -36,10 +36,10 @@ module.exports = {
     extensions: [ '.tsx', '.ts', '.js' ]
   },
   output: {
-    filename: 'selectorEvaluatorSource.js',
+    filename: 'injectedScriptSource.js',
     path: path.resolve(__dirname, '../../lib/injected/packed')
   },
   plugins: [
-    new InlineSource(path.join(__dirname, '..', 'generated', 'selectorEvaluatorSource.ts')),
+    new InlineSource(path.join(__dirname, '..', 'generated', 'injectedScriptSource.ts')),
   ]
 };
diff --git a/src/injected/selectorEvaluator.ts b/src/injected/selectorEvaluator.ts
deleted file mode 100644
index 1234552c2e..0000000000
--- a/src/injected/selectorEvaluator.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import * as types from '../types';
-import { createAttributeEngine } from './attributeSelectorEngine';
-import { createCSSEngine } from './cssSelectorEngine';
-import { Injected } from './injected';
-import { SelectorEngine, SelectorRoot } from './selectorEngine';
-import { createTextSelector } from './textSelectorEngine';
-import { XPathEngine } from './xpathSelectorEngine';
-
-class SelectorEvaluator {
-  readonly engines: Map<string, SelectorEngine>;
-  readonly injected: Injected;
-
-  constructor(customEngines: { name: string, engine: SelectorEngine}[]) {
-    this.injected = new Injected();
-    this.engines = new Map();
-    // Note: keep predefined names in sync with Selectors class.
-    this.engines.set('css', createCSSEngine(true));
-    this.engines.set('css:light', createCSSEngine(false));
-    this.engines.set('xpath', XPathEngine);
-    this.engines.set('xpath:light', XPathEngine);
-    this.engines.set('text', createTextSelector(true));
-    this.engines.set('text:light', createTextSelector(false));
-    this.engines.set('id', createAttributeEngine('id', true));
-    this.engines.set('id:light', createAttributeEngine('id', false));
-    this.engines.set('data-testid', createAttributeEngine('data-testid', true));
-    this.engines.set('data-testid:light', createAttributeEngine('data-testid', false));
-    this.engines.set('data-test-id', createAttributeEngine('data-test-id', true));
-    this.engines.set('data-test-id:light', createAttributeEngine('data-test-id', false));
-    this.engines.set('data-test', createAttributeEngine('data-test', true));
-    this.engines.set('data-test:light', createAttributeEngine('data-test', false));
-    for (const {name, engine} of customEngines)
-      this.engines.set(name, engine);
-  }
-
-  querySelector(selector: types.ParsedSelector, root: Node): Element | undefined {
-    if (!(root as any)['querySelector'])
-      throw new Error('Node is not queryable.');
-    return this._querySelectorRecursively(root as SelectorRoot, selector, 0);
-  }
-
-  private _querySelectorRecursively(root: SelectorRoot, selector: types.ParsedSelector, index: number): Element | undefined {
-    const current = selector.parts[index];
-    if (index === selector.parts.length - 1)
-      return this.engines.get(current.name)!.query(root, current.body);
-    const all = this.engines.get(current.name)!.queryAll(root, current.body);
-    for (const next of all) {
-      const result = this._querySelectorRecursively(next, selector, index + 1);
-      if (result)
-        return selector.capture === index ? next : result;
-    }
-  }
-
-  querySelectorAll(selector: types.ParsedSelector, root: Node): Element[] {
-    if (!(root as any)['querySelectorAll'])
-      throw new Error('Node is not queryable.');
-    const capture = selector.capture === undefined ? selector.parts.length - 1 : selector.capture;
-    // Query all elements up to the capture.
-    const partsToQuerAll = selector.parts.slice(0, capture + 1);
-    // Check they have a descendant matching everything after the capture.
-    const partsToCheckOne = selector.parts.slice(capture + 1);
-    let set = new Set<SelectorRoot>([ root as SelectorRoot ]);
-    for (const { name, body } of partsToQuerAll) {
-      const newSet = new Set<Element>();
-      for (const prev of set) {
-        for (const next of this.engines.get(name)!.queryAll(prev, body)) {
-          if (newSet.has(next))
-            continue;
-          newSet.add(next);
-        }
-      }
-      set = newSet;
-    }
-    const candidates = Array.from(set) as Element[];
-    if (!partsToCheckOne.length)
-      return candidates;
-    const partial = { parts: partsToCheckOne };
-    return candidates.filter(e => !!this._querySelectorRecursively(e, partial, 0));
-  }
-}
-
-export default SelectorEvaluator;
diff --git a/src/injected/zsSelectorEngine.ts b/src/injected/zsSelectorEngine.ts
deleted file mode 100644
index 1ec746e229..0000000000
--- a/src/injected/zsSelectorEngine.ts
+++ /dev/null
@@ -1,794 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { SelectorEngine, SelectorType, SelectorRoot } from './selectorEngine';
-
-type Token = {
-  combinator: '' | '>' | '~' | '^',
-  index?: number,
-  text?: string,
-  css?: string,
-};
-
-function tokenize(selector: string): Token[] | number {
-  const tokens: Token[] = [];
-  let pos = 0;
-
-  const skipWhitespace = () => {
-    while (pos < selector.length && selector[pos] === ' ')
-      pos++;
-  };
-
-  while (pos < selector.length) {
-    skipWhitespace();
-    if (pos === selector.length)
-      break;
-    if (!tokens.length && '^>~'.includes(selector[pos]))
-      return pos;
-
-    const token: Token = { combinator: '' };
-
-    if (selector[pos] === '^') {
-      token.combinator = '^';
-      tokens.push(token);
-      pos++;
-      continue;
-    }
-
-    if (selector[pos] === '>') {
-      token.combinator = '>';
-      pos++;
-      skipWhitespace();
-      if (pos === selector.length)
-        return pos;
-    } else if (selector[pos] === '~') {
-      token.combinator = '~';
-      pos++;
-      skipWhitespace();
-      if (pos === selector.length)
-        return pos;
-    }
-
-    let text = '';
-    let end = pos;
-    let stringQuote: string | undefined;
-    const isText = '`"\''.includes(selector[pos]);
-    while (end < selector.length) {
-      if (stringQuote) {
-        if (selector[end] === '\\' && end + 1 < selector.length) {
-          if (!isText)
-            text += selector[end];
-          text += selector[end + 1];
-          end += 2;
-        } else if (selector[end] === stringQuote) {
-          text += selector[end++];
-          stringQuote = undefined;
-          if (isText)
-            break;
-        } else {
-          text += selector[end++];
-        }
-      } else if (' >~^#'.includes(selector[end])) {
-        break;
-      } else if ('`"\''.includes(selector[end])) {
-        stringQuote = selector[end];
-        text += selector[end++];
-      } else {
-        text += selector[end++];
-      }
-    }
-    if (stringQuote)
-      return end;
-    if (isText)
-      token.text = JSON.stringify(text.substring(1, text.length - 1));
-    else
-      token.css = text;
-
-    pos = end;
-
-    if (pos < selector.length && selector[pos] === '#') {
-      pos++;
-      let end = pos;
-      while (end < selector.length && selector[end] >= '0' && selector[end] <= '9')
-        end++;
-      if (end === pos)
-        return pos;
-      const num = Number(selector.substring(pos, end));
-      if (isNaN(num))
-        return pos;
-      token.index = num;
-      pos = end;
-    }
-
-    tokens.push(token);
-  }
-
-  return tokens;
-}
-
-function pathFromRoot(root: SelectorRoot, targetElement: Element): (Element | SelectorRoot)[] {
-  let target: Element | SelectorRoot = targetElement;
-  const path: (Element | SelectorRoot)[] = [target];
-  while (target !== root) {
-    if (!target.parentNode || target.parentNode.nodeType !== 1 /* Node.ELEMENT_NODE */ && target.parentNode.nodeType !== 11 /* Node.DOCUMENT_FRAGMENT_NODE */)
-      throw new Error('Target does not belong to the root subtree');
-    target = target.parentNode as (Element | SelectorRoot);
-    path.push(target);
-  }
-  path.reverse();
-  return path;
-}
-
-
-// This is a map from a list element (parent) to a number of contained lists (immediate children).
-//
-// Example:
-// <div>
-//   <span class=a><img/><img/></span>
-//   <span class=a/>
-//   <span class=a/>
-//   <br>
-//   <div class=b/>
-//   <div class=b/>
-//   <div class=b/>
-// </div>
-//
-// Here we might have the following:
-//   div -> [[span, span, span], [div, div, div]]
-//   span -> [[img, img]]
-type ListsMap = Map<Element | SelectorRoot, Element[][]>;
-
-function detectLists(root: SelectorRoot, shouldConsider: (e: Element | SelectorRoot) => boolean, getBox: (e: Element) => ClientRect): ListsMap {
-  const lists: ListsMap = new Map();
-
-  const add = (map: Map<string, Element[]>, element: Element, key: string): void => {
-    let list = map.get(key);
-    if (!list) {
-      list = [];
-      map.set(key, list);
-    }
-    list.push(element);
-  };
-
-  const mark = (parent: Element | SelectorRoot, map: Map<string, Element[]>, used: Set<Element>): void => {
-    for (let list of map.values()) {
-      list = list.filter(item => !used.has(item));
-      if (list.length < 2)
-        continue;
-      let collection = lists.get(parent);
-      if (!collection) {
-        collection = [];
-        lists.set(parent, collection);
-      }
-      collection.push(list);
-      list.forEach(item => used.add(item));
-    }
-  };
-
-  // hashes list: s, vh, v, h
-  const kHashes = 4;
-  const visit = (element: Element | SelectorRoot, produceHashes: boolean): { size: number, hashes?: string[] } => {
-    const consider = shouldConsider(element);
-    let size = 1;
-
-    let maps: Map<string, Element[]>[] | undefined;
-    if (consider)
-      maps = new Array(kHashes).fill(0).map(_ => new Map());
-
-    let structure: string[] | undefined;
-    if (produceHashes)
-      structure = [element.nodeName];
-
-    for (let child = element.firstElementChild; child; child = child.nextElementSibling) {
-      const childResult = visit(child, consider);
-      size += childResult.size;
-      if (consider) {
-        for (let i = 0; i < childResult.hashes!.length; i++) {
-          if (childResult.hashes![i])
-            add(maps![i], child, childResult.hashes![i]);
-        }
-      }
-      if (structure)
-        structure.push(child.nodeName);
-    }
-
-    if (consider) {
-      const used = new Set<Element>();
-      maps!.forEach(map => mark(element, map, used));
-    }
-
-    let hashes: string[] | undefined;
-    if (produceHashes) {
-      const box = getBox(element as Element);
-      hashes = [];
-      hashes.push((structure!.length >= 4) || (size >= 10) ? structure!.join('') : '');
-      hashes.push(`${element.nodeName},${(size / 3) | 0},${box.height | 0},${box.width | 0}`);
-      if (size <= 5)
-        hashes.push(`${element.nodeName},${(size / 3) | 0},${box.width | 0},${box.left | 0}`);
-      else
-        hashes.push(`${element.nodeName},${(size / 3) | 0},${box.width | 0},${box.left | 0},${2 * Math.log(box.height) | 0}`);
-      if (size <= 5)
-        hashes.push(`${element.nodeName},${(size / 3) | 0},${box.height | 0},${box.top | 0}`);
-      else
-        hashes.push(`${element.nodeName},${(size / 3) | 0},${box.height | 0},${box.top | 0},${2 * Math.log(box.width) | 0}`);
-    }
-    return { size, hashes };
-  };
-  visit(root, false);
-
-  return lists;
-}
-
-type Step = {
-  token: Token;
-  // Element we point at.
-  element: Element | SelectorRoot;
-  // Distance between element and (lca between target and element).
-  depth: number;
-  // One step score.
-  score: number;
-  // Total path score.
-  totalScore: number;
-  previous?: Step;
-  // Repeat number for ^ steps.s
-  repeat?: number;
-};
-
-type Options = {
-  genericTagScore: number,
-  textScore?: number,
-  imgAltScore?: number,
-  ariaLabelScore?: number,
-  detectLists?: boolean,
-  avoidShortText?: boolean,
-  usePlaceholders?: boolean,
-
-  debug?: boolean
-};
-
-const defaultOptions: Options = {
-  genericTagScore: 10,
-  textScore: 1,
-  imgAltScore: 2,
-  ariaLabelScore: 2,
-  detectLists: true,
-  avoidShortText: false,
-  usePlaceholders: true,
-
-  debug: false,
-};
-
-type CueType = 'text' | 'tag' | 'imgAlt' | 'ariaLabel';
-
-type Cue = {
-  type: CueType,
-  score: number,
-  elements: Element[],
-};
-
-type CueMap = Map<string, Cue>;
-
-type ElementMetrics = {
-  box: ClientRect,
-  style: CSSStyleDeclaration,
-  fontMetric: number,
-};
-
-type Lca = {
-  lcaDepth: number;
-  lca: Element | SelectorRoot;
-  anchor: Element | SelectorRoot | undefined;
-  depth: number;  // Distance to lca.
-};
-
-type PathCue = {
-  type: CueType,
-  score: number,
-  elements: Element[][],
-  anchorCount: Map<Element | SelectorRoot, number>,
-};
-
-type PreprocessResult = {
-  pathCues: Map<string, PathCue>,
-  lcaMap: Map<Element | SelectorRoot, Lca>,
-};
-
-type ListIndex = Map<Element | SelectorRoot, number>;
-
-function parentOrRoot(element: Element | SelectorRoot): Element | SelectorRoot | null {
-  return element.parentNode as Element | SelectorRoot;
-}
-
-class Engine {
-  private _cues = new Map<Element | SelectorRoot, CueMap>();
-  private _metrics = new Map<Element, ElementMetrics>();
-  readonly options: Options;
-
-  constructor(options: Options = defaultOptions) {
-    this.options = options;
-  }
-
-  query(root: SelectorRoot, selector: string, all: boolean): Element[] {
-    const tokens = tokenize(selector);
-    if (typeof tokens === 'number')
-      throw new Error('Cannot parse selector at position ' + tokens);
-    if (!tokens.length)
-      throw new Error('Empty selector');
-
-    if (!this._cues.has(root)) {
-      const cueMap: CueMap = new Map();
-      const pathCues = this._preprocess(root, [root], Infinity).pathCues;
-      for (const [text, cue] of pathCues) {
-        cueMap.set(text, {
-          type: cue.type,
-          score: cue.score,
-          elements: cue.elements[0]
-        });
-      }
-      this._cues.set(root, cueMap);
-    }
-
-    // Map from the element to the boundary used. We never go outside the boundary when doing '~'.
-    let currentStep = new Map<Element | SelectorRoot, Element | SelectorRoot>();
-    currentStep.set(root, root);
-    for (const token of tokens) {
-      const nextStep = new Map<Element | SelectorRoot, Element | SelectorRoot>();
-      for (let [element, boundary] of currentStep) {
-        let next: (Element | SelectorRoot)[] = [];
-        if (token.combinator === '^') {
-          if (element === boundary) {
-            next = [];
-          } else {
-            const parent = parentOrRoot(element);
-            next = parent ? [parent] : [];
-          }
-        } else if (token.combinator === '>') {
-          boundary = element;
-          next = this._matchChildren(element, token, all);
-        } else if (token.combinator === '') {
-          boundary = element;
-          next = this._matchSubtree(element, token, all);
-        } else if (token.combinator === '~') {
-          while (true) {
-            next = this._matchSubtree(element, token, all);
-            if (next.length) {
-              // Further '~' / '^' will not go outside of this boundary, which is
-              // a container with both the cue and the target elements inside.
-              boundary = element;
-              break;
-            }
-            if (element === boundary)
-              break;
-            element = parentOrRoot(element)!;
-          }
-        }
-        for (const nextElement of next) {
-          if (!nextStep.has(nextElement))
-            nextStep.set(nextElement, boundary);
-        }
-      }
-      currentStep = nextStep;
-    }
-    return Array.from(currentStep.keys()).filter(e => e.nodeType === 1 /* Node.ELEMENT_NODE */) as Element[];
-  }
-
-  create(root: SelectorRoot, target: Element, type: SelectorType): string {
-    const path = pathFromRoot(root, target);
-
-    const maxCueCount = type === 'notext' ? 50 : 10;
-    const { pathCues, lcaMap } = this._preprocess(root, path, maxCueCount);
-
-    const lists: ListIndex | undefined = this.options.detectLists ?
-      this._buildLists(root, path) : undefined;
-
-    const queue: Map<Element | SelectorRoot | undefined, Step>[] = path.map(_ => new Map());
-    const startStep: Step = {
-      token: { combinator: '' },
-      element: root,
-      depth: 0,
-      score: 0,
-      totalScore: 0
-    };
-
-    for (let stepDepth = -1; stepDepth < path.length; stepDepth++) {
-      const stepsMap = stepDepth === -1 ? new Map([[undefined, startStep]]) : queue[stepDepth];
-      const ancestorDepth = stepDepth === -1 ? 0 : stepDepth;
-      for (const [text, cue] of pathCues) {
-        const elements = cue.elements[ancestorDepth];
-        for (let index = 0; index < elements.length; index++) {
-          const element = elements[index];
-          const lca = lcaMap.get(element)!;
-          const lcaDepth = lca.lcaDepth;
-
-          // Always go deeper in the tree.
-          if (lcaDepth <= stepDepth)
-            continue;
-
-          // 'notext' - do not use elements from the target's subtree.
-          if (type === 'notext' && lcaDepth === path.length - 1 && lca.depth > 0)
-            continue;
-
-          // 'notext' - do not use target's own text.
-          if (type === 'notext' && lcaDepth === path.length - 1 && !lca.depth && cue.type !== 'tag')
-            continue;
-
-          const targetAnchor = path[lcaDepth + 1];
-          if (lists && lca.anchor && targetAnchor && lca.anchor !== targetAnchor) {
-            const oldList = lists.get(lca.anchor);
-            // Do not use cues from sibling list items (lca.anchor and targetAnchor).
-            if (oldList && oldList === lists.get(targetAnchor))
-              continue;
-          }
-
-          if (cue.type !== 'tag' && !this._isVisible(element))
-            continue;
-
-          const distanceToTarget = path.length - stepDepth;
-          // Short text can be used more effectively in a smaller scope.
-          let shortTextScore = 0;
-          if (this.options.avoidShortText && cue.type === 'text')
-            shortTextScore = Math.max(0, distanceToTarget - 2 * (text.length - 2));
-
-          const score = (cue.score + shortTextScore) * (
-            // Unique cues are heavily favored.
-            1 * (index + elements.length * 1000) +
-
-            // Larger text is preferred.
-            5 * (cue.type === 'text' ? this._elementMetrics(element).fontMetric : 1) +
-
-            // The closer to the target, the better.
-            1 * lca.depth
-          );
-          for (const [anchor, step] of stepsMap) {
-            // This ensures uniqueness when resolving the selector.
-            if (anchor && (cue.anchorCount.get(anchor) || 0) > index)
-              continue;
-
-            let newStep: Step = {
-              token: {
-                combinator: stepDepth === -1 ? '' : '~',
-                text: cue.type === 'text' ? text : undefined,
-                css: cue.type === 'text' ? undefined : text,
-                index: index || undefined,
-              },
-              previous: step,
-              depth: lca.depth,
-              element,
-              score,
-              totalScore: step.totalScore + score
-            };
-            let nextStep = queue[lcaDepth].get(lca.anchor);
-            if (!nextStep || nextStep.totalScore > newStep.totalScore)
-              queue[lcaDepth].set(lca.anchor, newStep);
-
-            // Try going to the ancestor.
-            if (newStep.depth) {
-              newStep = {
-                token: { combinator: '^' },
-                previous: newStep,
-                depth: 0,
-                element: lca.lca,
-                score: 2000 * newStep.depth,
-                totalScore: newStep.totalScore + 2000 * newStep.depth,
-                repeat: newStep.depth
-              };
-              nextStep = queue[lcaDepth].get(undefined);
-              if (!nextStep || nextStep.totalScore > newStep.totalScore)
-                queue[lcaDepth].set(undefined, newStep);
-            }
-          }
-        }
-      }
-    }
-
-    let best: Step | undefined;
-    for (const [, step] of queue[path.length - 1]) {
-      if (!best || step.totalScore < best.totalScore)
-        best = step;
-    }
-
-    if (!best)
-      return '';
-
-    const tokens: Token[] = new Array(best.depth).fill({ combinator: '^' });
-    while (best && best !== startStep) {
-      for (let repeat = best.repeat || 1; repeat; repeat--)
-        tokens.push(best.token);
-      best = best.previous;
-    }
-    tokens.reverse();
-    return this._serialize(tokens);
-  }
-
-  private _textMetric(text: string): number {
-    // Text which looks like a float number or counter is most likely volatile.
-    if (/^\$?[\d,]+(\.\d+|(\.\d+)?[kKmMbBgG])?$/.test(text))
-      return 12;
-    const num = Number(text);
-    // Large numbers are likely volatile.
-    if (!isNaN(num) && (num >= 32 || num < 0))
-      return 6;
-    return 1;
-  }
-
-  private _elementMetrics(element: Element): ElementMetrics {
-    let metrics = this._metrics.get(element);
-    if (!metrics) {
-      const style = element.ownerDocument ?
-          element.ownerDocument.defaultView!.getComputedStyle(element) :
-        ({} as CSSStyleDeclaration);
-      const box = element.getBoundingClientRect();
-      const fontSize = (parseInt(style.fontSize || '', 10) || 12) / 12;        // default 12 px
-      const fontWeight = (parseInt(style.fontWeight || '', 10) || 400) / 400;  // default normal weight
-      let fontMetric = fontSize * (1 + (fontWeight - 1) / 5);
-      fontMetric = 1 / Math.exp(fontMetric - 1);
-      metrics = { box, style, fontMetric };
-      this._metrics.set(element, metrics);
-    }
-    return metrics;
-  }
-
-  private _isVisible(element: Element): boolean {
-    const metrics = this._elementMetrics(element);
-    return metrics.box.width > 1 && metrics.box.height > 1;
-  }
-
-  private _preprocess(root: SelectorRoot, path: (Element | SelectorRoot)[], maxCueCount: number): PreprocessResult {
-    const pathCues = new Map<string, PathCue>();
-    const lcaMap = new Map<Element | SelectorRoot, Lca>();
-    const textScore = this.options.textScore || 1;
-
-    const appendCue = (text: string, type: CueType, score: number, element: Element, lca: Lca, textValue: string) => {
-      let pathCue = pathCues.get(text);
-      if (!pathCue) {
-        pathCue = { type, score: (textValue ? this._textMetric(textValue) : 1) * score, elements: [], anchorCount: new Map() };
-        for (let i = 0; i < path.length; i++)
-          pathCue.elements.push([]);
-        pathCues.set(text, pathCue);
-      }
-      for (let index = lca.lcaDepth; index >= 0; index--) {
-        const elements = pathCue.elements[index];
-        if (elements.length < maxCueCount)
-          elements.push(element);
-      }
-      if (lca.anchor)
-        pathCue.anchorCount.set(lca.anchor, 1 + (pathCue.anchorCount.get(lca.anchor) || 0));
-    };
-
-    const appendElementCues = (element: Element, lca: Lca, detached: boolean) => {
-      const nodeName = element.nodeName;
-      if (!detached && this.options.usePlaceholders && nodeName === 'INPUT') {
-        const placeholder = element.getAttribute('placeholder');
-        if (placeholder)
-          appendCue(JSON.stringify(placeholder), 'text', textScore, element, lca, placeholder);
-      }
-      if (!detached && nodeName === 'INPUT' && element.getAttribute('type') === 'button') {
-        const value = element.getAttribute('value');
-        if (value)
-          appendCue(JSON.stringify(value), 'text', textScore, element, lca, value);
-      }
-
-      if (!nodeName.startsWith('<pseudo') && !nodeName.startsWith('::'))
-        appendCue(nodeName, 'tag', this.options.genericTagScore, element, lca, '');
-      if (this.options.imgAltScore && nodeName === 'IMG') {
-        const alt = element.getAttribute('alt');
-        if (alt)
-          appendCue(`img[alt=${JSON.stringify(alt)}]`, 'imgAlt', this.options.imgAltScore, element, lca, alt);
-      }
-      if (this.options.ariaLabelScore) {
-        const ariaLabel = element.getAttribute('aria-label');
-        if (ariaLabel)
-          appendCue(JSON.stringify(`[aria-label=${JSON.stringify(ariaLabel)}]`), 'ariaLabel', this.options.ariaLabelScore, element, lca, ariaLabel);
-      }
-    };
-
-    const visit = (element: Element | SelectorRoot, lca: Lca, depth: number) => {
-      // Check for elements STYLE, NOSCRIPT, SCRIPT, OPTION and other elements
-      // that have |display:none| behavior.
-      const detached = !(element as HTMLElement).offsetParent;
-      if (element.nodeType === 1 /* Node.ELEMENT_NODE */)
-        appendElementCues(element as Element, lca, detached);
-      lcaMap.set(element, lca);
-
-      for (let childNode = element.firstChild; childNode; childNode = childNode.nextSibling) {
-        if (element.nodeType === 1 /* Node.ELEMENT_NODE */ && !detached && childNode.nodeType === 3 /* Node.TEXT_NODE */ && childNode.nodeValue) {
-          const textValue = childNode.nodeValue.trim();
-          if (textValue)
-            appendCue(JSON.stringify(textValue), 'text', textScore, element as Element, lca, textValue);
-        }
-        if (childNode.nodeType !== 1 /* Node.ELEMENT_NODE */)
-          continue;
-
-        const childElement = childNode as Element;
-        if (childElement.nodeName.startsWith('<pseudo:'))
-          continue;
-
-        if (path[depth + 1] === childElement) {
-          const childLca = { depth: 0, lca: childElement, lcaDepth: depth + 1, anchor: (undefined as Element | SelectorRoot | undefined) };
-          visit(childElement, childLca, depth + 1);
-        } else {
-          const childLca = { depth: lca.depth + 1, lca: lca.lca, lcaDepth: lca.lcaDepth, anchor: lca.anchor || element };
-          visit(childElement, childLca, depth + 1);
-        }
-      }
-    };
-    visit(root, { depth: 0, lca: root, lcaDepth: 0, anchor: undefined }, 0);
-
-    return { pathCues: pathCues, lcaMap };
-  }
-
-  private _filterCues(cues: CueMap, root: Element | SelectorRoot): CueMap {
-    const result = new Map();
-    for (const [text, cue] of cues) {
-      const filtered = cue.elements.filter(element => root.contains(element));
-      if (!filtered.length)
-        continue;
-      const newCue: Cue = { type: cue.type, score: cue.score, elements: filtered };
-      result.set(text, newCue);
-    }
-    return result;
-  }
-
-  private _buildLists(root: Element | SelectorRoot, path: (Element | SelectorRoot)[]): ListIndex {
-    const pathSet = new Set(path);
-    const map = detectLists(root, e => pathSet.has(e), e => this._elementMetrics(e).box);
-    const result: ListIndex = new Map();
-    let listNumber = 1;
-    for (const collection of map.values()) {
-      for (const list of collection) {
-        for (const child of list)
-          result.set(child, listNumber);
-        ++listNumber;
-      }
-    }
-    return result;
-  }
-
-  private _matchChildren(parent: Element | SelectorRoot, token: Token, all: boolean): Element[] {
-    const result: Element[] = [];
-    if (token.index !== undefined)
-      all = false;
-    let index = token.index || 0;
-
-    if (token.css !== undefined) {
-      for (let child = parent.firstElementChild; child; child = child.nextElementSibling) {
-        if (child.matches(token.css) && (all || !index--)) {
-          result.push(child);
-          if (!all)
-            return result;
-        }
-      }
-      return result;
-    }
-
-    if (token.text !== undefined) {
-      const cue = this._getCues(parent).get(token.text);
-      if (!cue || cue.type !== 'text')
-        return [];
-      for (const element of cue.elements) {
-        if (parentOrRoot(element) === parent && (all || !index--)) {
-          result.push(element);
-          if (!all)
-            return result;
-        }
-      }
-      return result;
-    }
-
-    throw new Error('Unsupported token');
-  }
-
-  private _matchSubtree(root: Element | SelectorRoot, token: Token, all: boolean): Element[] {
-    const result: Element[] = [];
-    if (token.index !== undefined)
-      all = false;
-    let index = token.index || 0;
-
-    if (token.css !== undefined) {
-      if (root.nodeType === 1 /* Node.ELEMENT_NODE */) {
-        const rootElement = root as Element;
-        if (rootElement.matches(token.css) && (all || !index--)) {
-          result.push(rootElement);
-          if (!all)
-            return result;
-        }
-      }
-      const queried = root.querySelectorAll(token.css);
-      if (all)
-        result.push(...Array.from(queried));
-      else if (queried.length > index)
-        result.push(queried.item(index));
-      return result;
-    }
-
-    if (token.text !== undefined) {
-      const texts = this._getCues(root);
-      const cue = texts.get(token.text);
-      if (!cue || cue.type !== 'text')
-        return result;
-      if (all)
-        return cue.elements;
-      if (index < cue.elements.length)
-        result.push(cue.elements[index]);
-      return result;
-    }
-
-    throw new Error('Unsupported token');
-  }
-
-  private _getCues(element: Element | SelectorRoot): CueMap {
-    if (!this._cues.has(element)) {
-      let parent = element;
-      while (!this._cues.has(parent))
-        parent = parentOrRoot(parent)!;
-      this._cues.set(element, this._filterCues(this._cues.get(parent)!, element));
-    }
-    return this._cues.get(element)!;
-  }
-
-  private _serialize(tokens: Token[]): string {
-    const result = tokens.map(token => (token.combinator === '' ? ' ' : token.combinator) +
-          (token.text !== undefined ? token.text : '') +
-          (token.css !== undefined ? token.css : '') +
-          (token.index !== undefined ? '#' + token.index : '')).join('');
-    if (result[0] !== ' ')
-      throw new Error('First token is wrong');
-    return result.substring(1);
-  }
-}
-
-const ZSSelectorEngine: SelectorEngine = {
-  create(root: SelectorRoot, element: Element, type?: SelectorType): string {
-    return new Engine().create(root, element, type || 'default');
-  },
-
-  query(root: SelectorRoot, selector: string): Element | undefined {
-    return new Engine().query(root, selector, false /* all */)[0];
-  },
-
-  queryAll(root: SelectorRoot, selector: string): Element[] {
-    return new Engine().query(root, selector, true /* all */);
-  }
-};
-
-(ZSSelectorEngine as any).test = () => {
-  const elements = Array.from(document.querySelectorAll('*')).slice(1500, 2000);
-  console.time('test');  // eslint-disable-line no-console
-  const failures = elements.filter((e, index) => {
-    const name = e.tagName.toUpperCase();
-    if (name === 'SCRIPT' || name === 'STYLE' || name === 'NOSCRIPT' || name === 'META' || name === 'LINK' || name === 'OPTION')
-      return false;
-    if (index % 100 === 0)
-      console.log(`${index} / ${elements.length}`);  // eslint-disable-line no-console
-    if (e.nodeName.toLowerCase().startsWith('<pseudo:'))
-      e = e.parentElement!;
-    while (e && e.namespaceURI && e.namespaceURI.endsWith('svg') && e.nodeName.toLowerCase() !== 'svg')
-      e = e.parentElement!;
-    try {
-      document.documentElement.style.outline = '1px solid red';
-      const selector = new Engine().create(document.documentElement, e, 'default');
-      document.documentElement.style.outline = '1px solid green';
-      const e2 = new Engine().query(document.documentElement, selector, false)[0];
-      return e !== e2;
-    } catch (e) {
-      return false;
-    }
-  });
-  console.timeEnd('test');  // eslint-disable-line no-console
-  console.log(failures);  // eslint-disable-line no-console
-};
-
-export default ZSSelectorEngine;
diff --git a/src/injected/zsSelectorEngine.webpack.config.js b/src/injected/zsSelectorEngine.webpack.config.js
deleted file mode 100644
index 9a831076c7..0000000000
--- a/src/injected/zsSelectorEngine.webpack.config.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const path = require('path');
-const InlineSource = require('./webpack-inline-source-plugin.js');
-
-module.exports = {
-  entry: path.join(__dirname, 'zsSelectorEngine.ts'),
-  devtool: 'source-map',
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        loader: 'ts-loader',
-        options: {
-          transpileOnly: true
-        },
-        exclude: /node_modules/
-      }
-    ]
-  },
-  resolve: {
-    extensions: [ '.tsx', '.ts', '.js' ]
-  },
-  output: {
-    filename: 'zsSelectorEngineSource.js',
-    path: path.resolve(__dirname, '../../lib/injected/generated')
-  },
-  plugins: [
-    new InlineSource(path.join(__dirname, '..', 'generated', 'zsSelectorEngineSource.ts')),
-  ]
-};
diff --git a/src/javascript.ts b/src/javascript.ts
index 7f70cca24b..45fcf076c1 100644
--- a/src/javascript.ts
+++ b/src/javascript.ts
@@ -36,27 +36,27 @@ export class ExecutionContext {
     this._logger = logger;
   }
 
-  _doEvaluateInternal(returnByValue: boolean, waitForNavigations: boolean, pageFunction: string | Function, ...args: any[]): Promise<any> {
+  doEvaluateInternal(returnByValue: boolean, waitForNavigations: boolean, pageFunction: string | Function, ...args: any[]): Promise<any> {
     return this._delegate.evaluate(this, returnByValue, pageFunction, ...args);
   }
 
-  _adoptIfNeeded(handle: JSHandle): Promise<JSHandle> | null {
+  adoptIfNeeded(handle: JSHandle): Promise<JSHandle> | null {
     return null;
   }
 
   async evaluateInternal<R>(pageFunction: types.Func0<R>): Promise<R>;
   async evaluateInternal<Arg, R>(pageFunction: types.Func1<Arg, R>, arg: Arg): Promise<R>;
   async evaluateInternal(pageFunction: never, ...args: never[]): Promise<any> {
-    return this._doEvaluateInternal(true /* returnByValue */, true /* waitForNavigations */, pageFunction, ...args);
+    return this.doEvaluateInternal(true /* returnByValue */, true /* waitForNavigations */, pageFunction, ...args);
   }
 
   async evaluateHandleInternal<R>(pageFunction: types.Func0<R>): Promise<types.SmartHandle<R>>;
   async evaluateHandleInternal<Arg, R>(pageFunction: types.Func1<Arg, R>, arg: Arg): Promise<types.SmartHandle<R>>;
   async evaluateHandleInternal(pageFunction: never, ...args: never[]): Promise<any> {
-    return this._doEvaluateInternal(false /* returnByValue */, true /* waitForNavigations */, pageFunction, ...args);
+    return this.doEvaluateInternal(false /* returnByValue */, true /* waitForNavigations */, pageFunction, ...args);
   }
 
-  _createHandle(remoteObject: any): JSHandle {
+  createHandle(remoteObject: any): JSHandle {
     return new JSHandle(this, remoteObject);
   }
 }
@@ -74,13 +74,13 @@ export class JSHandle<T = any> {
   async evaluate<R, Arg>(pageFunction: types.FuncOn<T, Arg, R>, arg: Arg): Promise<R>;
   async evaluate<R>(pageFunction: types.FuncOn<T, void, R>, arg?: any): Promise<R>;
   async evaluate<R, Arg>(pageFunction: types.FuncOn<T, Arg, R>, arg: Arg): Promise<R> {
-    return this._context._doEvaluateInternal(true /* returnByValue */, true /* waitForNavigations */, pageFunction, this, arg);
+    return this._context.doEvaluateInternal(true /* returnByValue */, true /* waitForNavigations */, pageFunction, this, arg);
   }
 
   async evaluateHandle<R, Arg>(pageFunction: types.FuncOn<T, Arg, R>, arg: Arg): Promise<types.SmartHandle<R>>;
   async evaluateHandle<R>(pageFunction: types.FuncOn<T, void, R>, arg?: any): Promise<types.SmartHandle<R>>;
   async evaluateHandle<R, Arg>(pageFunction: types.FuncOn<T, Arg, R>, arg: Arg): Promise<types.SmartHandle<R>> {
-    return this._context._doEvaluateInternal(false /* returnByValue */, true /* waitForNavigations */, pageFunction, this, arg);
+    return this._context.doEvaluateInternal(false /* returnByValue */, true /* waitForNavigations */, pageFunction, this, arg);
   }
 
   async getProperty(propertyName: string): Promise<JSHandle> {
@@ -183,7 +183,7 @@ export async function prepareFunctionCall<T>(
     if (arg && (arg instanceof JSHandle)) {
       if (arg._disposed)
         throw new Error('JSHandle is disposed!');
-      const adopted = context._adoptIfNeeded(arg);
+      const adopted = context.adoptIfNeeded(arg);
       if (adopted === null)
         return pushHandle(Promise.resolve(arg));
       toDispose.push(adopted);
diff --git a/src/selectors.ts b/src/selectors.ts
index 2c00a50040..4ae224bb40 100644
--- a/src/selectors.ts
+++ b/src/selectors.ts
@@ -16,18 +16,10 @@
 
 import * as dom from './dom';
 import * as frames from './frames';
-import * as selectorEvaluatorSource from './generated/selectorEvaluatorSource';
 import { helper, assert } from './helper';
-import SelectorEvaluator from './injected/selectorEvaluator';
 import * as js from './javascript';
 import * as types from './types';
 
-const kEvaluatorSymbol = Symbol('evaluator');
-type EvaluatorData = {
-  promise: Promise<js.JSHandle<SelectorEvaluator>>,
-  generation: number,
-};
-
 export class Selectors {
   readonly _builtinEngines: Set<string>;
   readonly _engines: Map<string, { source: string, contentScript: boolean }>;
@@ -68,37 +60,13 @@ export class Selectors {
     });
   }
 
-  async _prepareEvaluator(context: dom.FrameExecutionContext): Promise<js.JSHandle<SelectorEvaluator>> {
-    let data = (context as any)[kEvaluatorSymbol] as EvaluatorData | undefined;
-    if (data && data.generation !== this._generation) {
-      data.promise.then(handle => handle.dispose());
-      data = undefined;
-    }
-    if (!data) {
-      const custom: string[] = [];
-      for (const [name, { source }] of this._engines)
-        custom.push(`{ name: '${name}', engine: (${source}) }`);
-      const source = `
-        new (${selectorEvaluatorSource.source})([
-          ${custom.join(',\n')}
-        ])
-      `;
-      data = {
-        promise: context._doEvaluateInternal(false /* returnByValue */, false /* waitForNavigations */, source),
-        generation: this._generation
-      };
-      (context as any)[kEvaluatorSymbol] = data;
-    }
-    return data.promise;
-  }
-
   async _query(frame: frames.Frame, selector: string, scope?: dom.ElementHandle): Promise<dom.ElementHandle<Element> | null> {
     const parsed = this._parseSelector(selector);
     const context = this._needsMainContext(parsed) ? await frame._mainContext() : await frame._utilityContext();
-    const handle = await context.evaluateHandleInternal(
-        ({ evaluator, parsed, scope }) => evaluator.querySelector(parsed, scope || document),
-        { evaluator: await this._prepareEvaluator(context), parsed, scope }
-    );
+    const injectedScript = await context.injectedScript();
+    const handle = await injectedScript.evaluateHandle((injected, { parsed, scope }) => {
+      return injected.querySelector(parsed, scope || document);
+    }, { parsed, scope });
     const elementHandle = handle.asElement() as dom.ElementHandle<Element> | null;
     if (!elementHandle) {
       handle.dispose();
@@ -115,20 +83,21 @@ export class Selectors {
   async _queryArray(frame: frames.Frame, selector: string, scope?: dom.ElementHandle): Promise<js.JSHandle<Element[]>> {
     const parsed = this._parseSelector(selector);
     const context = await frame._mainContext();
-    const arrayHandle = await context.evaluateHandleInternal(
-        ({ evaluator, parsed, scope }) => evaluator.querySelectorAll(parsed, scope || document),
-        { evaluator: await this._prepareEvaluator(context), parsed, scope }
-    );
+    const injectedScript = await context.injectedScript();
+    const arrayHandle = await injectedScript.evaluateHandle((injected, { parsed, scope }) => {
+      return injected.querySelectorAll(parsed, scope || document);
+    }, { parsed, scope });
     return arrayHandle;
   }
 
   async _queryAll(frame: frames.Frame, selector: string, scope?: dom.ElementHandle, allowUtilityContext?: boolean): Promise<dom.ElementHandle<Element>[]> {
     const parsed = this._parseSelector(selector);
     const context = !allowUtilityContext || this._needsMainContext(parsed) ? await frame._mainContext() : await frame._utilityContext();
-    const arrayHandle = await context.evaluateHandleInternal(
-        ({ evaluator, parsed, scope }) => evaluator.querySelectorAll(parsed, scope || document),
-        { evaluator: await this._prepareEvaluator(context), parsed, scope }
-    );
+    const injectedScript = await context.injectedScript();
+    const arrayHandle = await injectedScript.evaluateHandle((injected, { parsed, scope }) => {
+      return injected.querySelectorAll(parsed, scope || document);
+    }, { parsed, scope });
+
     const properties = await arrayHandle.getProperties();
     arrayHandle.dispose();
     const result: dom.ElementHandle<Element>[] = [];
@@ -144,42 +113,49 @@ export class Selectors {
 
   _waitForSelectorTask(selector: string, state: 'attached' | 'detached' | 'visible' | 'hidden', deadline: number): { world: 'main' | 'utility', task: (context: dom.FrameExecutionContext) => Promise<js.JSHandle> } {
     const parsed = this._parseSelector(selector);
-    const task = async (context: dom.FrameExecutionContext) => context.evaluateHandleInternal(({ evaluator, parsed, state, timeout }) => {
-      return evaluator.injected.poll('raf', timeout, () => {
-        const element = evaluator.querySelector(parsed, document);
-        switch (state) {
-          case 'attached':
-            return element || false;
-          case 'detached':
-            return !element;
-          case 'visible':
-            return element && evaluator.injected.isVisible(element) ? element : false;
-          case 'hidden':
-            return !element || !evaluator.injected.isVisible(element);
-        }
-      });
-    }, { evaluator: await this._prepareEvaluator(context), parsed, state, timeout: helper.timeUntilDeadline(deadline) });
+    const task = async (context: dom.FrameExecutionContext) => {
+      const injectedScript = await context.injectedScript();
+      return injectedScript.evaluateHandle((injected, { parsed, state, timeout }) => {
+        return injected.poll('raf', timeout, () => {
+          const element = injected.querySelector(parsed, document);
+          switch (state) {
+            case 'attached':
+              return element || false;
+            case 'detached':
+              return !element;
+            case 'visible':
+              return element && injected.isVisible(element) ? element : false;
+            case 'hidden':
+              return !element || !injected.isVisible(element);
+          }
+        });
+      }, { parsed, state, timeout: helper.timeUntilDeadline(deadline) });
+    };
     return { world: this._needsMainContext(parsed) ? 'main' : 'utility', task };
   }
 
   _dispatchEventTask(selector: string, type: string, eventInit: Object, deadline: number): (context: dom.FrameExecutionContext) => Promise<js.JSHandle> {
     const parsed = this._parseSelector(selector);
-    const task = async (context: dom.FrameExecutionContext) => context.evaluateHandleInternal(({ evaluator, parsed, type, eventInit, timeout }) => {
-      return evaluator.injected.poll('raf', timeout, () => {
-        const element = evaluator.querySelector(parsed, document);
-        if (element)
-          evaluator.injected.dispatchEvent(element, type, eventInit);
-        return element || false;
-      });
-    }, { evaluator: await this._prepareEvaluator(context), parsed, type, eventInit, timeout: helper.timeUntilDeadline(deadline) });
+    const task = async (context: dom.FrameExecutionContext) => {
+      const injectedScript = await context.injectedScript();
+      return injectedScript.evaluateHandle((injected, { parsed, type, eventInit, timeout }) => {
+        return injected.poll('raf', timeout, () => {
+          const element = injected.querySelector(parsed, document);
+          if (element)
+            injected.dispatchEvent(element, type, eventInit);
+          return element || false;
+        });
+      }, { parsed, type, eventInit, timeout: helper.timeUntilDeadline(deadline) });
+    };
     return task;
   }
 
   async _createSelector(name: string, handle: dom.ElementHandle<Element>): Promise<string | undefined> {
     const mainContext = await handle._page.mainFrame()._mainContext();
-    return mainContext.evaluateInternal(({ evaluator, target, name }) => {
-      return evaluator.engines.get(name)!.create(document.documentElement, target);
-    }, { evaluator: await this._prepareEvaluator(mainContext), target: handle, name });
+    const injectedScript = await mainContext.injectedScript();
+    return injectedScript.evaluate((injected, { target, name }) => {
+      return injected.engines.get(name)!.create(document.documentElement, target);
+    }, { target: handle, name });
   }
 
   private _parseSelector(selector: string): types.ParsedSelector {
diff --git a/src/types.ts b/src/types.ts
index ba731ac815..298e38278e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -163,3 +163,9 @@ export type ParsedSelector = {
   }[],
   capture?: number,
 };
+
+export type InjectedScriptResult<T = undefined> =
+  (T extends undefined ? { status: 'success', value?: T} : { status: 'success', value: T }) |
+  { status: 'notconnected' } |
+  { status: 'timeout' } |
+  { status: 'error', error: string };
diff --git a/src/webkit/wkExecutionContext.ts b/src/webkit/wkExecutionContext.ts
index 45525b974a..0af7d2c37f 100644
--- a/src/webkit/wkExecutionContext.ts
+++ b/src/webkit/wkExecutionContext.ts
@@ -60,7 +60,7 @@ export class WKExecutionContext implements js.ExecutionContextDelegate {
       if (response.wasThrown)
         throw new Error('Evaluation failed: ' + response.result.description);
       if (!returnByValue)
-        return context._createHandle(response.result);
+        return context.createHandle(response.result);
       if (response.result.objectId)
         return await this._returnObjectByValue(response.result.objectId);
       return valueFromRemoteObject(response.result);
@@ -196,7 +196,7 @@ export class WKExecutionContext implements js.ExecutionContextDelegate {
     for (const property of response.properties) {
       if (!property.enumerable)
         continue;
-      result.set(property.name, handle._context._createHandle(property.value));
+      result.set(property.name, handle._context.createHandle(property.value));
     }
     return result;
   }
diff --git a/src/webkit/wkPage.ts b/src/webkit/wkPage.ts
index 6f3552a73e..6b12bc41b3 100644
--- a/src/webkit/wkPage.ts
+++ b/src/webkit/wkPage.ts
@@ -473,7 +473,7 @@ export class WKPage implements PageDelegate {
       } else {
         context = this._contextIdToContext.get(this._mainFrameContextId!)!;
       }
-      return context._createHandle(p);
+      return context.createHandle(p);
     });
     this._lastConsoleMessage = {
       derivedType,
@@ -516,7 +516,7 @@ export class WKPage implements PageDelegate {
 
   private async _onFileChooserOpened(event: {frameId: Protocol.Network.FrameId, element: Protocol.Runtime.RemoteObject}) {
     const context = await this._page._frameManager.frame(event.frameId)!._mainContext();
-    const handle = context._createHandle(event.element).asElement()!;
+    const handle = context.createHandle(event.element).asElement()!;
     this._page._onFileChooserOpened(handle);
   }
 
@@ -785,7 +785,7 @@ export class WKPage implements PageDelegate {
     }).catch(logError(this._page));
     if (!result || result.object.subtype === 'null')
       throw new Error('Unable to adopt element handle from a different document');
-    return to._createHandle(result.object) as dom.ElementHandle<T>;
+    return to.createHandle(result.object) as dom.ElementHandle<T>;
   }
 
   async getAccessibilityTree(needle?: dom.ElementHandle): Promise<{tree: accessibility.AXNode, needle: accessibility.AXNode | null}> {
diff --git a/src/webkit/wkWorkers.ts b/src/webkit/wkWorkers.ts
index d477efe186..ba11d078cc 100644
--- a/src/webkit/wkWorkers.ts
+++ b/src/webkit/wkWorkers.ts
@@ -91,7 +91,7 @@ export class WKWorkers {
       derivedType = 'timeEnd';
 
     const handles = (parameters || []).map(p => {
-      return worker._existingExecutionContext!._createHandle(p);
+      return worker._existingExecutionContext!.createHandle(p);
     });
     this._page._addConsoleMessage(derivedType, handles, { url, lineNumber: (lineNumber || 1) - 1, columnNumber: (columnNumber || 1) - 1 }, handles.length ? undefined : text);
   }
diff --git a/test/queryselector.spec.js b/test/queryselector.spec.js
index bf4cc28187..b1fc7b04b2 100644
--- a/test/queryselector.spec.js
+++ b/test/queryselector.spec.js
@@ -16,7 +16,6 @@
  */
 
 const path = require('path');
-const zsSelectorEngineSource = require('../lib/generated/zsSelectorEngineSource');
 const {FFOX, CHROMIUM, WEBKIT} = require('./utils').testOptions(browserType);
 
 async function registerEngine(name, script, options) {
@@ -444,138 +443,6 @@ describe('ElementHandle.$$ xpath', function() {
   });
 });
 
-describe('zselector', () => {
-  beforeAll(async () => {
-    await registerEngine('z', zsSelectorEngineSource.source);
-  });
-
-  it('query', async ({page}) => {
-    await page.setContent(`<div>yo</div><div>ya</div><div>ye</div>`);
-    expect(await page.$eval(`z="ya"`, e => e.outerHTML)).toBe('<div>ya</div>');
-
-    await page.setContent(`<div foo="baz"></div><div foo="bar space"></div>`);
-    expect(await page.$eval(`z=[foo="bar space"]`, e => e.outerHTML)).toBe('<div foo="bar space"></div>');
-
-    await page.setContent(`<div>yo<span></span></div>`);
-    expect(await page.$eval(`z=span`, e => e.outerHTML)).toBe('<span></span>');
-    expect(await page.$eval(`z=div > span`, e => e.outerHTML)).toBe('<span></span>');
-    expect(await page.$eval(`z=div span`, e => e.outerHTML)).toBe('<span></span>');
-    expect(await page.$eval(`z="yo" > span`, e => e.outerHTML)).toBe('<span></span>');
-    expect(await page.$eval(`z="yo" span`, e => e.outerHTML)).toBe('<span></span>');
-    expect(await page.$eval(`z=span ^`, e => e.outerHTML)).toBe('<div>yo<span></span></div>');
-    expect(await page.$eval(`z=span ~ div`, e => e.outerHTML)).toBe('<div>yo<span></span></div>');
-    expect(await page.$eval(`z=span ~ "yo"`, e => e.outerHTML)).toBe('<div>yo<span></span></div>');
-
-    await page.setContent(`<div>yo</div><div>yo<span></span></div>`);
-    expect(await page.$eval(`z="yo"#0`, e => e.outerHTML)).toBe('<div>yo</div>');
-    expect(await page.$eval(`z="yo"#1`, e => e.outerHTML)).toBe('<div>yo<span></span></div>');
-    expect(await page.$eval(`z="yo" ~ DIV#1`, e => e.outerHTML)).toBe('<div>yo<span></span></div>');
-    expect(await page.$eval(`z=span ~ div#1`, e => e.outerHTML)).toBe('<div>yo<span></span></div>');
-    expect(await page.$eval(`z=span ~ div#0`, e => e.outerHTML)).toBe('<div>yo<span></span></div>');
-    expect(await page.$eval(`z=span ~ "yo"#1 ^ > div`, e => e.outerHTML)).toBe('<div>yo</div>');
-    expect(await page.$eval(`z=span ~ "yo"#1 ^ > div#1`, e => e.outerHTML)).toBe('<div>yo<span></span></div>');
-
-    await page.setContent(`<div>yo<span id="s1"></span></div><div>yo<span id="s2"></span><span id="s3"></span></div>`);
-    expect(await page.$eval(`z="yo"`, e => e.outerHTML)).toBe('<div>yo<span id="s1"></span></div>');
-    expect(await page.$$eval(`z="yo"`, es => es.map(e => e.outerHTML).join('\n'))).toBe('<div>yo<span id="s1"></span></div>\n<div>yo<span id="s2"></span><span id="s3"></span></div>');
-    expect(await page.$$eval(`z="yo"#1`, es => es.map(e => e.outerHTML).join('\n'))).toBe('<div>yo<span id="s2"></span><span id="s3"></span></div>');
-    expect(await page.$$eval(`z="yo" ~ span`, es => es.map(e => e.outerHTML).join('\n'))).toBe('<span id="s1"></span>\n<span id="s2"></span>\n<span id="s3"></span>');
-    expect(await page.$$eval(`z="yo"#1 ~ span`, es => es.map(e => e.outerHTML).join('\n'))).toBe('<span id="s2"></span>\n<span id="s3"></span>');
-    expect(await page.$$eval(`z="yo" ~ span#0`, es => es.map(e => e.outerHTML).join('\n'))).toBe('<span id="s1"></span>\n<span id="s2"></span>');
-    expect(await page.$$eval(`z="yo" ~ span#1`, es => es.map(e => e.outerHTML).join('\n'))).toBe('<span id="s2"></span>\n<span id="s3"></span>');
-  });
-
-  it('create', async ({page}) => {
-    await page.setContent(`<div>yo</div><div>ya</div><div>ya</div>`);
-    expect(await playwright.selectors._createSelector('z', await page.$('div'))).toBe('"yo"');
-    expect(await playwright.selectors._createSelector('z', await page.$('div:nth-child(2)'))).toBe('"ya"');
-    expect(await playwright.selectors._createSelector('z', await page.$('div:nth-child(3)'))).toBe('"ya"#1');
-
-    await page.setContent(`<img alt="foo bar">`);
-    expect(await playwright.selectors._createSelector('z', await page.$('img'))).toBe('img[alt="foo bar"]');
-
-    await page.setContent(`<div>yo<span></span></div><span></span>`);
-    expect(await playwright.selectors._createSelector('z', await page.$('span'))).toBe('"yo"~SPAN');
-    expect(await playwright.selectors._createSelector('z', await page.$('span:nth-child(2)'))).toBe('SPAN#1');
-  });
-
-  it('children of various display parents', async ({page}) => {
-    await page.setContent(`<body><div style='position: fixed;'><span>yo</span></div></body>`);
-    expect(await playwright.selectors._createSelector('z', await page.$('span'))).toBe('"yo"');
-
-    await page.setContent(`<div style='position: relative;'><span>yo</span></div>`);
-    expect(await playwright.selectors._createSelector('z', await page.$('span'))).toBe('"yo"');
-
-    // "display: none" makes all children text invisible - fallback to tag name.
-    await page.setContent(`<div style='display: none;'><span>yo</span></div>`);
-    expect(await playwright.selectors._createSelector('z', await page.$('span'))).toBe('SPAN');
-  });
-
-  it('boundary', async ({page}) => {
-    await page.setContent(`
-      <div>hey</div>
-      <div>hey</div>
-      <div>hey</div>
-      <div>
-        <div>yo</div>
-        <div>hello</div>
-        <div>hello</div>
-        <div>hello</div>
-        <div>unique</div>
-        <div>
-          <div>hey2<span></span><span></span><span></span></div>
-          <div>hello</div>
-        </div>
-        <div>
-          <div>hey<span></span><span></span><span></span></div>
-          <div>hello</div>
-        </div>
-      </div>
-      <div>
-        <div>ya<div>
-        <div id=first>hello</div>
-        <div>hello</div>
-        <div>hello</div>
-        <div>
-          <div>hey2<span></span><span></span><span></span></div>
-          <div>hello</div>
-        </div>
-        <div>
-          <div>hey<span></span><span></span><span></span></div>
-          <div id=target>hello</div>
-        </div>
-      </div>
-      <div>
-        <div>ya<div>
-        <div id=first2>hello</div>
-        <div>hello</div>
-        <div>hello</div>
-        <div>
-          <div>hey2<span></span><span></span><span></span></div>
-          <div>hello</div>
-        </div>
-        <div>
-          <div>hey<span></span><span></span><span></span></div>
-          <div id=target2>hello</div>
-        </div>
-      </div>`);
-    expect(await playwright.selectors._createSelector('z', await page.$('#target'))).toBe('"ya"~"hey"~"hello"');
-    expect(await page.$eval(`z="ya"~"hey"~"hello"`, e => e.outerHTML)).toBe('<div id="target">hello</div>');
-    expect(await page.$eval(`z="ya"~"hey"~"unique"`, e => e.outerHTML).catch(e => e.message)).toBe('Error: failed to find element matching selector "z="ya"~"hey"~"unique""');
-    expect(await page.$$eval(`z="ya" ~ "hey" ~ "hello"`, es => es.map(e => e.outerHTML).join('\n'))).toBe('<div id="target">hello</div>\n<div id="target2">hello</div>');
-  });
-
-  it('should query existing element with zs selector', async({page, server}) => {
-    await page.goto(server.PREFIX + '/playground.html');
-    await page.setContent('<html><body><div class="second"><div class="inner">A</div></div></body></html>');
-    const html = await page.$('z=html');
-    const second = await html.$('z=.second');
-    const inner = await second.$('z=.inner');
-    const content = await page.evaluate(e => e.textContent, inner);
-    expect(content).toBe('A');
-  });
-});
-
 describe('text selector', () => {
   it('query', async ({page}) => {
     await page.setContent(`<div>yo</div><div>ya</div><div>\nye  </div>`);
diff --git a/utils/runWebpack.js b/utils/runWebpack.js
index 1ecfbe6873..d5007cdddc 100644
--- a/utils/runWebpack.js
+++ b/utils/runWebpack.js
@@ -18,8 +18,7 @@ const child_process = require('child_process');
 const path = require('path');
 
 const files = [
-  path.join('src', 'injected', 'zsSelectorEngine.webpack.config.js'),
-  path.join('src', 'injected', 'selectorEvaluator.webpack.config.js'),
+  path.join('src', 'injected', 'injectedScript.webpack.config.js'),
 ];
 
 function runOne(runner, file) {