add playwright-based e2e tests with visual regression testing, add a snapshot test of the 03_graphs example for starters. Update tsconfig to ignore compiling TS files in e2e/, playwright handles those directly

Author: trusktr

.github/workflows/tests.yml

@@ -20,4 +20,5 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm clean-install
+      - run: npx playwright install --with-deps chromium
       - run: npm test

.gitignore

@@ -5,3 +5,4 @@
 build/npm*
 node_modules
 npm-debug.log
+test-results/

e2e/graphs.spec.ts

@@ -0,0 +1,14 @@
+import {test, expect} from '@playwright/test'
+
+test('03_graphs.html — easing curve thumbnails', async ({page}) => {
+	await page.goto('/examples/03_graphs.html', {waitUntil: 'load'})
+
+	// Wait for the 2000ms tween animations to finish drawing all curves.
+	await page.waitForTimeout(2500)
+
+	// The grid of canvas thumbnails should now show complete easing curves.
+	await expect(page).toHaveScreenshot('03_graphs.webp', {
+		fullPage: true,
+		maxDiffPixelRatio: 0.01,
+	})
+})

e2e/graphs.spec.ts-snapshots/03-graphs.webp

@@ -0,0 +1,16 @@
+import {defineConfig} from '@playwright/test'
+
+export default defineConfig({
+	testDir: '.',
+	snapshotPathTemplate: '{snapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}',
+	webServer: {
+		command: 'python3 -m http.server 3333',
+		cwd: process.cwd(),
+		port: 3333,
+		reuseExistingServer: true,
+	},
+	use: {
+		baseURL: 'http://localhost:3333',
+		viewport: {width: 1280, height: 1030},
+	},
+})

e2e/playwright.config.ts

@@ -31,16 +31,17 @@
 		"tween",
 		"interpolation"
 	],
-	"dependencies": {},
 	"scripts": {
 		"dev": "(npm run tsc-watch -- --preserveWatchOutput & p1=$!; npm run rollup-build -- --watch & p2=$!; wait $p1 $p2)",
 		"build": "rimraf dist .tmp && node scripts/write-version.js && npm run tsc && npm run rollup-build",
 		"rollup-build": "rollup -c ./rollup.config.js",
 		"tsc": "tsc",
 		"tsc-watch": "tsc --watch",
 		"examples": "npx serve .",
-		"test": "npm run build && npm run test-lint && npm run test-unit",
+		"test": "npm run build && npm run test-lint && npm run test-unit && npm run test-e2e",
 		"test-unit": "nodeunit test/unit/nodeunitheadless.cjs",
+		"test-e2e": "playwright test e2e/ --config=e2e/playwright.config.ts",
+		"test-e2e-update-snapshots": "playwright test e2e/ --config=e2e/playwright.config.ts --update-snapshots",
 		"test-lint": "npm run prettier -- --check",
 		"lint": "npm run prettier -- --write",
 		"prettier": "prettier .",
@@ -53,6 +54,7 @@
 	},
 	"author": "tween.js contributors (https://github.com/tweenjs/tween.js/graphs/contributors)",
 	"devDependencies": {
+		"@playwright/test": "^1.63.0",
 		"nodeunit": "^0.11.3",
 		"prettier": "^3.0.0",
 		"rimraf": "^3.0.0",

package-lock.json

@@ -14,5 +14,6 @@
 		"ignoreDeprecations": "5.0",
 		"importsNotUsedAsValues": "error"
 	},
+	"include": ["src"], // we don't need to compile e2e/ (playwright handles .ts files there), only src/
 	"exclude": ["node_modules", "examples"]
 }