Refactor tests to run Playwright's server in Docker

Author: IvanGoncharov

docker-compose.yml

@@ -1,41 +1,11 @@
 services:
-  serve-webpack-example:
-    build:
-      context: .
-      dockerfile: ./example/webpack/Dockerfile
-    stdin_open: true
-    tty: true
-  serve-express-example:
-    build:
-      context: .
-      dockerfile: ./example/express-server/Dockerfile
-    stdin_open: true
-    tty: true
-  test:
-    depends_on:
-      - serve-webpack-example
-      - serve-express-example
-    build:
-      context: .
-      dockerfile: ./tests/Dockerfile
-    volumes:
-      - ./demo-dist:/app/demo-dist:ro
-      - ./playwright.config.ts:/app/playwright.config.ts:ro
-      - ./tests:/app/tests
-      - ./test-results:/app/test-results
-      - ./playwright-report:/app/playwright-report
-    command: npx playwright test
-  update-snapshots:
-    depends_on:
-      - serve-webpack-example
-      - serve-express-example
+  playwright-server:
     build:
       context: .
       dockerfile: ./tests/Dockerfile
-    volumes:
-      - ./demo-dist:/app/demo-dist:ro
-      - ./playwright.config.ts:/app/playwright.config.ts:ro
-      - ./tests:/app/tests
-      - ./test-results:/app/test-results
-      - ./playwright-report:/app/playwright-report
-    command: npx playwright test --update-snapshots
+      args:
+        PLAYWRIGHT_VERSION: ${PLAYWRIGHT_VERSION}
+    ipc: host
+    command: playwright run-server --host=0.0.0.0 --port=3000
+    ports:
+      - '3000:3000'

package-lock.json

@@ -7,7 +7,7 @@
   "homepage": "https://apis.guru/graphql-voyager",
   "repository": {
     "type": "git",
-    "url": "https://github.com/APIs-guru/graphql-voyager.git"
+    "url": "git+https://github.com/APIs-guru/graphql-voyager.git"
   },
   "funding": "https://github.com/APIs-guru/graphql-voyager?sponsor=1",
   "bugs": {
@@ -49,8 +49,8 @@
     "prettier": "prettier --write --list-different . **/*.svg",
     "prettier:check": "prettier --check . **/*.svg",
     "check:spell": "cspell --cache --no-progress '**/*'",
-    "testonly": "npm run build:demo && npm pack && docker compose up --abort-on-container-exit --build test",
-    "update-snapshots": "npm run build:demo && npm pack && docker compose up --build update-snapshots",
+    "testonly": "npm run build:demo && npm pack && playwright test",
+    "update-snapshots": "npm run build:demo && npm pack && playwright test --update-snapshots",
     "deploy": "wrangler deploy"
   },
   "peerDependencies": {
@@ -68,7 +68,6 @@
     "svg-pan-zoom": "3.6.2"
   },
   "devDependencies": {
-    "@playwright/test": "1.53.0",
     "@svgr/webpack": "8.1.0",
     "@types/commonmark": "0.27.9",
     "@types/node": "24.0.1",
@@ -86,6 +85,7 @@
     "eslint-plugin-simple-import-sort": "12.1.1",
     "graphql": "16.11.0",
     "mini-css-extract-plugin": "2.9.2",
+    "playwright": "1.53.0",
     "postcss-cssnext": "3.1.1",
     "postcss-import": "16.1.0",
     "postcss-loader": "8.1.1",

package.json

@@ -1,12 +1,15 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
-import { devices } from '@playwright/test';
+import playwrightPackage from 'playwright/package.json' with { type: 'json' };
+import { devices, type PlaywrightTestConfig } from 'playwright/test';
 
 const isCI = !!process.env['CI'];
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 const config: PlaywrightTestConfig = {
   testDir: './tests',
+  // FIXME: remove '-linux'
+  snapshotPathTemplate:
+    '{snapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}{-projectName}-linux{ext}',
   /* Maximum time one test can run for. */
   timeout: 20 * 1000,
   expect: {
@@ -38,12 +41,17 @@ const config: PlaywrightTestConfig = {
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'retain-on-failure',
+
+    connectOptions: {
+      wsEndpoint: 'ws://127.0.0.1:3000/',
+      exposeNetwork: '<loopback>',
+    },
   },
   projects: [
     {
       name: 'Demo',
       testMatch: 'Demo.spec.ts',
-      use: { baseURL: 'http://localhost:9090' },
+      use: { baseURL: 'http://127.0.0.1:9090' },
     },
     {
       name: 'WebpackExample',
@@ -57,10 +65,26 @@ const config: PlaywrightTestConfig = {
     },
   ],
   outputDir: 'test-results/',
-  webServer: {
-    command: 'npm run serve',
-    url: 'http://localhost:9090/',
-  },
+  webServer: [
+    {
+      name: 'playwright-server',
+      env: { PLAYWRIGHT_VERSION: playwrightPackage.version },
+      command:
+        'docker compose up --abort-on-container-exit --build playwright-server',
+      url: 'http://127.0.0.1:3000/',
+      stdout: 'pipe',
+      timeout: 120 * 1000,
+      gracefulShutdown: {
+        signal: 'SIGINT',
+        timeout: 120 * 1000,
+      },
+    },
+    {
+      name: 'npm run serve',
+      command: 'npm run serve',
+      url: 'http://localhost:9090/',
+    },
+  ],
 };
 
 export default config;

playwright.config.ts

@@ -1,11 +1,6 @@
 # syntax=docker/dockerfile:1
-
 FROM node:24
 
-WORKDIR /app
-
-COPY ["./package.json", "./package-lock.json", "./"]
-RUN npm ci && npx playwright install --with-deps chromium
-
-COPY ["./tsconfig.json", "./"]
-COPY ["./scripts", "./scripts"]
+ARG PLAYWRIGHT_VERSION="missing PLAYWRIGHT_VERSION arg"
+RUN npm -g install "playwright@$PLAYWRIGHT_VERSION"
+RUN playwright install --with-deps chromium

tests/Dockerfile

@@ -1,4 +1,4 @@
-import { type Locator, type Page } from '@playwright/test';
+import { type Locator, type Page } from 'playwright/test';
 import { format } from 'prettier';
 
 interface VoyagerURLParams {

tests/PageObjectModel.ts

@@ -1,5 +1,5 @@
-import { expect, test } from '@playwright/test';
 import { buildSchema, graphqlSync } from 'graphql';
+import { expect, test } from 'playwright/test';
 
 import { gotoVoyagerPage, SchemaPresets } from './PageObjectModel.ts';
 

tests/demo.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from 'playwright/test';
 
 import { gotoVoyagerPage } from './PageObjectModel.ts';
 

tests/express.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from 'playwright/test';
 
 import { gotoVoyagerPage } from './PageObjectModel.ts';