html5 自动化测试,html5 canvas自动化测试

canvas的自动化测试不太好做，因为说白了就是一张图片，在canvas上画了什么，对不对根本不知道。现在想到的唯一的方法就是截图比较吧。具体做法，说起来也很简单

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出来的，不知是我关键字不对，还是因为我太小白了。