背景：我們做PC端的WebUI自動(dòng)化測(cè)試時(shí)滩愁，經(jīng)常會(huì)聽(tīng)到selenium、webdriver等框架瞧筛，我們希望能夠了解各個(gè)框架區(qū)別是什么，相互之間是否有繼承關(guān)系导盅；同時(shí)現(xiàn)在各個(gè)互聯(lián)網(wǎng)公司都喜歡基于一些UI自動(dòng)化測(cè)試的工具定制一套測(cè)試框架较幌，希望能夠一眼識(shí)別這些定制框架的背后實(shí)現(xiàn)技術(shù)。
我們常用到的PC端WebUI自動(dòng)化框架：
UI端到端測(cè)試框架：
- 基于non-headless browser
- Selenium
- Selenium通常指的是Selenium1.0白翻，也就是Selenium Remote Control（Selenium RC）乍炉，是一套瀏覽器dom元素操作接口實(shí)現(xiàn)绢片，可以在很多的測(cè)試框架以及語(yǔ)言中集成。
- 5年前在華為做Web網(wǎng)管UI自動(dòng)化測(cè)試的時(shí)候就是用Ruby+Selenium RC去做的岛琼，每次測(cè)試前底循，都需要單獨(dú)啟動(dòng)Selenium的Server端，印象十分深刻槐瑞。
- 官網(wǎng)：http://docs.seleniumhq.org/projects/remote-control/
- Selenium WebDriver
- 我們通澄醯樱可以稱之為：Selenium 2.0或者WebDriver
- Selenium WebDriver是Selenium RC的繼承者，是Selenium和WebDriver Api的結(jié)合
- 官網(wǎng)是這樣說(shuō)的：Selenium 1.0 + WebDriver = Selenium 2.0困檩。
- 官網(wǎng)：http://docs.seleniumhq.org/projects/webdriver/
- WebDriver
- WebDriver可以是指Selenium 2.0祠挫，也多指最新的w3c候選標(biāo)準(zhǔn)WebDriver。
- 絕大多數(shù)的non-headless框架都是對(duì)WebDriver的不同實(shí)現(xiàn)悼沿。
- 官網(wǎng)：https://www.w3.org/TR/webdriver/
- WebdriverIO
- WebdriverIO是基于Webdriver API的一種node.js實(shí)現(xiàn)等舔，是一種端到端的測(cè)試框架
- 官網(wǎng)：http://webdriver.io/
- Selenium
- Nightwatch
- Nightwatch是基于Webdriver API的一種node.js實(shí)現(xiàn)，是一種端到端的測(cè)試框架糟趾，和WebDriverIO一起是我最常用的2種UI測(cè)試框架
- 官網(wǎng)：http://nightwatchjs.org/
- 環(huán)境搭建：http://www.reibang.com/p/b21afbf584f6
var wait_time = 5000;
module.exports = {
before: function (browser) {
// 打開頁(yè)面
browser.maximizeWindow()
.deleteCookies()
.url(loginUrl)
.waitForElementVisible("body", wait_time)
.pause(wait_time);
},
after: function (browser) {
browser.end();
},
"01_進(jìn)入XXXX管理頁(yè)面": function (browser) {
// 檢查XXX管理頁(yè)面正常
browser
.assert.containsText(bt_batch_modify, '測(cè)試按鈕')
.assert.elementPresent(ct_workshift);
}
}
- Nightmare
- 官網(wǎng)：http://www.nightmarejs.org/
- Nightmare是基于Electron的一個(gè)瀏覽器操作lib软瞎，Electron和PhatomJS類似
- 實(shí)際使用發(fā)現(xiàn)Nightmare運(yùn)行時(shí)是會(huì)打開瀏覽器的，和headless模式不同
- 可以使用mocha框架來(lái)運(yùn)行基于Nightmare的UI自動(dòng)化用例
/**
* 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
- 官網(wǎng)：http://codecept.io/
-
CodeceptJS對(duì)頁(yè)面DOM元素的操作是基于WebDriverIO拉讯、Protractor這些框架封裝涤浇，且可以根據(jù)自己的偏好來(lái)設(shè)置
// 有味道的CodeceptJS代碼風(fēng)格
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
- 原設(shè)計(jì)初衷是針對(duì)Angular/AngularJS的應(yīng)用的端到端測(cè)試框架
- 需要單獨(dú)啟動(dòng)selenium server（吐槽下）
- 官網(wǎng)：http://www.protractortest.org/#/
- 基于headless browser
headless介紹：https://en.wikipedia.org/wiki/Headless_browser
headless browser就是沒(méi)有圖形化界面的瀏覽器，通過(guò)命令行界面的方式來(lái)運(yùn)行瀏覽器魔慷，通常是基于webkit只锭，不依賴于具體的瀏覽器。- PhatomJS
- 特點(diǎn)：PhatomJS并不是一個(gè)測(cè)試框架院尔，只是提供了一套headless browser的操作接口及實(shí)現(xiàn)蜻展，UI自動(dòng)化測(cè)試只是PhatomJS的一個(gè)應(yīng)用場(chǎng)景。
- 官網(wǎng)：http://phantomjs.org/
- PhatomJS
- CasperJS
- 特點(diǎn)：基于PhatomJS的UI自動(dòng)化測(cè)試框架邀摆。
- 官網(wǎng)：http://casperjs.org/
總結(jié)：
上面的框架的目標(biāo)都是實(shí)現(xiàn)對(duì)瀏覽器dom元素的操作纵顾，并支持測(cè)試需要的各種斷言方法assert，殊途同歸栋盹，其中WebDriver已經(jīng)成為w3c的標(biāo)準(zhǔn)施逾，大部分non-headless框架也是對(duì)WebDriver標(biāo)準(zhǔn)的不同實(shí)現(xiàn)。
不同的框架可以組合使用例获，相互彌補(bǔ)一些特性上的缺陷和不足
再結(jié)合一些測(cè)試管理框架+持續(xù)集成工具汉额，就可以將整個(gè)UI測(cè)試的自動(dòng)化框架搭建起來(lái)
CodeceptJS的代碼風(fēng)格比較有意思，其他的框架都是把用戶操作翻譯為瀏覽器的動(dòng)作榨汤，CodeceptJS就是原滋原味的用戶動(dòng)作語(yǔ)言：我打開頁(yè)面蠕搜，我點(diǎn)擊按鈕，我輸入文本......
