上一篇：搭建自己的前端自動(dòng)化測(cè)試腳手架（二）
By LancerComet at 23:47, 2016.07.22. 歡迎轉(zhuǎn)載，轉(zhuǎn)載時(shí)還請(qǐng)保留作者署名。

這是最后一章了！(･?･)
之前我們配置好了我們的腳手架工具，現(xiàn)在可以編寫測(cè)試用例了！

開始編寫測(cè)試用例

創(chuàng)建目錄存放測(cè)試用例

在項(xiàng)目根目錄新建一個(gè)名為 "tests" 的目錄，然后這里就用來(lái)存放我們即將編寫的測(cè)試用例文件。
那么這個(gè)文件夾能不能指向到其他地方去呢？當(dāng)然可以，不過(guò)要修改一個(gè)小地方。

還記得 " nightwatch.json " 文件么？打開看看，第一項(xiàng)是不是叫 src_folders，然后值為 ["tests"]？
我相信您已經(jīng)懂了，這里就是定義測(cè)試用例存放目錄的地方，然后改成自己想要的目錄吧！

您可以在目錄中存放多個(gè)測(cè)試用例文件，且命名隨意，Nightwatch 將讀取目錄中所有的 JS 文件，如果符合測(cè)試用例格式，將會(huì)自動(dòng)執(zhí)行。

編寫一個(gè)簡(jiǎn)單的測(cè)試用例

在 "tests" 目錄中建立一個(gè)測(cè)試用例文件 "demo.js"，然后我們來(lái)寫一個(gè)沒什么用的小 demo！

這個(gè) Demo 將打開 Bing，搜索 "what is microsoft"，然后保存成截圖后退出。

OK，打開 "demo.js"，添加以下內(nèi)容：

