使用 Protractor 测试画布绘图

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是否可行?

- Tomas Romero

Answer 1

我们在 Protractor 中测试画布的方式如下：

我们设置一个“众所周知”的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区域。

- Scott Davis

---

使用画布绘制了一个带有背景颜色的图像，将其保存为图像，并获取了其base64代码，但与toDataURL()方法的实际结果进行比较时，它们并不相同。 - sKopheK

那我会说你做错了。你保存的是什么类型的图像？是和toDataUrl()函数返回的一样吗？很可能不是。将toDataUrl()函数的结果作为你的已知字符串，这样测试就能通过了。如果未来有任何更改导致画布的字符串发生变化，测试也会失败——这正是应该的。 - Scott Davis

Answer 2

这可能是可行的，但您需要创建一个带有所需输出的虚拟画布。您可以将dummyCanvas的Imagedata与浏览器对象canvas的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));
      });
    });

- McLoving

---

我目前没有使用Protractor，但如果我测试了这个，我会分享结果的。这可能有效！ - Tomas Romero

Protractor 运行在 Node 中，本身不知道 'document'。你可以做到这一点，但需要跳过一堆 hoops 和 NPM 的限制。 - Scott Davis