tests: use vite as static files server

Playwright routes didn't work with service worker scripts, and neither inside runCrxTest (that is, code that runs inside test-extension service worker)

tests/crx/crxTest.ts

@@ -15,24 +15,25 @@
  */
 
 import type { Worker } from '@playwright/test';
-import { test as base, chromium } from '@playwright/test';
+import { test as base, chromium, mergeTests } from '@playwright/test';
 import fs from 'fs';
 import os from 'os';
 import path from 'path';
-import type { CrxApplication, Page as CrxPage, BrowserContext as CrxBrowserContext } from 'playwright-crx';
+import type { CrxApplication, BrowserContext as CrxBrowserContext, Page as CrxPage } from 'playwright-crx';
+import type * as CrxTests from 'playwright-crx/test';
 import { rimrafSync } from 'rimraf';
 
-type Server = {
+type CrxServer = {
   EMPTY_PAGE: string;
   PREFIX: string;
 };
 
 type CrxFixtures = {
-  expect: typeof expect;
+  expect: typeof CrxTests.expect;
   page: CrxPage;
   context: CrxBrowserContext;
   crxApp: CrxApplication;
-  server: Server;
+  server: CrxServer;
   _debug: Debug;
 }
 
@@ -47,8 +48,8 @@ declare const serviceWorker: ServiceWorker;
 
 // from https://playwright.dev/docs/chrome-extensions#testing
 export const test = base.extend<{
+  basePath: string,
   extensionPath: string;
-  basePath: string;
   createUserDataDir: () => string;
   extensionServiceWorker: Worker;
   extensionId: string;
@@ -58,10 +59,10 @@ export const test = base.extend<{
   _debug: Debug;
 }>({
 
-  extensionPath: path.join(__dirname, '..', 'test-extension', 'dist'),
-
   basePath: path.join(__dirname, '..', '..', 'playwright', 'tests', 'assets'),
 
+  extensionPath: path.join(__dirname, '..', 'test-extension', 'dist'),
+
   createUserDataDir: async ({}, run) => {
     const dirs: string[] = [];
     await run(() => {
@@ -72,15 +73,14 @@ export const test = base.extend<{
     rimrafSync(dirs);
   },
 
-  context: async ({ extensionPath, createUserDataDir, basePath, baseURL }, use) => {
+  context: async ({ extensionPath, createUserDataDir }, use) => {
     const context = await chromium.launchPersistentContext(createUserDataDir(), {
       headless: false,
       args: [
         `--disable-extensions-except=${extensionPath}`,
         `--load-extension=${extensionPath}`,
       ],
     });
-    context.route(`${baseURL}/**/*`, (route, request) => route.fulfill({ path: path.join(basePath, new URL(request.url()).pathname) }));
     await use(context);
     await context.close();
   },
@@ -108,8 +108,9 @@ export const test = base.extend<{
     await use(extensionId);
   },
 
-  runCrxTest: async ({ extensionServiceWorker }, use) => {
-    use((fn) => extensionServiceWorker.evaluate(`_runTest(${fn.toString()})`));
+  runCrxTest: async ({ extensionServiceWorker, baseURL }, use) => {
+    const params = { server: { PREFIX: baseURL, EMPTY_PAGE: `${baseURL}/empty.html` } };
+    use((fn) => extensionServiceWorker.evaluate(`_runTest(${fn.toString()}, ${JSON.stringify(params)})`));
   },
 
   mockPaths: async ({ context, baseURL }, run) => {
@@ -164,4 +165,5 @@ export const test = base.extend<{
     });
   },
 });
+
 export const expect = test.expect;

tests/package.json

@@ -5,7 +5,7 @@
   "author": "",
   "scripts": {
     "build": "tsc -p ./test-extension/tsconfig.json && vite build ./test-extension",
-    "serve": "http-server ../playwright/tests/assets -p 3000 -s"
+    "serve": "vite ./server --host 127.0.0.1 --port 3000"
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0"

tests/playwright.config.ts

@@ -17,4 +17,8 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
   ],
+  webServer: {
+    command: 'npm run serve',
+    url: 'http://127.0.0.1:3000',
+  }
 });

tests/server/index.html

@@ -0,0 +1 @@
+<h1>Playwright CRX test server</h1>

tests/server/vite.config.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Rui Figueira.
+ *
+ * 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 { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  publicDir: '../../playwright/tests/assets',
+});

tests/test-extension/src/background.ts

@@ -20,12 +20,15 @@ const _crxAppPromise = crx.start();
 
 async function _runTest(fn: (params: any) => Promise<void>, params: any) {
   const [crxApp, [ tab ]] = await Promise.all([_crxAppPromise, chrome.tabs.query({ active: true })]);
-  const server = { PREFIX: `chrome-extension://${chrome.runtime.id}`, EMPTY_PAGE: `chrome-extension://${chrome.runtime.id}/empty.html` };
   const context = crxApp.context();
-  await context.route(server.EMPTY_PAGE, (route) => route.fulfill({ body: '', contentType: 'text/html' }));
   expect(tab?.id).toBeTruthy();
   const page = await crxApp.attach(tab?.id!);
-  await fn({ expect, page, context, crxApp, server, _debug, ...params });
+  try {
+    await fn({ expect, page, context, crxApp, _debug, ...params });
+  } catch (e: any) {
+    debugger;
+    throw e instanceof Error ? e : new Error(e?.message);
+  }
 }
 
 Object.assign(self, { _runTest });