Jasmine Pixelmatch

HTML5 canvas visual difference checking in the Jasmine test framework with pixelmatch.

Features

• See differences
• Base64 image dump of images in headless environments

Installation

npm install @recreatejs/jasmine-pixelmatch

Example

To obtain a reference image to compare against, just set up your test with no reference image, like so:

describe("visual canvas test",function(){it("looks right",function(done){letcanvas=drawACanvas(200,200);letcontext=canvas.getContext("2d");letcanvasData=context.getImageData(0,0,canvas.width,canvas.height);expect(canvasData).toVisuallyEqual();// no argument});});

Then save the image shown, and make it available to the test runner.

Update your test to load and pass in the image:

describe("visual canvas test",function(){it("looks right",asyncfunction(done){letcanvas=drawACanvas(200,200);letcontext=canvas.getContext("2d");letcanvasData=context.getImageData(0,0,canvas.width,canvas.height);letreferenceData=awaitfetchImageData("saved_image.png");expect(canvasData).toVisuallyEqual(referenceData);});});