Test production builds with playwright on CI

.github/workflows/build-test.yaml

@@ -65,7 +65,8 @@ jobs:
           node-version: 14.x
           cache: 'yarn'
       - run: yarn install --frozen-lockfile
-      - run: yarn start &
+      - run: yarn build:ext
+      - run: yarn start:prod &
       - name: Install playwright's npm dependencies
         working-directory: ./playwright/
         run: yarn install --frozen-lockfile
@@ -74,10 +75,10 @@ jobs:
         run: npx playwright install --with-deps
       - uses: emilioschepis/[email protected]
         with:
-          url: 'http://localhost:3000/'
+          url: 'http://localhost:5000/'
       - name: Run playwright tests (with xvfb-run to support headed extension test)
         working-directory: ./playwright/
-        run: xvfb-run yarn test
+        run: BASE_URL=http://localhost:5000 EXTENSION_PATH=../build-ext/ xvfb-run yarn test
 
   cypress:
     needs: [yarn_cache]

README.md

@@ -121,6 +121,7 @@ yarn test
 yarn start
 (cd playwright; yarn; npx playwright install --with-deps)
 (cd playwright; yarn test)
+# Or set BASE_URL and EXTENSION_PATH to test production builds.
 
 # Run cypress tests
 docker-compose up -d

playwright/playwright.config.ts

@@ -36,7 +36,8 @@ const config: PlaywrightTestConfig = {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 8000,
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:3000',
+    /* Test dev server by default, but also allow testing `start:prod`. */
+    baseURL: process.env.BASE_URL ?? 'http://localhost:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',

playwright/tests/extension.spec.ts

@@ -1,8 +1,11 @@
 import { test as base, expect, BrowserContext, chromium } from '@playwright/test'
 import path from 'path'
 
-import extensionManifest from '../../build-dev/manifest.json'
-const pathToExtension = path.join(__dirname, '../../build-dev')
+// Test dev build by default, but also allow testing production
+const extensionPath = path.join(__dirname, '..', process.env.EXTENSION_PATH ?? '../build-dev/')
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const extensionManifest = require(path.join(extensionPath, '/manifest.json'))
 const popupFile = extensionManifest.browser_action.default_popup
 
 // From https://playwright.dev/docs/chrome-extensions
@@ -14,7 +17,7 @@ export const test = base.extend<{
   context: async ({}, use) => {
     const context = await chromium.launchPersistentContext('', {
       headless: false,
-      args: [`--disable-extensions-except=${pathToExtension}`, `--load-extension=${pathToExtension}`],
+      args: [`--disable-extensions-except=${extensionPath}`, `--load-extension=${extensionPath}`],
     })
     await use(context)
     await context.close()