测试画布图纸与量角器

Test canvas drawings with Protractor

本文关键字：量角器 布图纸 测试      更新时间：2023-09-26

是否有方法测试是否使用量角器在画布上制作绘图?

。我根据用户点击画了一个矩形:

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?

我们在protractor中测试画布的方法如下:

我们设置了一个"众所周知的"base64图像字符串，它代表了我们在画布上绘制后想要的图像。然后我们使用浏览器。获取画布的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);
        });
    });
});

非常适合我们。我们正在尝试获得uint8clampearray，看看它是否更容易-但到目前为止，这个方法是伟大的，除了一个微妙的问题。

根据我们的经验，从toDataUrl方法返回的图像字符串只表示画布的可见区域—而不是整个画布。这对我们来说已经足够好了，但你的情况可能会有所不同。这也是我们尝试使用字节数组的原因，因为它允许您指定画布的特定X X Y区域。

这是可能的，但是您必须创建一个具有所需输出的虚拟画布。您可以比较来自dummyCanvas的图像数据和来自浏览器对象画布的图像数据。它看起来应该像这样:

      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));
      });
    });
相关文章：