html5 canvas自动化测试

当前位置 : 首页 > 网页制作 > html5 > html5 canvas自动化测试

html5 canvas自动化测试

来源: 作者: 时间:2016-01-30 08:53
canvas的自动化测试不太好做,因为说白了就是一张图片,在canvas上画了什么,对不对根本不知道。现在想到的唯一的方法就是截图比较吧。具体做法,说起来也很简单。先把case写好,然

canvas的自动化测试不太好做,因为说白了就是一张图片,在canvas上画了什么,对不对根本不知道。

现在想到的唯一的方法就是截图比较吧。

具体做法,说起来也很简单。

先把case写好,然后跑起来,先人工确认下对不对,如果对了,ok,把canvas的图截下来,作为一张期望图。之后把case改成直接跟这个期望图比较。

图和图的比较就需要一些库的支持了。

我用过的是resemble,代码在github上。

这个东西也很简单。

上代码

function compare(){
                var str = canvasElement.toDataURL('image/png');
                resemble(str)
                        .compareTo('xxx.jpg')
                        .onComplete(function (data) {
                            console.log(data.isSameDimensions + " " + data.misMatchPercentage);
                        });
            }
就是先用toDataURL把canvas的内容转成图片,然后跟期望图来比较。

出来的结果中

isSameDimensions标志两张图是否一样大,

misMatchPercentage代表了两张图的差异百分比。

有了这个,就可以愉快的断言了。

再说说怎么生成这个期望图。

也很简单

            function savepic()
            {
                var str = canvasElement.toDataURL('image/png');
                var link = document.createElement("a");
                link.download = "abc";
                link.href = str;
                link.click();

            }
还是用toDataURL,然后创建一个link,调用click就可以了。


顺便吐槽下,这么简单的方法,百度了很久也没有,还是google出来的,不知是我关键字不对,还是因为我太小白了。


Tag:
网友评论

<