test: add screenshot tests with playwright

.gitattributes

@@ -0,0 +1,40 @@
+lib/tests/__screenshots__/blob/blob-chromium.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/particles/particles-Mobile-Chrome.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/particles/particles-chromium.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/particles/particles-firefox.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/bloom/bloom-Mobile-Chrome.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/bloom/bloom-chromium.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/gradient/gradient-Mobile-Safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/pointer-move/pointer-move-Mobile-Safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/bloom/bloom-safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/particles/particles-Mobile-Safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/pointer/pointer-chromium.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/pointer/pointer-safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/blob/blob-Mobile-Chrome.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/bloom/bloom-Mobile-Safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/circle/circle-safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/gradient/gradient-Mobile-Chrome.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/gradient/gradient-safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/pointer-move/pointer-move-safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/pointer/pointer-Mobile-Chrome.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/pointer/pointer-firefox.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/texture/texture-chromium.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/gradient/gradient-chromium.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/texture/texture-Mobile-Safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/texture/texture-safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/blob/blob-firefox.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/bloom/bloom-firefox.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/circle/circle-chromium.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/pointer-move/pointer-move-firefox.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/texture/texture-Mobile-Chrome.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/blob/blob-Mobile-Safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/circle/circle-Mobile-Chrome.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/circle/circle-Mobile-Safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/pointer-move/pointer-move-chromium.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/pointer/pointer-Mobile-Safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/blob/blob-safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/circle/circle-firefox.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/gradient/gradient-firefox.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/particles/particles-safari.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/pointer-move/pointer-move-Mobile-Chrome.png filter=lfs diff=lfs merge=lfs -text
+lib/tests/__screenshots__/texture/texture-firefox.png filter=lfs diff=lfs merge=lfs -text

.github/workflows/ci.yml

@@ -2,43 +2,85 @@ name: CI
 
 on:
   push:
-    branches:
-      - main
+    branches: [main]
   pull_request:
