背景：我们做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/
- Selenium
- 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/
- PhatomJS
- CasperJS
- 特点：基于PhatomJS的UI自动化测试框架。
- 官网：http://casperjs.org/
总结：
上面的框架的目标都是实现对浏览器dom元素的操作，并支持测试需要的各种断言方法assert，殊途同归，其中WebDriver已经成为w3c的标准，大部分non-headless框架也是对WebDriver标准的不同实现。
不同的框架可以组合使用，相互弥补一些特性上的缺陷和不足
再结合一些测试管理框架+持续集成工具，就可以将整个UI测试的自动化框架搭建起来
CodeceptJS的代码风格比较有意思，其他的框架都是把用户操作翻译为浏览器的动作，CodeceptJS就是原滋原味的用户动作语言：我打开页面，我点击按钮，我输入文本......
