PC端WebUI自动化测试框架简介

背景：我们做PC端的WebUI自动化测试时，经常会听到selenium、webdriver等框架，我们希望能够了解各个框架区别是什么，相互之间是否有继承关系；同时现在各个互联网公司都喜欢基于一些UI自动化测试的工具定制一套测试框架，希望能够一眼识别这些定制框架的背后实现技术。

我们常用到的PC端WebUI自动化框架：

UI端到端测试框架：

• 基于non-headless browser
  • Selenium
    • Selenium通常指的是Selenium1.0，也就是Selenium Remote Control（Selenium RC），是一套浏览器dom元素操作接口实现，可以在很多的测试框架以及语言中集成。
    • 5年前在华为做Web网管UI自动化测试的时候就是用Ruby+Selenium RC去做的，每次测试前，都需要单独启动Selenium的Server端，印象十分深刻。
    • 官网：http://docs.seleniumhq.org/projects/remote-control/
  • Selenium WebDriver
    • 我们通常可以称之为：Selenium 2.0或者WebDriver
    • Selenium WebDriver是Selenium RC的继承者，是Selenium和WebDriver Api的结合
    • 官网是这样说的：Selenium 1.0 + WebDriver = Selenium 2.0。
    • 官网：http://docs.seleniumhq.org/projects/webdriver/
  • WebDriver
    • WebDriver可以是指Selenium 2.0，也多指最新的w3c候选标准WebDriver。
    • 绝大多数的non-headless框架都是对WebDriver的不同实现。
    • 官网：https://www.w3.org/TR/webdriver/
  • WebdriverIO
    • WebdriverIO是基于Webdriver API的一种node.js实现，是一种端到端的测试框架
    • 官网：http://webdriver.io/

• Nightwatch
  • Nightwatch是基于Webdriver API的一种node.js实现，是一种端到端的测试框架，和WebDriverIO一起是我最常用的2种UI测试框架
  • 官网：http://nightwatchjs.org/
  • 环境搭建：http://www.jianshu.com/p/b21afbf584f6

var wait_time = 5000;
module.exports = {
    before: function (browser) {
        // 打开页面
        browser.maximizeWindow()
            .deleteCookies()
            .url(loginUrl)
            .waitForElementVisible("body", wait_time)
            .pause(wait_time);
    },

    after: function (browser) {
        browser.end();
    },

    "01_进入XXXX管理页面": function (browser) {
        // 检查XXX管理页面正常
        browser
            .assert.containsText(bt_batch_modify, '测试按钮')
            .assert.elementPresent(ct_workshift);
    }
}

• Nightmare
  • 官网：http://www.nightmarejs.org/
  • Nightmare是基于Electron的一个浏览器操作lib，Electron和PhatomJS类似
  • 实际使用发现Nightmare运行时是会打开浏览器的，和headless模式不同
  • 可以使用mocha框架来运行基于Nightmare的UI自动化用例

/**
 * Created by arthur.hw on 2017/7/20.
 */
var Nightmare = require('nightmare');
var nightmare = Nightmare({ show: true });

nightmare
    .goto('https://www.baidu.com/')
    .type('#kw', 'nightmare')
    .click('#su')
    .end()
    .then(function (result) {
        console.log(result);
    })
    .catch(function (error) {
        console.error('Search failed:', error);
    });

• CodeceptJS
  • 官网：http://codecept.io/

  • CodeceptJS对页面DOM元素的操作是基于WebDriverIO、Protractor这些框架封装，且可以根据自己的偏好来设置

    
    

// 有味道的CodeceptJS代码风格
Feature('CodeceptJS Demonstration');

Scenario('submit form successfully', (I) =>

  I.amOnPage('/documentation')

  I.fillField('Email', 'hello@world.com')

  I.fillField('Password', '123456')

  I.checkOption('Active')

  I.checkOption('Male');

  I.click('Create User')

  I.see('User is valid')

  I.dontSeeInCurrentUrl('/documentation')

});

• Protractor
  • 原设计初衷是针对Angular/AngularJS的应用的端到端测试框架
  • 需要单独启动selenium server（吐槽下）
  • 官网：http://www.protractortest.org/#/
    

• 基于headless browser
  headless介绍：https://en.wikipedia.org/wiki/Headless_browser
  headless browser就是没有图形化界面的浏览器，通过命令行界面的方式来运行浏览器，通常是基于webkit，不依赖于具体的浏览器。
  • PhatomJS
    • 特点：PhatomJS并不是一个测试框架，只是提供了一套headless browser的操作接口及实现，UI自动化测试只是PhatomJS的一个应用场景。
    • 官网：http://phantomjs.org/

• CasperJS
  • 特点：基于PhatomJS的UI自动化测试框架。
  • 官网：http://casperjs.org/

总结：

• 上面的框架的目标都是实现对浏览器dom元素的操作，并支持测试需要的各种断言方法assert，殊途同归，其中WebDriver已经成为w3c的标准，大部分non-headless框架也是对WebDriver标准的不同实现。

• 不同的框架可以组合使用，相互弥补一些特性上的缺陷和不足

• 再结合一些测试管理框架+持续集成工具，就可以将整个UI测试的自动化框架搭建起来

• CodeceptJS的代码风格比较有意思，其他的框架都是把用户操作翻译为浏览器的动作，CodeceptJS就是原滋原味的用户动作语言：我打开页面，我点击按钮，我输入文本......