playwright-canvas

Proof-of-concept demonstrating HTML Canvas scenarios testing via Playwright.

About

The key idea is to leverage Playwright's Clock API along with the Visual comparisons abilities. This allows end-to-end testing for various HTML Canvas scenarios such as gameplay loops, 3D scenes, fragment shaders outputs, etc.

Getting started

Make sure you have Node.js installed on your machine.

Then, clone this repo, open a terminal in its parent directory and install dependencies:

npm i

Build the app example:

npm run build

Install Playwright's browsers:

npx playwright install

Run the test:

npx playwright test

Warning

This test example was made on macOS (Darwin), which means that the example tests from this repo will fail for other operating systems due to some low-level rendering differences between them. If you have to do a consistent cross-platform visual regression testing with Playwright, consider using Docker.