上一篇 - 如何查找界面元素

文章转自链接。

游戏类产品

Hilo 是阿里巴巴开源的一款 HTML5 跨终端游戏解决方案，ta 可以帮助开发者快速创建 HTML5 游戏。

ta 有以下几个特性：

• 多种渲染方式, 提供 DOM，Canvas，Flash，WebGL 等多种渲染方案
• 集成了物理引擎，内建骨骼动画模块
• 案例丰富，经受过双 11，双 12 等大型互动活动考验

覆盖原则

Hilo 作为作为一款功能丰富的游戏框架，对框架自身的质量要求也比较高。对核心的类和方法覆盖单元测试，而对渲染相关的方法最好的测试覆盖方式就是截图对比。

如何实现

通过 Macaca 提供的uitest模块，就可以轻松完成测试覆盖，uitest 是基于macaca-electron的轻量封装，配合mocha测试框架和断言库，完成用例。

如下是对精灵帧动画的功能测试

describe('view', function() {
    var stage, ticker;
    var stageElem = document.getElementById('stage');
    beforeEach('init stage', function() {
        stage = new Hilo.Stage({
            container:stageElem,
            renderType:'canvas',
            width:550,
            height:400
        });
        ticker = new Hilo.Ticker(60);
        ticker.addTick(stage);
        ticker.start();
    });

    afterEach('destroy stage', function() {
        ticker.removeTick(stage);
        ticker.stop();
        if(stage.drawable && stage.drawable.domElement && stage.drawable.domElement.parentNode){
            stage.drawable.domElement.parentNode.removeChild(stage.drawable.domElement);
        }
        else if(stage.canvas && stage.canvas.parentNode){
            stage.canvas.parentNode.removeChild(stage.canvas);
        }
        stage = null;
        ticker = null;
    });

    describe('Sprite', function() {
        var atlas, sprite;
        beforeEach('init atlas', function(done){
            utils.loadImage('images/fish.png', function(img){
                atlas = new Hilo.TextureAtlas({
                    image: img,
                    width: 174,
                    height: 1512,
                    frames: {
                        frameWidth: 174,
                        frameHeight: 126,
                        numFrames: 12
                    },
                    sprites: {
                        fish: {from:0, to:7}
                    }
                });
                sprite = new Hilo.Sprite({
                    frames: atlas.getSprite('fish')
                });
                stage.addChild(sprite);
                done();
            });
        });

        it('goto frame 1 should work', function(done){
            sprite.goto(1, true);
            utils.diffWithScreenshot('Sprite-goto-frame1', done);
        });

        it('goto frame 7 should work', function(done){
            sprite.goto(7, true);
            utils.diffWithScreenshot('Sprite-goto-frame7', done);
        });
    });
    ...
});

还需要配合截图并与提交到仓库的预期图片相对比 (imagediff)

多运行环境

使用 Macaca 进行覆盖还有个优势，可以在没有屏幕的服务器端运行，也兼容正常浏览器环境的测试。服务端与浏览器端输出完全一致。

相关链接

• Macaca 官网

欢迎讨论，互相学习。

微博: http://weibo.com/xudafeng
Github: https://github.com/xudafeng

下一篇 - Macaca 已支持 Java 和 Python