Visual testing for HTML canvas drawing
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
Read Canvas Visual Testing with Retries, see the test cypress/integration/smile-spec.js.
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.
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
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.