bahmutov / monalego

Visual testing for HTML canvas drawing

MonaLego

Visual testing for HTML canvas drawing

Mona Lisa example

This Legra.js demo copied from from legra-monalisa.glitch.me/

The test in cypress/integration/mona-spec.js changes the brick size and saves the produced Lego image as a local file.

Related: Fast legoization

Smiley face

Read Canvas Visual Testing with Retries, see the test cypress/integration/smile-spec.js.

Pixel match in the browser

Look at pixelmatch-spec.js where we compare the canvas image to itself after N milliseconds using pixelmatch library. This let's us retry until the canvas stabilizes and becomes static - which means the animation has finished.

Watch the video Canvas image diffing in the browser using pixelmatch.

Bar chart

An animated Chart.js bar chart with multiple visual diffs against it. You can change the animation duration in public/bar.html, the test should still work.

Watch the video for more details

Native screenshots

This repository is showing how to use Chrome debugger protocol to capture the browser screenshot natively in Chrome browsers. See the screenshot-spec.js test file.

monalego's Issues

can we compare images in the browser?

Maybe instead of downloading the canvas as PNG we could load the gold image and compare it in the browser

Figure out the size of the captured canvas

On CI the window size is 1280x720, but locally we saved the canvas image at 1331 × 664 pixels

We need to generate good images at the same expected resolution https://www.cypress.io/blog/2021/03/01/generate-high-resolution-videos-and-screenshots/

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

---

Warning

Renovate failed to look up the following dependencies: Could not determine new digest for update (cdnjs package Chart.js/Chart.min.js).

Files affected: public/bar.html

---

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency cypress to v13
• Update dependency pixelmatch to v6
• Update dependency serve to v14
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/badges.yml

• actions/checkout v4
• stefanzweifel/git-auto-commit-action v5

.github/workflows/main.yml

• actions/checkout v4
• cypress-io/github-action v2
• actions/upload-artifact v4
• ubuntu 22.04

html

public/bar.html

• Chart.js 2.9.4@sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==

npm

package.json

• cypress 9.7.0
• cypress-recurse 1.35.3
• odiff-bin 3.0.1
• pixelmatch 5.3.0
• pngjs 7.0.0
• prettier 3.3.3
• serve 12.0.1
• start-server-and-test 2.0.5

---

• Check this box to trigger a request for Renovate to run again on this repository

Save per-image diff

Otherwise, the next image diff overwrites the previous one

figure out how to save the canvas file without base64

grab the blob, then array buffer, then save binary file? Could not get it to save a valid file

Add image diff

Via https://github.com/dmtrKovalenko/odiff

Check how it can compare Mac golden images against Linux

Seems the Linux does render the Mona Lisa image differently

original image

diff image from Mac