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

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

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

使用量角器测试画布图

2 个答案: