• 關(guān)知識(shí)

Node JS環(huán)境、Protractor工具、Jasmine框架、JavaScript語(yǔ)言

• 簡(jiǎn)介

Protractor是作為Angular JS應(yīng)用程序的測(cè)試工具，簡(jiǎn)單的理解就是驅(qū)動(dòng)腳本來(lái)實(shí)現(xiàn)客戶端到服務(wù)器端測(cè)試的一種工具，也就是我們常聽(tīng)到的一個(gè)詞，e2e(end to end),也就是端到端的測(cè)試，其中Angular JS是一款優(yōu)秀的前端開(kāi)發(fā)框架，當(dāng)時(shí)的開(kāi)發(fā)團(tuán)隊(duì)就額外設(shè)計(jì)出Protractor這樣一個(gè)小工具便于測(cè)試基于Angular JS開(kāi)發(fā)的產(chǎn)品，它的構(gòu)建基于Selenium WebDriver之上，所以使用起來(lái)你會(huì)發(fā)現(xiàn)很多方法和不同語(yǔ)言下的webdriver操作類似，至少形式上看上去很像，而且是圍繞著Selenium WebDriver進(jìn)行封裝的，因此，Protractor中包含的每一個(gè)feature對(duì)于Selenium WebDriver都是可用的。但是需要注意一點(diǎn)，假如我設(shè)計(jì)的自動(dòng)化代碼并不是基于Angular JS開(kāi)發(fā)的，那么就會(huì)有個(gè)疑問(wèn)，是不是還可以鐘情于這款框架呢，答案是肯定的，我們只需要在js代碼中加入這樣一行“browser.ignoreSynchronization = true”，就可以跳過(guò)Angular JS產(chǎn)品的驗(yàn)證了。當(dāng)然，既然人家最初設(shè)計(jì)目的是為了測(cè)試基于Angular JS的產(chǎn)品，它會(huì)提供了獨(dú)享的一些方法，例如waitforangular()

我們還會(huì)接觸到另外一個(gè)詞“Jasmine”,其實(shí)它是Protractor內(nèi)部支持的三種行為驅(qū)動(dòng)開(kāi)發(fā)中的一種，具體有Jasmine/Mocha/Cucumber，也就是我們理解上的自動(dòng)化測(cè)試框架的三種，我聽(tīng)過(guò)前兩種，第三種沒(méi)用過(guò)，而且要注意一點(diǎn)protractor默認(rèn)使用的就是Jasmine，自動(dòng)化測(cè)試框架主要是提供語(yǔ)法、提供流程管理模塊、和報(bào)告工具，主要也就是這三點(diǎn)，這些框架都是基于JavaScript和Nodejs的，Nodejs就是支持javascript的運(yùn)行環(huán)境。

• 準(zhǔn)備過(guò)程

接下來(lái)簡(jiǎn)單看下怎么搭建一個(gè)基于Protractor測(cè)試框架的測(cè)試環(huán)境，用來(lái)寫(xiě)我們的自動(dòng)化測(cè)試代碼。

第一步毫無(wú)疑問(wèn)，安裝Node.js，安裝Node.js并不難，可以直接到 https://nodejs.org/en/ 網(wǎng)站上下載相應(yīng)的安裝包，這里選擇的是windows的安裝包，有的網(wǎng)絡(luò)會(huì)下載比較慢，雖然只有12M左右（親身經(jīng)歷，還會(huì)經(jīng)常中斷。。。）。

其中npm package manager是我們安裝Node.js最為重要的目的，當(dāng)然，Add to PATH是幫助我們省去了配置變量的環(huán)節(jié)，也是很重要的，安裝步驟不多贅述，如果圖方便的話，閉上眼睛一路Next下去就好。

安裝完成后，打開(kāi)命令窗口，使用命令 “npm —version” 查看Node.js是否安裝成功。

由于這里需要使用pratractor，所以需要使用命令 “npm install —global protractor” 或者 “npm install -g protractor” 全局安裝protractor，為什么是全局安裝而不是本地安裝，因?yàn)槲覀冞@里只需要使用CLI(Command Line Interface) 而不需要用require將protractor包含進(jìn)去，如果需要后者，則需要再在本地安裝一次，當(dāng)然，如果不放心，也完全可以將全局和本地都安裝一次，以后如果需要用，就可以直接用了，這里作為例子來(lái)看，只需要全局安裝即可。

這時(shí)候，可以試著啟用webdriver, 注意，如果這里是先做了webdriver-manager update操作，而直接輸入 webdriver-manager start則會(huì)不成功，它會(huì)提示 java 不能識(shí)別，它既不是內(nèi)部也不是外部命令。而緊接著才安裝JDK的話，在相同的command window中也同樣會(huì)持續(xù)這個(gè)提示，此時(shí)只需要重新開(kāi)一個(gè)新的command window即可。

這時(shí)候可以發(fā)現(xiàn)，webdriver 啟動(dòng)了，接下來(lái)我們?cè)囍_(kāi)始寫(xiě)case來(lái)看下是不是可以運(yùn)行了。

• 腳本過(guò)程

我們一定要編寫(xiě)的文件只有兩個(gè)，一個(gè)是configure.js，當(dāng)然文件名是隨意編寫(xiě)的，也可以叫做config.js，用做什么呢，目的有兩個(gè)，一個(gè)是指定4444端口作為selenium調(diào)用服務(wù)的配置，另一個(gè)是作為執(zhí)行測(cè)試用例的入口文件，也就是可以在這個(gè)文件內(nèi)指定運(yùn)行哪些測(cè)試用例。

代碼如下：

(function () {

exports.config = {

seleniumAddres : 'http://localhost:4444/wd/hub',

specs: 'testcase.js'

}

}

)()

另一個(gè)文件也就是我們的測(cè)試用例文件，名字叫做testcase.js，當(dāng)然名字也是可以用別的，代碼如下（代碼是可以直接運(yùn)行的哦），里面有一條自動(dòng)化測(cè)試用例，用于測(cè)試光宇游戲社區(qū)點(diǎn)擊登錄按鈕之后，輸入用戶名和密碼后，會(huì)出現(xiàn)復(fù)雜驗(yàn)證碼彈層，也就是我們的期望值。

(function (){

var requires = require('./testdata.js')

describe('XXX_Community', function () {

var url = requires.urls.AngularJSURL

beforeEach(function() {

browser.ignoreSynchronization = true

browser.manage().window().maximize();

browser.get(url)

});

it('Account_Login_WithPassword_001', function () {

element(by.xpath('//*[@id="js_pubtoplogin_div"]/div[1]/a')).click()

element(by.id('Account')).sendKeys('xieshuyu')

element(by.id('Password')).sendKeys('xieshuyu')

var EC = protractor.ExpectedConditions;

browser.wait(EC.presenceOf(element(by.id('sigin'))), 5000);

element(by.id('sigin')).click()

expect(element(by.xpath('/html/body/div[8]')).isPresent()).toBeTruthy()

}

)

})

})()

• 說(shuō)明部分

如果有一定代碼經(jīng)驗(yàn)的同學(xué)，其實(shí)看這段代碼和我們之前的自動(dòng)化用例代碼差別并不是很大，變化的就是形式和語(yǔ)言。

1、describe就是我們通常講的自動(dòng)化測(cè)試用例集，it就是自動(dòng)化測(cè)試用例，兩個(gè)的實(shí)質(zhì)就是js方法，it當(dāng)中包含了測(cè)試用例的內(nèi)容，包含了操作步驟和斷言；

2、如果要停止運(yùn)行某一個(gè)case，只需用xit()代替it()，同理在describe前加’x’也可以停止整個(gè)describe封裝的運(yùn)行；

3、引號(hào)中的description用來(lái)描述case行為，便于在查看報(bào)告時(shí)理解case行為；

4、expect()用于判斷結(jié)果，一個(gè)case中可以有多個(gè)expect()，只有當(dāng)所有的expect()都通過(guò)的時(shí)候，這個(gè)case才可以通過(guò)，否則會(huì)提示失敗，常見(jiàn)匹配器如下：

expect(x).toEqual(y); 當(dāng)x和y相等時(shí)候通過(guò)

expect(x).toBe(y); 當(dāng)x和y是同一個(gè)對(duì)象時(shí)候通過(guò)

expect(x).toMatch(pattern); x匹配pattern（字符串或正則表達(dá)式）時(shí)通過(guò)

expect(x).toBeDefined(); x不是undefined時(shí)通過(guò)

expect(x).toBeUndefined(); x 是 undefined時(shí)通過(guò)

