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

@@ -14,10 +14,34 @@ jobs:
         node-version: [lts/*]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
+          cache: npm
       - run: npm clean-install
+      - run: npx playwright install --with-deps chromium
+
+      # Uncomment this if for some reason you suspect CI (Linux) build differes from local, then you can inspect output.
+      # - name: Upload dist artifact
+      #   uses: actions/upload-artifact@v4
+      #   with:
+      #     name: dist
+      #     path: dist/
+
       - run: npm test
+
+      - name: Upload Playwright rest results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-test-results
+          path: test-results/
+
+      - name: Upload Playwright e2e snapshots
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-e2e-snapshots
+          path: e2e/**/*-snapshots/

.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

@@ -19,9 +19,9 @@ <h2>20 _ timeline</h2>
 			<p>Sequencing with Timeline: sequential by default, parallel via offsets and labels.</p>
 		</div>
 		<div style="position: absolute; top: 100px; left: 400px">
-			<div id="target1" data-x="0" data-rotation="0" class="box">sequential</div>
-			<div id="target2" data-x="0" data-rotation="0" class="box">parallel</div>
-			<div id="target3" data-x="0" data-rotation="0" class="box">labels + nesting</div>
+			<div id="target1" data-y="0" data-rotation="0" class="box">sequential</div>
+			<div id="target2" data-y="0" data-rotation="0" class="box">parallel</div>
+			<div id="target3" data-y="0" data-rotation="0" class="box">labels + nesting</div>
 		</div>
 
 		<script type="module">
@@ -35,43 +35,38 @@ <h2>20 _ timeline</h2>
 			function init() {
 				// 1. Sequential: add() appends after the last child (replaces chain).
 				const target1 = document.getElementById('target1')
-				const seq = new Timeline()
-					.add(new Tween(target1.dataset).to({x: 200}, 800).easing(Easing.Quadratic.InOut))
-					.add(new Tween(target1.dataset).to({x: 0}, 800).easing(Easing.Quadratic.InOut))
-					.onUpdate(function () {
-						updateBox(target1, target1.dataset)
-					})
-				seq.start()
-				timelines.push(seq)
+				const sequence = new Timeline()
+					.add(new Tween(target1.dataset).to({y: 200}, 800).easing(Easing.Quadratic.InOut))
+					.add(new Tween(target1.dataset).to({y: 0}, 800).easing(Easing.Quadratic.InOut))
+					.onUpdate(() => updateBox(target1, target1.dataset))
+				sequence.start()
+				timelines.push(sequence)
 
 				// 2. Parallel: explicit offset 0 starts children together
 				// (two tweens, two different properties of the same box).
 				const target2 = document.getElementById('target2')
-				const par = new Timeline()
-					.add(new Tween(target2.dataset).to({x: 200}, 1000).easing(Easing.Sinusoidal.InOut), 0)
+				const parallel = new Timeline()
+					.add(new Tween(target2.dataset).to({y: 200}, 1000).easing(Easing.Sinusoidal.InOut), 0)
 					.add(new Tween(target2.dataset).to({rotation: 360}, 1000).easing(Easing.Sinusoidal.InOut), 0)
-					.onUpdate(function () {
-						updateBox(target2, target2.dataset)
-					})
-				par.start()
-				timelines.push(par)
+					.add(new Tween(target2.dataset).to({y: 0}, 1000).easing(Easing.Sinusoidal.InOut))
+					.onUpdate(() => updateBox(target2, target2.dataset))
+				parallel.start()
+				timelines.push(parallel)
 
 				// 3. Labels and nesting: an inner timeline inside an outer one.
 				// The spin starts 200ms after the 'moved' label, leaving a gap.
 				const target3 = document.getElementById('target3')
 				const inner = new Timeline()
-					.add(new Tween(target3.dataset).to({x: 200}, 600).easing(Easing.Quadratic.Out), 0)
+					.add(new Tween(target3.dataset).to({y: 200}, 600).easing(Easing.Quadratic.Out), 0)
 					.addLabel('moved', 600)
 					.add(new Tween(target3.dataset).to({rotation: 180}, 600).easing(Easing.Quadratic.InOut), {
 						at: 'moved',
 						offset: 200,
 					})
 					.add(new Tween(target3.dataset).to({rotation: 0}, 600).easing(Easing.Quadratic.InOut))
-					.add(new Tween(target3.dataset).to({x: 0}, 600).easing(Easing.Quadratic.InOut))
+					.add(new Tween(target3.dataset).to({y: 0}, 600).easing(Easing.Quadratic.InOut))
 
-				const outer = new Timeline().add(inner, 0).onUpdate(function () {
-					updateBox(target3, target3.dataset)
-				})
+				const outer = new Timeline().add(inner, 0).onUpdate(() => updateBox(target3, target3.dataset))
 				outer.start()
 				timelines.push(outer)
 			}
@@ -86,7 +81,7 @@ <h2>20 _ timeline</h2>
 
 			function updateBox(box, params) {
 				const s = box.style,
-					transform = 'translateX(' + Math.floor(params.x) + 'px) rotate(' + Math.floor(params.rotation) + 'deg)'
+					transform = 'translateY(' + Math.floor(params.y) + 'px) rotate(' + Math.floor(params.rotation) + 'deg)'
 				s.webkitTransform = transform
 				s.mozTransform = transform
 				s.transform = transform

examples/20_timeline.html

@@ -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"]
 }