-    branches:
-      - main
+    branches: [main]
+
+env:
+  PNPM_VERSION: 9
+  NODE_VERSION: lts/*
 
 jobs:
   build:
     name: "build package"
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 9
+          version: ${{ env.PNPM_VERSION }}
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: ${{ env.NODE_VERSION }}
           cache: pnpm
 
-      - run: pnpm install
-      - run: pnpm run -r build
+      - run: pnpm --filter="./lib" install
+      - run: pnpm --filter="./lib" build
 
   static:
     name: "static checks"
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 9
+          version: ${{ env.PNPM_VERSION }}
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version: ${{ env.NODE_VERSION }}
           cache: pnpm
 
       - run: pnpm install
       - run: pnpm run -r typecheck
       - run: pnpm run -r format
       - run: pnpm run -r lint
+
+  tests:
+    name: tests - ${{ matrix.project }} (${{ matrix.browser }})
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.48.1
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - project: chromium
+            browser: chromium
+          - project: firefox
+            browser: firefox
+          - project: safari
+            browser: webkit
+          - project: android
+            browser: chromium
+          - project: iphone
+            browser: webkit
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: ${{ env.PNPM_VERSION }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: pnpm
+
+      - run: pnpm --filter="./lib" install
+      - run: xvfb-run pnpm --filter="./lib" exec playwright test --headed --project=${{ matrix.project }}
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: ${{ matrix.project }}-test-results
+          path: lib/playwright-report/
+          retention-days: 7

lib/.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

lib/package.json

@@ -28,10 +28,13 @@
 		"lint:fix": "eslint src --fix",
 		"prepack": "pnpm build",
 		"release": "changelogen --release --clean",
+		"test": "playwright test",
+		"test:ui": "playwright test --ui",
 		"typecheck": "tsc --noEmit && astro check"
 	},
 	"devDependencies": {
 		"@astrojs/check": "0.9.4",
+		"@playwright/test": "1.48.1",
 		"@types/node": "22.1.0",
 		"astro": "4.16.7",
 		"changelogen": "0.5.5",

lib/playground/src/components/SideNav.astro

@@ -1,8 +1,5 @@
 ---
-import { readdirSync } from "fs";
-
-const files = readdirSync("playground/src/pages");
-const routes = files.map((file) => file.replace(".astro", "")).filter((route) => route !== "index");
+import { routes } from "./routes";
 
 const currentPath = Astro.url.pathname;
 ---
@@ -23,14 +20,25 @@ const currentPath = Astro.url.pathname;
 
 <style>
 	nav {
-		height: 100%;
-		border-right: 1px solid rgba(255 255 255 / 0.2);
+		height: auto;
+		overflow: auto;
 	}
 
 	ul {
-		padding: 1em;
 		display: flex;
-		flex-direction: column;
+		padding-inline: 1em;
+		flex-direction: row;
+	}
+
+	@media (width > 600px) {
+		nav {
+			height: 100%;
+			border-right: 1px solid rgba(255 255 255 / 0.2);
+		}
+		ul {
+			flex-direction: column;
+			padding: 1em;
+		}
 	}
 
 	li {

lib/playground/src/components/routes.ts

@@ -0,0 +1,7 @@
+import { readdirSync } from "node:fs";
+
+const files = readdirSync("playground/src/pages");
+
+export const routes = files
+	.map((file) => file.replace(".astro", ""))
+	.filter((route) => route !== "index");

lib/playground/src/layouts/Layout.astro

@@ -40,21 +40,24 @@ import RenderCount from "../components/RenderCount.astro";
 		color-scheme: dark;
 	}
 
+	@media (width < 600px) {
+		body {
+			grid-template: auto 1fr / 1fr;
+		}
+	}
+
 	main {
 		width: 100%;
 		height: 100%;
 		display: grid;
 		place-items: center;
-	}
-
-	h1 {
-		margin-top: 0;
+		position: relative;
 	}
 
 	canvas {
 		display: block;
 		width: min(80%, 700px);
-		max-width: 80svmin;
+		max-width: 90svmin;
 		aspect-ratio: 1;
 		border: 2px solid rgba(255 255 255 / 0.2);
 		border-radius: 16px;

lib/playground/src/pages/blob.astro

@@ -14,6 +14,7 @@ import Layout from "../layouts/Layout.astro";
 		fragment,
 		vertex,
 		uniforms: {
+			uTime: 0,
 			uPointer: [0, 0],
 		},
 	});
@@ -31,14 +32,14 @@ import Layout from "../layouts/Layout.astro";
 		},
 	});
 
-	loop(() => {
-		const currentPointerCoord = { x: uniforms.uPointer[0], y: uniforms.uPointer[1] };
+	// loop(() => {
+	// 	const currentPointerCoord = { x: uniforms.uPointer[0], y: uniforms.uPointer[1] };
 
-		uniforms.uPointer = [
-			currentPointerCoord.x + (targetPointer.x - currentPointerCoord.x) * 0.05,
-			currentPointerCoord.y + (targetPointer.y - currentPointerCoord.y) * 0.05,
-		];
-	});
+	// 	uniforms.uPointer = [
+	// 		currentPointerCoord.x + (targetPointer.x - currentPointerCoord.x) * 0.05,
+	// 		currentPointerCoord.y + (targetPointer.y - currentPointerCoord.y) * 0.05,
+	// 	];
+	// });
 
 	function getCanvasGeometry(canvas: HTMLCanvasElement) {
 		const canvasGeometry = { center: { x: 0, y: 0 }, width: 0, height: 0 };

lib/playground/src/pages/gradient.astro

@@ -25,7 +25,7 @@ import Layout from "../layouts/Layout.astro";
 			}
 		`,
 		uniforms: {
-			uStrength: 0.5,
+			uStrength: 0.0,
 		},
 	});
 
@@ -83,13 +83,14 @@ import Layout from "../layouts/Layout.astro";
 
 	const compositor = useCompositor(gl, renderPass, [redColorPass]);
 
-	loop(({ time }) => {
-		redColorPass.uniforms.uStrength = Math.sin(time / 500) / 2 + 0.5;
-		compositor.render();
-	});
+	// loop(({ time }) => {
+	// redColorPass.uniforms.uStrength = Math.sin(time / 500) / 2 + 0.5;
+	// 	compositor.render();
+	// });
 
 	onCanvasResize(canvas, ({ devicePixelSize }) => {
 		setSize(devicePixelSize.width, devicePixelSize.height);
+		compositor.render();
 	});
 
 	renderPass.onAfterRender(incrementRenderCount);

lib/playground/src/pages/particles.astro

@@ -60,6 +60,7 @@ import Layout from "../layouts/Layout.astro";
 			}
 		`,
 		uniforms: {
+			uTime: 100,
 			uThreshold: 0,
 		},
 		attributes: {
@@ -76,13 +77,13 @@ import Layout from "../layouts/Layout.astro";
 
 	let direction = 1;
 
-	loop(() => {
-		uniforms.uThreshold += (count * direction) / 500;
+	// loop(() => {
+	// 	uniforms.uThreshold += (count * direction) / 500;
 
-		if (uniforms.uThreshold > count || uniforms.uThreshold < 1) {
-			direction = -direction;
-		}
-	});
+	// 	if (uniforms.uThreshold > count || uniforms.uThreshold < 1) {
+	// 		direction = -direction;
+	// 	}
+	// });
 
 	onAfterRender(incrementRenderCount);
 </script>

lib/playwright.config.ts

@@ -0,0 +1,65 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const desktopViewport = { width: 800, height: 400 };
+const mobileViewport = { width: 360, height: 640 };
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: "./tests",
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: "html",
+	use: {
+		trace: "on-first-retry",
+	},
+	snapshotPathTemplate: "{testDir}/__screenshots__/{testName}/{testName}-{projectName}{ext}",
+	expect: {
+		toMatchSnapshot: {
+			maxDiffPixelRatio: 0.01,
+		},
+	},
+	projects: [
+		{
+			name: "chromium",
+			use: {
+				...devices["Desktop Chrome"],
+				viewport: desktopViewport,
+				launchOptions: {
+					args: ["--use-gl=egl", "--ignore-gpu-blocklist", "--use-gl=angle"],
+				},
+			},
+		},
+
+		{
+			name: "firefox",
+			use: { ...devices["Desktop Firefox"], viewport: desktopViewport },
+		},
+
+		{
+			name: "safari",
+			use: { ...devices["Desktop Safari"], viewport: desktopViewport },
+		},
+		{
+			name: "android",
+			use: { ...devices["Pixel 5"], viewport: mobileViewport },
+		},
+		{
+			name: "iphone",
+			use: { ...devices["iPhone 12"], viewport: mobileViewport },
+		},
+	],
+	webServer: {
+		command: "pnpm dev",
+		url: "http://localhost:4321",
+		reuseExistingServer: !process.env.CI,
+	},
+});