feat: Added playwright to example site + gh action for CI

Author: lamATnginx

.github/workflows/playwright.yml

@@ -0,0 +1,37 @@
+name: Testing for visual regression on old theme
+
+# Run the workflow when code is pushed or when a pull request is created
+on:
+    push:
+      branches:
+        - '**'
+    pull_request:
+      branches:
+        - main
+
+jobs:
+    playwright:
+        name: Run Playwright
+        runs-on: ubuntu-latest
+        steps: 
+          # Checkout the repository so the workflow has access to the code
+          - name: Checkout code
+            uses: actions/checkout@v3
+          - name: Install dependencies
+            run: cd tests && npm ci
+          - name: Install Playwright browsers
+            run: npx playwright install --with-deps
+          - name: Run Playwright tests
+            run: make tests
+          - uses: actions/upload-artifact@v4
+            if: ${{ !cancelled() }}
+            with:
+              name: playwright-report
+              path: tests/playwright-report/
+              retention-days: 30
+          - uses: actions/upload-artifact@v4
+            if: ${{ !cancelled() }}
+            with:
+              name: test-results
+              path: tests/test-results/
+              retention-days: 30

.gitignore

@@ -15,7 +15,7 @@ Thumbs.db
 ########
 *.log
 
-node_modules/*
+*/node_modules
 .markdownlint.json
 resources/*
 
@@ -27,4 +27,9 @@ public/*
 exampleSite/public
 
 # Python
-.venv
+.venv
+
+# Playwright
+/coverage
+*/test-results
+*/playwright-report

Makefile

@@ -12,9 +12,12 @@ list help::
 	@echo "		  biome-lint: 		Runs the biome linter."
 	@echo "		   biome-all:		Runs both the lint and formatting commands."
 	@echo "  (Set BIOME_ARGS to add additional arguments to biome command (ex: make biome-all BIOME_ARGS=write))"
+	@echo "<PRE-COMMIT>"
+	@echo "	setup-pre-commit: 		Sets up pre-commit (assuming it is installed)"
+	@echo "<PLAYWRIGHT TESTS>"
+	@echo "		     	test: 		Runs playwright against the old theme."
 
-.PHONY: biome-format biome-lint biome-all setup-pre-commit
-BIOME_ARGS ?= 
+.PHONY: biome-format biome-lint biome-all setup-pre-commit tests
 FLAG :=
 ifeq ($(BIOME_ARGS), write)
 	FLAG := $(WRITE_FLAG)
@@ -36,3 +39,6 @@ setup-pre-commit:
 		pre-commit install --hook-type commit-msg; \
 		echo "pre-commit hooks have been successfully installed."; \
 	fi
+
+tests:
+	cd tests && npx playwright test

biome.json

@@ -22,7 +22,9 @@
       "**/coveo.css",
       "**/f5-hugo.css",
       "**/highlight.css",
-      "**/*-overrides.css"
+      "**/*-overrides.css",
+      "public/*",
+      "test-results/*"
     ]
   },
   "formatter": {

tests/package-lock.json

@@ -0,0 +1,8 @@
+{
+  "name": "nginx-docs-theme-test",
+  "version": "1.0.0",
+  "private": "true",
+  "devDependencies": {
+    "@playwright/test": "^1.48.0"
+  }
+}

tests/package.json

@@ -0,0 +1,47 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const BASE_URL = 'http://127.0.0.1';
+const PORT = 1313;
+export default defineConfig({
+  testDir: './src',
+  fullyParallel: true,
+  workers: 1,
+  outputDir: './test-results',
+  snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
+  reporter: [['html', { outputFolder: './playwright-report' }]],
+  use: {
+    baseURL: `${BASE_URL}:${PORT}`,
+    screenshots: 'only-on-failure',
+    video: 'retain-on-failure',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+  ],
+  webServer: {
+    command: `cd ../exampleSite && hugo mod get && hugo --gc -e production && hugo serve --port ${PORT}`,
+    url: `${BASE_URL}:${PORT}`,
+    stdout: 'ignore',
+  },
+  expect: {
+    toHaveScreenshot: {
+      pathTemplate:
+        '{testDir}/__screenshots__{/projectName}/{testFilePath}/{arg}{ext}',
+    },
+  },
+});

tests/playwright.config.js

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Testing old theme', () => {
+  test('should ensure the old theme does not visually regress', async ({
+    page,
+  }) => {
+    const currentPlus = 'nginx/installing-nginx-open-source/';
+    await page.goto(`/${currentPlus}`, { waitUntil: 'networkidle' });
+    await page.evaluate(() => {
+      // switch to old theme
+      useNewTheme(false);
+    });
+    await page.waitForTimeout(500);
+    await page.screenshot({
+      path: './test-results/example-site-snapshot.png',
+      fullPage: true,
+    });
+
+    await expect(page).toHaveScreenshot('example-site-screenshot.png');
+  });
+});