Merge pull request #443 from PR0M3TH3AN/codex/add-playwright-and-visual-testing-setup

Store visual baselines as text assets
2026-10-27 07:52:24 +00:00 · 2025-10-11 14:55:21 -04:00
commit f639017298
@@ -0,0 +1,67 @@
+name: CSS & Visual Regression
+
+on:
+  pull_request:
+    paths:
+      - "css/**"
+      - "docs/**"
+      - "tests/visual/**"
+      - "package-lock.json"
+      - "package.json"
+      - "playwright.config.ts"
+      - "tailwind.config.cjs"
+      - ".github/workflows/css.yml"
+  push:
+    branches:
+      - main
+    paths:
+      - "css/**"
+      - "docs/**"
+      - "tests/visual/**"
+      - "package-lock.json"
+      - "package.json"
+      - "playwright.config.ts"
+      - "tailwind.config.cjs"
+      - ".github/workflows/css.yml"
+
+jobs:
+  css:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check CSS build artifacts are committed
+        run: npm run check:css
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run visual regression tests
+        id: visual
+        run: npm run test:visual
+        continue-on-error: true
+
+      - name: Upload Playwright artifacts
+        if: steps.visual.outcome == 'failure'
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-visual-diffs
+          path: |
+            playwright-report
+            test-results
+          if-no-files-found: ignore
+
+      - name: Fail if visual regressions detected
+        if: steps.visual.outcome == 'failure'
+        run: exit 1
@@ -2,3 +2,6 @@ saved_config.yaml
 repo-context.txt
 node_modules/
 src/webtorrent-docs/
+playwright-report/
+test-results/
+tests/visual/__snapshots__/
@@ -7,9 +7,14 @@
    "": {
      "name": "bitvid",
      "version": "1.0.0",
+      "license": "GPL-3.0-or-later",
      "devDependencies": {
+        "@playwright/test": "^1.56.0",
        "autoprefixer": "^10.4.19",
+        "cross-env": "^7.0.3",
        "jsdom": "^24.0.0",
+        "pixelmatch": "^5.3.0",
+        "pngjs": "^7.0.0",
        "postcss": "^8.4.41",
        "prettier": "^3.3.3",
        "prettier-plugin-tailwindcss": "^0.6.5",
@@ -380,6 +385,22 @@
        "node": ">=14"
      }
    },
+    "node_modules/@playwright/test": {
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.0.tgz",
+      "integrity": "sha512-Tzh95Twig7hUwwNe381/K3PggZBZblKUe2wv25oIpzWLr6Z0m4KgV1ZVIjnR6GM9ANEqjZD7XsZEa6JL/7YEgg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.56.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/agent-base": {
      "version": "7.1.4",
      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
@@ -805,6 +826,25 @@
        }
      }
    },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2223,6 +2263,86 @@
        "node": ">= 6"
      }
    },
+    "node_modules/pixelmatch": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-5.3.0.tgz",
+      "integrity": "sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "pngjs": "^6.0.0"
+      },
+      "bin": {
+        "pixelmatch": "bin/pixelmatch"
+      }
+    },
+    "node_modules/pixelmatch/node_modules/pngjs": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-6.0.0.tgz",
+      "integrity": "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.13.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.0.tgz",
+      "integrity": "sha512-X5Q1b8lOdWIE4KAoHpW3SE8HvUB+ZZsUoN64ZhjnN8dOb1UpujxBtENGiZFE+9F/yhzJwYa+ca3u43FeLbboHA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.56.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.0.tgz",
+      "integrity": "sha512-1SXl7pMfemAMSDn5rkPeZljxOCYAmQnYLBTExuh6E8USHXGSX3dx6lYZN/xPpTz1vimXmPA9CDnILvmJaB8aSQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/pngjs": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz",
+      "integrity": "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.19.0"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.5.6",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -6,11 +6,17 @@
    "build:css": "npx tailwindcss -c tailwind.config.cjs -i css/tailwind.source.css -o css/tailwind.generated.css --minify",
    "format": "prettier --cache --write css/style.css css/tailwind.source.css css/tokens.css \"docs/**/*.html\" tailwind.config.cjs README.md",
    "lint:css": "stylelint css/tailwind.source.css css/tokens.css",
