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

Author: lamATnginx

.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,46 @@
+import { defineConfig, devices } from '@playwright/test';
+
+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: 'http://127.0.0.1:1314',
+    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 1314',
+    url: 'http://127.0.0.1:1314',
+    stdout: 'ignore',
+  },
+  expect: {
+    toHaveScreenshot: {
+      pathTemplate:
+        '{testDir}/__screenshots__{/projectName}/{testFilePath}/{arg}{ext}',
+    },
+  },
+});