module.exports = {'Find the answer.': function (client) {// TODO...} }

module.exports 導(dǎo)出一個(gè)對(duì)象，對(duì)象的 Key 即為測(cè)試用例名稱，您可以編寫多個(gè)測(cè)試用例，Nightwatch 將依次執(zhí)行。

您可以在測(cè)試用例中導(dǎo)入其他模塊并直接使用在測(cè)試邏輯中，這也是比 Phantom.JS 優(yōu)秀的地方。

先寫到這里，您可能會(huì)對(duì) cilent 感到陌生，所以還是要簡(jiǎn)單介紹一下。

client 是代碼運(yùn)行時(shí) Nightwatch 提供的對(duì)象，所有對(duì)瀏覽器進(jìn)行的操作都將使用此對(duì)象調(diào)取，比如 client.click("CSS Selector")、client.getCookie(function () {...})，我們第一章說(shuō)過(guò)的 "可以簡(jiǎn)單理解為 Selenium 的控制軟件" 就是通過(guò)它體現(xiàn)的喔！

client 的所有 API 詳情見 這里。

大致了解這東西的意思之后，就可以接著完善測(cè)試邏輯了：

module.exports = {'Find the answer.': function (client) {// 定義 Bing 頁(yè)面中的節(jié)點(diǎn).const searchInput = '#sb_form_q'const searchBtn = '#sb_form_go'const question = 'what is microsoft'// 啟動(dòng)瀏覽器并打開 bing.com.client.url('http://bing.com').maximizeWindow()// 確保 "body" 和輸入框可以使用.client.expect.element('body').to.be.presentclient.expect.element(searchInput).to.be.visibleclient.pause(2000) // 稍等兩秒.// 輸入 "what is microsoft" 然后搜索.client.setValue(searchInput, question)client.click(searchBtn)client.pause(2000)// 截一張圖然后保存到 "reports/answer.png". client.expect.element('body').to.be.presentclient.saveScreenshot('reports/answers.png')client.end()} }

來(lái)關(guān)注一下 expect ，是不是看起來(lái)很像自然語(yǔ)言？這些語(yǔ)句就是測(cè)試結(jié)果的驗(yàn)證語(yǔ)句，就是我們希望得到的結(jié)果。比如 client.expect.element('body').to.be.present.before(3000)，意思就是 "希望 body 元素能在 3000 毫秒內(nèi)初始化完畢"。

Nightwatch 支持 BDD-Style 與 Assert 斷言兩種風(fēng)格，文檔可見 這里。

關(guān)于 Assert、BDD、TDD 的更多內(nèi)容請(qǐng)參照其他文章。

是不是確實(shí)沒什么用？畢竟是個(gè)簡(jiǎn)單的 Demo 而已，哈哈。
那么添加一個(gè)稍微復(fù)雜點(diǎn)的測(cè)試用例。

編寫另一個(gè)簡(jiǎn)單的測(cè)試用例

這個(gè) demo 將打開 Bilibili 直播 ，然后執(zhí)行：

• 打開首頁(yè)并等待加載完畢；

• 檢查登陸按鈕是否存在；

• 點(diǎn)擊登陸按鈕；

• 填寫用戶名與密碼；

• 點(diǎn)擊登陸；

• 等待頁(yè)面加載；

• 通過(guò) Cookie 檢查是否已登陸；

• 確保登陸后的用戶導(dǎo)航面板存在；

• 鼠標(biāo)移至頭像處打開導(dǎo)航面板；

• 點(diǎn)擊退出登陸；

• 等待頁(yè)面刷新后檢查 Cookie 是否已退出登陸；

• 結(jié)束測(cè)試。

其實(shí)就是第一章的那個(gè) Demo 圖干的事情了 (･?･)
這個(gè) demo 不再啰嗦，直接放出代碼：

// Account setting. const accountConfig = {username: 'USERNAME',password: 'PASSWORD',uid: '10000' }module.exports = {'Bilibili Live Login Test': function (client) {client.url('http://live.bilibili.com').maximizeWindow()// Page Init.client.expect.element('body').to.be.present.before(3000)client.expect.element('.top-nav-login-btn.last').to.be.visible// Login.client.click('.top-nav-login-btn.last')client.waitForElementVisible('#bilibili-quick-login', 2000)client.frame(0)client.pause(2000)client.setValue('#login-username', accountConfig.username)client.setValue('#login-passwd', accountConfig.password)client.click('#login-submit')// Wait and check page has been reloaded.client.frameParent()client.pause(4000)client.expect.element('body').to.be.present.before(3000)// Check cookies to ensure we are signed in.client.getCookies(function (result) {result.value.forEach((value, index, array) => {if (value.name === 'DedeUserID') client.assert.equal(parseInt(value.value, 10), accountConfig.uid)})})// Move to User Avatar.client.expect.element('.user-avatar-link').to.be.visibleclient.moveToElement('.user-avatar-link', 5, 5)client.pause(800)client.expect.element('#top-nav-user-panel').to.be.visible// Logout.client.click('#top-nav-logout-link')client.pause(5000)client.expect.element('body').to.be.present.before(3000)// Check cookies again to ensure we are off.client.getCookies(function (result) {var logout = trueresult.value.forEach((value, index, array) => {if (value.name === 'LIVE_LOGIN_DATA') logout = false})client.assert.equal(logout, true)})client.pause(1000)client.end()} }

您可以新建一個(gè)文件，或者在之前的文件中繼續(xù)編寫。

運(yùn)行測(cè)試用例

回到項(xiàng)目根目錄，執(zhí)行 npm start，然后就可以看到瀏覽器自己測(cè)試了！
運(yùn)行效果如下：

測(cè)試運(yùn)行完畢之后，測(cè)試結(jié)果將打印在終端里，同時(shí)會(huì)生成到 reports 文件夾中。

您可以在 nightwatch.json 中修改 "output_folder" 來(lái)更換報(bào)告生成目錄。

需要注意的地方

您可能在使用中會(huì)遇到例如 “明明看到節(jié)點(diǎn)缺獲取不到”、“鼠標(biāo)功能好像時(shí)好時(shí)壞” 等問(wèn)題，在此給您一些建議：

• 由于現(xiàn)在很多網(wǎng)站使用諸如 Angular、Vue 等框架構(gòu)建，其節(jié)點(diǎn)可能為組件動(dòng)態(tài)渲染，所以 Selenium 在執(zhí)行測(cè)試時(shí)可能獲取的 Dom 樹為舊數(shù)據(jù)從而導(dǎo)致找不到節(jié)點(diǎn)，因此您可以執(zhí)行等待語(yǔ)句確保節(jié)點(diǎn)出現(xiàn)后再進(jìn)行測(cè)試。不過(guò)可能不是 100% 成功，這也是這套測(cè)試系統(tǒng)的短板之一。

• 如果您在進(jìn)行模擬鼠標(biāo)的測(cè)試，您的鼠標(biāo)指針可能會(huì)干擾您的測(cè)試，因此建議運(yùn)行測(cè)試后將您的指針移動(dòng)至屏幕外部，以避免干擾到瀏覽器測(cè)試。

• 測(cè)試很可能因?yàn)轫?yè)面加載時(shí)間問(wèn)題導(dǎo)致測(cè)試失敗，不過(guò)這也是 E2E 測(cè)試的特征所在，您可以修改您的測(cè)試邏輯，或致力縮短加載時(shí)間。

大功告成！

現(xiàn)在您已經(jīng)擁有您自己的測(cè)試工具并且成功編寫了兩個(gè)測(cè)試用例！此處您應(yīng)該為自己鼓掌！
您現(xiàn)在已經(jīng)可以將 E2E 測(cè)試納入您的開發(fā)流程之中，在下相信這將對(duì)您的開發(fā)有不小的幫助。如果您有興趣，您也可以考慮 單元測(cè)試 的可能性。

如果您沒能成功構(gòu)建您的項(xiàng)目，您可以從這里獲取代碼。

同時(shí)像之前提到的，如果您在使用 Vue 構(gòu)建您的項(xiàng)目，您可以使用 Vue-cli 來(lái)生成已經(jīng)包含 Selenium 與 Nightwatch 的 Vue 種子項(xiàng)目，您可以在 test/e2e 中編寫您的測(cè)試用例。

希望三篇簡(jiǎn)單的短文能給您帶來(lái)幫助！?(? ???ω??? ?)?

總結(jié)

以上是生活随笔為你收集整理的搭建自己的前端自动化测试脚手架（三）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。