-    "check:css": "npm run build:css && git diff --exit-code -- css/tailwind.generated.css"
+    "check:css": "npm run build:css && git diff --exit-code -- css/tailwind.generated.css",
+    "test:visual": "npm run build:css && npx playwright test",
+    "test:visual:update": "npm run build:css && cross-env UPDATE_VISUAL_BASELINES=1 npx playwright test"
  },
  "devDependencies": {
+    "@playwright/test": "^1.56.0",
    "autoprefixer": "^10.4.19",
+    "cross-env": "^7.0.3",
    "jsdom": "^24.0.0",
+    "pixelmatch": "^5.3.0",
+    "pngjs": "^7.0.0",
    "postcss": "^8.4.41",
    "prettier": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.5",
@@ -0,0 +1,24 @@
+import { defineConfig } from "@playwright/test";
+
+const HOST = process.env.PLAYWRIGHT_HOST ?? "127.0.0.1";
+const PORT = Number.parseInt(process.env.PLAYWRIGHT_PORT ?? "4173", 10);
+const BASE_URL = process.env.PLAYWRIGHT_BASE_URL ?? `http://${HOST}:${PORT}`;
+
+export default defineConfig({
+  testDir: "./tests/visual",
+  timeout: 60_000,
+  reporter: process.env.CI
+    ? [["github"], ["html", { open: "never" }]]
+    : [["list"], ["html", { open: "never" }]],
+  use: {
+    baseURL: BASE_URL,
+    viewport: { width: 1280, height: 720 },
+    ignoreHTTPSErrors: true,
+  },
+  webServer: {
+    command: `npx http-server . -p ${PORT} -a ${HOST} -c-1 --silent`,
+    url: `${BASE_URL}/docs/kitchen-sink.html`,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});
@@ -0,0 +1,37 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+export type KitchenSinkTheme = "default" | "light" | "contrast";
+
+type BaselineMap = Record<KitchenSinkTheme, string>;
+
+const BASELINE_FILE_PATH = resolve(__dirname, "baselines.json");
+
+let dirty = false;
+const baselines: BaselineMap = JSON.parse(
+  readFileSync(BASELINE_FILE_PATH, "utf-8")
+);
+
+export function getBaseline(theme: KitchenSinkTheme): Buffer {
+  const base64 = baselines[theme];
+
+  if (!base64) {
+    throw new Error(`Missing baseline for theme: ${theme}`);
+  }
+
+  return Buffer.from(base64, "base64");
+}
+
+export function setBaseline(theme: KitchenSinkTheme, baseline: Buffer): void {
+  baselines[theme] = baseline.toString("base64");
+  dirty = true;
+}
+
+export function saveBaselines(): void {
+  if (!dirty) {
+    return;
+  }
+
+  writeFileSync(BASELINE_FILE_PATH, `${JSON.stringify(baselines, null, 2)}\n`);
+  dirty = false;
+}
@@ -0,0 +1,5 @@
+{
+  "default": "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 truncated
+  "light": "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 truncated
+  "contrast": "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 truncated
+}
@@ -0,0 +1,115 @@
+import { expect, test } from "@playwright/test";
+import pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+import {
+  getBaseline,
+  saveBaselines,
+  setBaseline,
+  type KitchenSinkTheme
+} from "./baseline-store";
+
+const THEMES: { name: KitchenSinkTheme; value?: string }[] = [
+  { name: "default" },
+  { name: "light", value: "light" },
+  { name: "contrast", value: "contrast" }
+];
+
+const MAX_DIFF_RATIO = 0.001;
+const UPDATE_BASELINES = process.env.UPDATE_VISUAL_BASELINES === "1";
+
+test.describe.configure({ mode: "serial" });
+
+test.use({
+  viewport: { width: 1280, height: 720 }
+});
+
+test.describe("design system kitchen sink", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.emulateMedia({ reducedMotion: "reduce" });
+  });
+
+  test.afterAll(async () => {
+    if (UPDATE_BASELINES) {
+      saveBaselines();
+    }
+  });
+
+  for (const theme of THEMES) {
+    test(`renders ${theme.name} theme without regressions`, async ({
+      page
+    }, testInfo) => {
+      await page.goto("/docs/kitchen-sink.html", { waitUntil: "networkidle" });
+
+      await page.addStyleTag({
+        content:
+          "*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; caret-color: transparent !important; }"
+      });
+
+      await page.evaluate((value) => {
+        const root = document.documentElement;
+        const storageKey = "bitvid-docs-theme";
+
+        if (!value) {
+          root.removeAttribute("data-theme");
+          window.localStorage.removeItem(storageKey);
+        } else {
+          root.setAttribute("data-theme", value);
+          window.localStorage.setItem(storageKey, value);
+        }
+      }, theme.value ?? null);
+
+      await page.waitForTimeout(100);
+
+      const screenshotBuffer = await page.screenshot({
+        type: "png",
+        fullPage: true,
+        animations: "disabled"
+      });
+
+      if (UPDATE_BASELINES) {
+        setBaseline(theme.name, screenshotBuffer);
+        await testInfo.attach(`${theme.name}-actual.png`, {
+          body: screenshotBuffer,
+          contentType: "image/png"
+        });
+        return;
+      }
+
+      const baselineBuffer = getBaseline(theme.name);
+      const actual = PNG.sync.read(screenshotBuffer);
+      const expected = PNG.sync.read(baselineBuffer);
+
+      expect(actual.width).toBe(expected.width);
+      expect(actual.height).toBe(expected.height);
+
+      const diff = new PNG({ width: actual.width, height: actual.height });
+      const diffPixelCount = pixelmatch(
+        actual.data,
+        expected.data,
+        diff.data,
+        actual.width,
+        actual.height,
+        { threshold: 0.1 }
+      );
+
+      const diffRatio = diffPixelCount / (actual.width * actual.height);
+
+      if (diffPixelCount > 0) {
+        await testInfo.attach(`${theme.name}-actual.png`, {
+          body: screenshotBuffer,
+          contentType: "image/png"
+        });
+        await testInfo.attach(`${theme.name}-baseline.png`, {
+          body: baselineBuffer,
+          contentType: "image/png"
+        });
+        await testInfo.attach(`${theme.name}-diff.png`, {
+          body: PNG.sync.write(diff),
+          contentType: "image/png"
+        });
+      }
+
+      expect(diffRatio).toBeLessThanOrEqual(MAX_DIFF_RATIO);
+    });
+  }
+});