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下载就可以了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。