用量角器测试画布图纸 [英] Test canvas drawings with Protractor

问题描述

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

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

i.e. I draw a rectangle based on user clicks:

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

想要测试是否在指定的坐标上绘制了一个矩形，并且作为加号测试其边框是否为黑色。

Now I want to make a spec to test if a rectangle was drawn on the specified coordinates and, as a plus, to test if its borders are of color black.

这是可能的使用Protractor / WebDriverJS API？

Is this possible using Protractor/WebDriverJS API?

推荐答案

我们用量角器测试画布的方式如下：

The way that we test our canvas in protractor is as follows:

我们设置了一个众所周知的base64图像字符串，表示我们在绘制之后我们想要的画布。然后我们使用browser.executeScript来获取canvas的dataUrl。然后我们比较字符串到字符串，并告诉我们图形是否正确。

We set up a "well known" base64 image string that represents what we want our canvas to be after we draw on it. Then we use browser.executeScript to get the dataUrl of the canvas. We then compare string to string and that tells us if the drawing was correct or not.

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看看它是否更容易 - 但到目前为止这个方法是伟大的，除了一个微妙的骗子。

Works like a champ for us. We're experimenting with getting the Uint8ClampedArray to see if it's any easier - but so far this method is great except for a subtle gotcha.

根据我们的经验，从toDataUrl方法获取的图片字符串只代表画布的可见区域，而不是整个画布 。这对我们来说足够好了，但你的里程可能会有所不同。这也是为什么我们正在试验你的字节数组，因为它允许你指定一个特定的X×Y区域的画布。

In our experience, the image string that we get back from the toDataUrl method only represents the visible area of the canvas - not the entire canvas. It's good enough for us - but your mileage may vary. It's also why we're experimenting with thy byte array because it allows you to specify a specific X x Y area of the canvas.

这篇关于用量角器测试画布图纸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！