使用macaca进行移动端hybird自动化测试(一)

部分基本概念及内容：

单元测试：

以模块为单元，测试你代码的本身，确保你编写的模块还有逻辑正确。只要输入的值不变，输出的值也应该不发生改变

前端自动化测试：

• 界面回归测试 测试界面是否正常，包括文案，图片等。

• 功能测试 包括交互逻辑和功能模块是否符合预期。

• 性能测试 页面性能越来越受到关注，并且性能需要在开发过程中持续关注，否则很容易随着业务迭代而下降。

本文主要的内容集中在界面回归测试和功能测试。这2部分的测试工作是通过模拟用户进行页面操作，通过查看页面状态的变化，从而检测功能是否运行正常：它的测试流程是：

1. DOM元素选取

2. 触发DOM元素绑定事件

3. 查看绑定事件结果是否符号预期

如何去做前端UI自动化测试

要完成前端UI自动化测试至少需要测试框架，断言库。

工具的选择

Headless无界面:

1. PhantomJS.包含了WebKit浏览器引擎和JavaScript API的脚本解释器，因此可以去运行js代码。只不过不提供图形界面，其他的功能都和浏览器一样。比如一些爬虫爬了网站，这个网站并不是静态的，那么需要执行Js才行。因此PhantomJS提供了执行页面中的代码功能。

2. casperjs.基于PhantomJS进行开发，提供的功能也和PhantomJS，不过语法更加简练。不像PhantomJS callback hell那样恶心。同时和PhantomJS不同的地方还在于它直接提供了测试的功能，比如对远程DOM的断言测试，还能编写功能测试套件。具体的API文档参见casperjs的官网。

    casper.start('http://www.google.fr/', function() {                                          //打开谷歌主页,添加页面加载完成时的回调函数
    this.test.assertTitle('Google', 'google homepage title is the one expected');           //检测页面标题是否是'Google',如果是,输出第二个参数指定的字符串
    this.test.assertExists('form[action="/search"]', 'main form is found');                 //检测页面中是否存在选择器指定的元素,如果存在输出第二个参数指定的字符串
    this.fill('form[action="/search"]', {                                                   //填充表单并提交,执行搜索操作
        q: 'foo'
    }, true);
});

casper.then(function() {
    this.test.assertTitle('foo - Recherche Google', 'google title is ok');                  //检测搜索结果页的页面标题是否正确    
    this.test.assertUrlMatch(/q=foo/, 'search term has been submitted');                    //检测搜索结果页的网址是否匹配指定的正则表达式
    this.test.assertEval(function() {
        return __utils__.findAll('h3.r').length >= 10;                                      //自定义一个检测函数
    }, 'google search for "foo" retrieves 10 or more results');
});

casper.run(function() {
    this.test.renderResults(true);                                                          //输出检测结果
});

UI测试

1. nightwatch (简单的语法，可以快速上手使用强大的 Selenium WebDriver API 来在 DOM 元素上执行命令和断言)

    module.exports = {
  'Demo test Google' : function (client) {
    client
      .url('http://www.google.com')
      .waitForElementVisible('body', 1000)
      .assert.title('Google')
      .assert.visible('input[type=text]')
      .setValue('input[type=text]', 'rembrandt van rijn')
      .waitForElementVisible('button[name=btnG]', 1000)
      .click('button[name=btnG]')
      .pause(1000)
      .assert.containsText('ol#rso li:first-child',
        'Rembrandt - Wikipedia')
      .end();
  }
};

1. nightmare.js 基于phatomJS为测试封装的的一套High level Api(非常的语义化：click, refresh, goto...).同时nightmare还基于electron，那么它也提供了GUI的界面工具，当你使用nightmare.js进行自动化测试的时候就可以看到所有的模拟用户动作了。

yield Nightmare()
  .goto('http://yahoo.com')
  .type('input[title="Search"]', 'github nightmare')
  .click('.searchsubmit');

1. protractor angular的亲儿子，angular团队自己开发的e2e测试工具。同样提供模拟用户的操作的API，来验证Angular运行状况。

2. selenium 暂时还没用过，网上有大量的关于它的资料

3. macaca 本系列要讲的重点

4. Appium 支持ios/android/firefoxos多种平台的测试，native、h5、hybrid都支持，以及所有支持jsonWireProtocal协议的脚本语言：python，java，nodejs ruby都可以用来书写用例.它实际上包含了: a. 基于express的server用于发送/接收client端的协议命令;

5. 作为bootstrap客户端用于将命令传递给对应的UIAutomator/UIAutomation/Google’s Instrumentation

测试框架

测试框架的作用就是运行测试开发人员编写的脚本工具，测试框架会抓取到代码抛出的AssertionError，并在控制台或者网页中输出。测试框架提供了特定的测试语法，一般分为两类TDD(测试驱动开发)和BDD(行为驱动开发)。测试框架通常提供TDD（测试驱动开发）或BDD（行为驱动开发）的测试语法来编写测试用例。

TDD：是指先写好测试代码，然后再根据测试来写代码。它的步骤一般是：

1. 写个测试

2. 写出最少数量的代码，使其保持测试通过

3. 优化代码

4. 重复前面的工作

BDD：不去针对代码细节，而是针对行为进行测试

现在用的比较多的测试框架是:

1. mocha

2. jasmine

断言库

断言的作用就是判断源码的实际执行结果与预期结果是否相同，如果不一致就抛出一个错误。

• chai

chai.js提供了assert, expect, should三种风格的断言。可根据自己的喜好去选择断言风格。具体API请查阅相关的文档。

利用上面的工具基本上就可以开始进行测试脚本的测试工作了。

下面一篇文章就会介绍如何使用macaca来对hybird应用进行测试。