replace rollup with webpack

package.json

@@ -19,9 +19,9 @@
     "clean": "rimraf build tmp",
     "build": "npm run clean && concurrently \"npm run build:tsc\" \"npm run build:web\"",
     "build:tsc": "tsc -p tsconfig.release.json",
-    "build:web": "rollup --config src/rollup.ts",
+    "build:web": "npx webpack --config src/web/webpack.config.js",
     "watch:tsc": "tsc -w -p tsconfig.release.json",
-    "watch:web": "rollup --watch --config src/rollup.ts",
+    "watch:web": "npx webpack --config src/web/webpack.config.js --watch",
     "watch": "npm run clean && concurrently --kill-others \"npm run watch:tsc\" \"npm run watch:web\"",
     "lint": "eslint --ext .ts,.tsx --config .eslintrc.json --no-eslintrc src",
     "postinstall": "node ./postInstallMessage.js",
@@ -41,7 +41,7 @@
   "license": "BSD-3-Clause",
   "peerDependencies": {
     "jest": "^26.0.1",
-    "playwright": "^1.1.0"
+    "playwright": "^1.1.1"
   },
   "dependencies": {
     "@jperl/html-parse-stringify": "^1.0.4",
@@ -66,10 +66,6 @@
   "devDependencies": {
     "@ffmpeg-installer/ffmpeg": "^1.0.20",
     "@qawolf/sandbox": "0.1.12",
-    "@rollup/plugin-commonjs": "^13.0.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^8.0.1",
-    "@rollup/plugin-virtual": "^2.0.2",
     "@types/debug": "^4.1.5",
     "@types/fs-extra": "^9.0.1",
     "@types/glob": "^7.1.2",
@@ -88,14 +84,17 @@
     "fs-extra": "^9.0.1",
     "jest": "^25.4.0",
     "jest-mock-process": "^1.4.0",
-    "playwright": "^1.1.0",
-    "playwright-webkit": "^1.1.0",
+    "playwright": "^1.1.1",
+    "playwright-core": "^1.1.1",
+    "playwright-webkit": "^1.1.1",
     "prettier": "^2.0.5",
     "rimraf": "^3.0.2",
-    "rollup": "^2.15.0",
-    "rollup-plugin-typescript": "^1.0.1",
     "ts-jest": "^26.1.0",
-    "typescript": "^3.9.5"
+    "ts-loader": "^7.0.5",
+    "typescript": "^3.9.5",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-virtual-modules": "^0.2.2"
   },
   "bin": {
     "qawolf": "./build/index.js"

src/web/cues.ts

@@ -1,6 +1,6 @@
 import { getAttribute } from './attribute';
 import { isDynamic } from './isDynamic';
-import { SelectorPart } from './playwrightEvaluator';
+import { SelectorPart } from './types';
 
 const DEFAULT_ATTRIBUTE =
   'data-cy,data-e2e,data-qa,data-test,data-testid,/^qa-.*/';

src/web/qawolf.ts

@@ -9,5 +9,5 @@ export {
 export { getClickableAncestor, isClickable, isVisible } from './element';
 export { formatArgument, interceptConsoleLogs } from './interceptConsoleLogs';
 export { PageEventCollector } from './PageEventCollector';
-export { buildSelector, isMatch } from './selector';
+export { buildSelector, isMatch, toSelector } from './selector';
 export { getXpath, nodeToDoc, nodeToHtml } from './serialize';

src/web/selector.ts

@@ -1,7 +1,10 @@
-import { iterateCues } from './iterateCues';
 import { buildCues, buildSelectorParts, BuildCues } from './cues';
-import { querySelectorAll, SelectorPart } from './playwrightEvaluator';
+import { iterateCues } from './iterateCues';
 import { getXpath } from './serialize';
+import { SelectorPart, QuerySelectorAllFn } from './types';
+
+const evaluator = require('playwright-evaluator');
+const querySelectorAll: QuerySelectorAllFn = evaluator.querySelectorAll;
 
 type IsMatch = {
   selectorParts: SelectorPart[];

src/web/playwrightEvaluator.ts → src/web/types.ts

@@ -8,12 +8,7 @@ export type ParsedSelector = {
   parts: SelectorPart[];
 };
 
-export const querySelectorAll = (
+export type QuerySelectorAllFn = (
   selector: ParsedSelector,
   root: HTMLElement,
-): HTMLElement[] => {
-  throw new Error(
-    'This should never be called. It should replaced by the virtual module' +
-      { selector, root },
-  );
-};
+) => HTMLElement[];

src/web/webpack.config.js

@@ -0,0 +1,42 @@
+const VirtualModulesPlugin = require('webpack-virtual-modules');
+const path = require('path');
+const selectorEvaluatorSource = require('playwright-core/lib/generated/injectedScriptSource');
+
+const virtualModules = new VirtualModulesPlugin({
+  'node_modules/playwright-evaluator.js': `
+  const evaluator = new (${selectorEvaluatorSource.source})([]);
+  const querySelectorAll = (...args) => evaluator.querySelectorAll(...args);
+  module.exports = { evaluator, querySelectorAll };
+   `,
+});
+
+module.exports = {
+  entry: './src/web/index.ts',
+  module: {
+    rules: [
+      {
+        exclude: /node_modules/,
+        loader: 'ts-loader',
+        options: {
+          compilerOptions: {
+            declaration: false,
+          },
+        },
+        test: /\.tsx?$/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  optimization: {
+    minimize: false,
+  },
+  output: {
+    filename: 'qawolf.web.js',
+    library: 'qawolf',
+    libraryTarget: 'window',
+    path: path.resolve(__dirname, '../../build'),
+  },
+  plugins: [virtualModules],
+};

test/web/selector.test.ts

@@ -2,91 +2,100 @@ import { Browser, Page } from 'playwright';
 import { launch } from '../../src/utils';
 import { QAWolfWeb } from '../../src/web';
 import { webScript } from '../../src/web/addScript';
-import { SelectorPart } from '../../src/web/playwrightEvaluator';
-import { toSelector } from '../../src/web/selector';
+import { SelectorPart } from '../../src/web/types';
 import { TEST_URL } from '../utils';
 
-describe('browser tests', () => {
-  let browser: Browser;
-  let page: Page;
+let browser: Browser;
+let page: Page;
 
-  beforeAll(async () => {
-    browser = await launch();
-    page = await browser.newPage();
-    await page.addInitScript(webScript);
-    await page.goto(`${TEST_URL}checkbox-inputs`);
+beforeAll(async () => {
+  browser = await launch();
+  page = await browser.newPage();
+  await page.addInitScript(webScript);
+  await page.goto(`${TEST_URL}checkbox-inputs`);
+});
+
+afterAll(() => browser.close());
+
+describe('isMatch', () => {
+  const isMatch = async (
+    selectorParts: SelectorPart[],
+    targetSelector: string,
+  ): Promise<boolean> => {
+    return page.evaluate(
+      ({ selectorParts, targetSelector }) => {
+        const qawolf: QAWolfWeb = (window as any).qawolf;
+        const target = document.querySelector(targetSelector) as HTMLElement;
+
+        return qawolf.isMatch({ selectorParts, target });
+      },
+      { selectorParts, targetSelector },
+    );
+  };
+
+  it('returns true if selector matches element', async () => {
+    const result = await isMatch(
+      [{ body: '[data-qa="html-checkbox"]', name: 'css' }],
+      '#single',
+    );
+    expect(result).toBe(true);
+
+    const result2 = await isMatch(
+      [{ body: 'Single checkbox', name: 'text' }],
+      '[for="single"]',
+    );
+    expect(result2).toBe(true);
+  });
+
+  it('return false if selector does not match element', async () => {
+    const result = await isMatch([{ body: '#cat', name: 'css' }], '#single');
+    expect(result).toBe(false);
   });
 
-  afterAll(() => browser.close());
-
-  describe('isMatch', () => {
-    const isMatch = async (
-      selectorParts: SelectorPart[],
-      targetSelector: string,
-    ): Promise<boolean> => {
-      return page.evaluate(
-        ({ selectorParts, targetSelector }) => {
-          const qawolf: QAWolfWeb = (window as any).qawolf;
-          const target = document.querySelector(targetSelector) as HTMLElement;
-
-          return qawolf.isMatch({ selectorParts, target });
-        },
-        { selectorParts, targetSelector },
-      );
-    };
-
-    it('returns true if selector matches element', async () => {
-      const result = await isMatch(
-        [{ body: '[data-qa="html-checkbox"]', name: 'css' }],
-        '#single',
-      );
-      expect(result).toBe(true);
-
-      const result2 = await isMatch(
-        [{ body: 'Single checkbox', name: 'text' }],
-        '[for="single"]',
-      );
-      expect(result2).toBe(true);
-    });
-
-    it('return false if selector does not match element', async () => {
-      const result = await isMatch([{ body: '#cat', name: 'css' }], '#single');
-      expect(result).toBe(false);
-    });
-
-    it('handles strange quotes in text selector', async () => {
-      await page.goto(`${TEST_URL}buttons`);
-
-      const result = await isMatch(
-        [{ body: '"Button \\"with\\" extra \'quotes\'"', name: 'text' }],
-        '.quote-button',
-      );
-
-      expect(result).toBe(true);
-
-      await page.goto(`${TEST_URL}checkbox-inputs`);
-    });
+  it('handles strange quotes in text selector', async () => {
+    await page.goto(`${TEST_URL}buttons`);
+
+    const result = await isMatch(
+      [{ body: '"Button \\"with\\" extra \'quotes\'"', name: 'text' }],
+      '.quote-button',
+    );
+
+    expect(result).toBe(true);
+
+    await page.goto(`${TEST_URL}checkbox-inputs`);
   });
 });
 
 describe('toSelector', () => {
-  it('returns a pure CSS selector if possible', () => {
-    const selectorString = toSelector([
+  const toSelector = async (selectorParts: SelectorPart[]): Promise<string> => {
+    return page.evaluate(
+      ({ selectorParts }) => {
+        const qawolf: QAWolfWeb = (window as any).qawolf;
+        return qawolf.toSelector(selectorParts);
+      },
+      { selectorParts },
+    );
+  };
+
+  it('returns a pure CSS selector if possible', async () => {
+    const selectorString = await toSelector([
       { name: 'css', body: '[data-qa="search"]' },
       { name: 'css', body: 'input.search-input' },
     ]);
 
     expect(selectorString).toBe('[data-qa="search"] input.search-input');
   });
 
-  it('returns a single text selector', () => {
-    const selectorString = toSelector([{ name: 'text', body: '"Click Me!"' }]);
+  it('returns a single text selector', async () => {
+    const selectorString = await toSelector([
+      { name: 'text', body: '"Click Me!"' },
+    ]);
 
     expect(selectorString).toBe('text="Click Me!"');
   });
 
-  it('returns a mixed selector', () => {
-    const selectorString = toSelector([
+  it('returns a mixed selector', async () => {
+    const selectorString = await toSelector([
       { name: 'css', body: '.container' },
       { name: 'text', body: '"Submit"' },
     ]);