expect(x).toBeNull(); x是null時(shí)通過(guò)

expect(x).toBeTruthy(); x和true等價(jià)時(shí)候通過(guò)

expect(x).toBeFalsy(); x和false等價(jià)時(shí)候通過(guò)

expect(x).toContain(y);x（數(shù)組或字符串）包含y時(shí)通過(guò)

expect(x).toBeLessThan(y); x小于y時(shí)通過(guò)

expect(x).toBeGreaterThan(y); x大于y時(shí)通過(guò)

expect(function(){fn();}).toThrow(e); 函數(shù)fn拋出異常時(shí)候通過(guò)

5、關(guān)于element元素的定位，常用方法如下（暫時(shí)用到這么多）：

element(by.xpath(‘//*[@id=”js_pubtoplogin_div”]/div[1]/a’))

element(by.id(‘xieshuyu’))

element(by.name(‘xieshuyu’))

element(by.className(‘xieshuyu’))

element(by.model(‘xieshuyu’)) //根據(jù)ng-model名來(lái)查找元素，Angular JS專用（還記得上文提到的嗎，呵呵呵）

element(by.binding(‘xieshuyu’)) //查找綁定了指定名的元素，Angular JS專用

element(by.repeater(‘xieshuyu’)) //查找指定repeater中的元素，Angular JS專用

• 執(zhí)行方式

看到這，是不是有點(diǎn)小興奮了呢，哈哈哈！其實(shí)執(zhí)行方式很簡(jiǎn)單，前提是環(huán)境已經(jīng)配置正確了，在文件路徑下切換到對(duì)應(yīng)的cmd窗口，然后輸入“protractor config.js —config spec —disableChecks”，記得加上—disableChecks，會(huì)避免一些不必要的檢查。

然后你就可以谷歌瀏覽器被打開(kāi)了，然后執(zhí)行我們測(cè)試用例的文件，至少?gòu)囊曈X(jué)效果上來(lái)看，執(zhí)行速度高于利用java來(lái)寫(xiě)的自動(dòng)化代碼，速度很快，但是有一個(gè)缺點(diǎn)，至少我理解上是這樣的，我們都知道javascript是一種前端流行語(yǔ)言，是不支持后臺(tái)操作的，就連數(shù)據(jù)庫(kù)連接和執(zhí)行sql語(yǔ)句也是不支持的，所以我們自動(dòng)化流程中可能用到的數(shù)據(jù)庫(kù)操作是沒(méi)辦法利用它實(shí)現(xiàn)的，但這里會(huì)有一個(gè)問(wèn)題值得討論，我們的UI端的自動(dòng)化是否需要或者有必要連接后臺(tái)來(lái)模擬一些用例的前提條件，以后再寫(xiě)另外的一篇博客來(lái)討論吧，在這一句兩句也說(shuō)不清楚。

如果有同學(xué)看到這里，會(huì)不會(huì)有個(gè)疑問(wèn)，也就是有沒(méi)有發(fā)現(xiàn)我們的代碼是沒(méi)有任何語(yǔ)句來(lái)指定谷歌瀏覽器驅(qū)動(dòng)的地方，那怎么在輸入“protractor config.js —config spec —disableChecks”之后就自動(dòng)打開(kāi)chrome進(jìn)行自動(dòng)化測(cè)試了呢。其實(shí)答案就是特別簡(jiǎn)單，因?yàn)槿思襭rotractor支持的默認(rèn)瀏覽器就是chrome，還有一點(diǎn)，我想到也就是nodejs環(huán)境本身就是一個(gè)基于Chrome V8引擎的。

• 后續(xù)

文中提到的代碼只是一個(gè)簡(jiǎn)單的自動(dòng)化測(cè)試用例demo，用于說(shuō)明利用NodeJS環(huán)境+Protractor工具+Jasmine框架+JavaScript語(yǔ)言是可以做到UI的自動(dòng)化，而且效果還不錯(cuò)的，之后會(huì)陸續(xù)更新的。如果有什么說(shuō)的不準(zhǔn)確的地方，歡迎留言!

—————————————————————————————————————

給大家推薦一個(gè)學(xué)習(xí)資料分享群（574253227），里面大牛已經(jīng)為我們整理好了許多的學(xué)習(xí)資料，有自動(dòng)化，接口，性能等等的學(xué)習(xí)資料！