html5 canvas自动化测试

本文探讨了HTML5 Canvas自动化测试的挑战,提出通过截图比较的解决方案。首先手动验证测试用例,保存正确结果的Canvas图像作为期望图,然后利用resemble.js库进行图像比较,判断差异百分比,实现断言。这种方法虽简单,但在搜索引擎中不易找到相关信息。
摘要由CSDN通过智能技术生成

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代表了两张图的差异百分比。

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

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值