有没有一种方法可以测试是否使用 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 吗？
【问题讨论】：
标签： javascript canvas selenium-webdriver webdriver 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 区域。
【讨论】：
这可能是可能的，但您必须创建一个具有所需输出的虚拟画布。 您可以将 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));
});
});
【讨论】：