Canvas Test Drawings Using the Transporter

Question

Is there a way to check if a drawing was done on canvas using Protractor ?

i.e. I draw a rectangle based on user clicks:

var shape = new createjs.Shape(); shape.graphics.beginStroke("black"); shape.graphics.drawRect(crd.x, crd.y, crd.width, crd.height); stage.addChild(shape) stage.update() 

Now I want to make a specification to check whether the rectangle was drawn at the specified coordinates and, as a plus, check whether its borders are black.

Is this possible using the Protractor / WebDriverJS API?

Answer 1

The way to check our canvas in the transporter is as follows:

We set the "well-known" base64 image line, which represents what we want our canvas to be after we draw it. Then we use browser.executeScript to get the dataUrl of the canvas. Then we compare the line with the line and indicate the correctness of the picture.

 var base64ImageString = "data:image/png;base64,iVBORw0KGgoAA...snipped for brevity"; describe("The Canvas", function () { browser.get('/#')); /* . do your drawing . */ it("should contain the right drawings", function(){ browser.executeScript("return document.getElementsByTagName('canvas')[0].toDataURL()").then(function (result) { expect(result).toBe(base64ImageString); }); }); }); 

Works like a champion for us. We are experimenting with getting a Uint8ClampedArray to see if this is easier, but so far this method is different, except for the thin gotcha.

In our experience, the line of the image that we return from the toDataUrl method represents only the visible area of ​​the canvas — not the entire canvas . This is good enough for us, but your mileage may vary. This is also why we are experimenting with your byte array, because it allows you to specify a specific area X x Y on the canvas.

Answer 2

It may be possible, but you will need to create a dummy canvas with the desired output. you can compare Imagedata with dummyCanvas with imagedata from a canvas of browser objects. It should look something like this:

  describe('Canvas Test', function() { it('should have a title', function() { browser.get('http://whenthetestShouldrun.com'); var dummyCanvas= document.createElement('canvas'); //some code to edit the canvas to what you want expect(browser.By.id('canvas').getImageData(imageX, imageY, imageWidth, imageHeight)).toEqual(dummyCanvas.getImageData(imageX, imageY, imageWidth, imageHeight)); }); });