使用量角器测试画布图

Question

有没有办法测试绘图是否是使用Protractor在画布上制作的？

即我根据用户点击绘制一个矩形:

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()

现在我想制作一个规范来测试是否在指定的坐标上绘制了一个矩形,并且作为一个加号,测试它的边框是否为黑色.

使用Protractor/WebDriverJS API可以实现吗？

Answer 1

我们在量角器中测试画布的方式如下:

我们设置了一个"众所周知的"base64图像字符串,它代表我们在绘制它之后想要的画布.然后我们使用browser.executeScript来获取画布的dataUrl.然后我们将字符串与字符串进行比较,并告诉我们图形是否正确.

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);
        });
    });
});

像我们的冠军一样工作.我们正在尝试获取Uint8ClampedArray以查看它是否更容易 - 但到目前为止,这种方法很棒,除了一个微妙的陷阱.

根据我们的经验,我们从toDataUrl方法返回的图像字符串仅表示画布的可见区域 - 而不是整个画布.这对我们来说已经足够了 - 但你的里程可能会有所不同.这也是我们试验你的字节数组的原因,因为它允许你指定画布的特定X x Y区域.

Answer 2

这可能是可能的，但您必须创建一个具有所需输出的虚拟画布。您可以将虚拟画布中的图像数据与浏览器对象画布中的图像数据进行比较。它看起来应该类似于：

      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));
      });
    });