admin管理员组

文章数量:1325756

Is there a way to test if a drawing was made on a 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 spec to test if a rectangle was drawn on the specified coordinates and, as a plus, to test if its borders are of color black.

Is this possible using Protractor/WebDriverJS API?

Is there a way to test if a drawing was made on a 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 spec to test if a rectangle was drawn on the specified coordinates and, as a plus, to test if its borders are of color black.

Is this possible using Protractor/WebDriverJS API?

Share Improve this question edited Aug 8, 2014 at 11:46 Artjom B. 62k26 gold badges135 silver badges229 bronze badges asked May 25, 2014 at 4:43 Tomas RomeroTomas Romero 8,71813 gold badges51 silver badges73 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

The way that we test our canvas in protractor is as follows:

We set up a "well known" base64 image string that represents what we want our canvas to be after we draw on it. Then we use browser.executeScript to get the dataUrl of the canvas. We then pare string to string and that tells us if the drawing was correct or not.

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 champ for us. We're experimenting with getting the Uint8ClampedArray to see if it's any easier - but so far this method is great except for a subtle gotcha.

In our experience, the image string that we get back from the toDataUrl method only represents the visible area of the canvas - not the entire canvas. It's good enough for us - but your mileage may vary. It's also why we're experimenting with thy byte array because it allows you to specify a specific X x Y area of the canvas.

This might be possible but you would have to create a dummy canvas with the desired output. you could pare the Imagedata from the dummyCanvas to the imagedata from the browser objects canvas. It should look something along the lines of:

      describe('Canvas Test', function() {
      it('should have a title', function() {
        browser.get('http://whenthetestShouldrun.');
        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));
      });
    });

本文标签: javascriptTest canvas drawings with ProtractorStack Overflow