上一篇：搭建自己的前端自動化測試腳手架（二）
By LancerComet at 23:47, 2016.07.22. 歡迎轉載，轉載時還請保留作者署名。

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

開始編寫測試用例

創建目錄存放測試用例

在項目根目錄新建一個名為 "tests" 的目錄，然后這里就用來存放我們即將編寫的測試用例文件。
那么這個文件夾能不能指向到其他地方去呢？當然可以，不過要修改一個小地方。

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

您可以在目錄中存放多個測試用例文件，且命名隨意，Nightwatch 將讀取目錄中所有的 JS 文件，如果符合測試用例格式，將會自動執行。

編寫一個簡單的測試用例

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

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

OK，打開 "demo.js"，添加以下內容：

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

module.exports 導出一個對象，對象的 Key 即為測試用例名稱，您可以編寫多個測試用例，Nightwatch 將依次執行。

您可以在測試用例中導入其他模塊并直接使用在測試邏輯中，這也是比 Phantom.JS 優秀的地方。

先寫到這里，您可能會對 cilent 感到陌生，所以還是要簡單介紹一下。

client 是代碼運行時 Nightwatch 提供的對象，所有對瀏覽器進行的操作都將使用此對象調取，比如 client.click("CSS Selector")、client.getCookie(function () {...})，我們第一章說過的 "可以簡單理解為 Selenium 的控制軟件" 就是通過它體現的喔！

client 的所有 API 詳情見 這里。

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

module.exports = {'Find the answer.': function (client) {// 定義 Bing 頁面中的節點.const searchInput = '#sb_form_q'const searchBtn = '#sb_form_go'const question = 'what is microsoft'// 啟動瀏覽器并打開 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()} }

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

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

關于 Assert、BDD、TDD 的更多內容請參照其他文章。

是不是確實沒什么用？畢竟是個簡單的 Demo 而已，哈哈。
那么添加一個稍微復雜點的測試用例。

編寫另一個簡單的測試用例

這個 demo 將打開 Bilibili 直播 ，然后執行：

• 打開首頁并等待加載完畢；

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

• 點擊登陸按鈕；

• 填寫用戶名與密碼；

• 點擊登陸；

• 等待頁面加載；

• 通過 Cookie 檢查是否已登陸；

• 確保登陸后的用戶導航面板存在；

• 鼠標移至頭像處打開導航面板；

• 點擊退出登陸；

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

• 結束測試。

其實就是第一章的那個 Demo 圖干的事情了 (･?･)
這個 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()} }

您可以新建一個文件，或者在之前的文件中繼續編寫。

運行測試用例

回到項目根目錄，執行 npm start，然后就可以看到瀏覽器自己測試了！
運行效果如下：

測試運行完畢之后，測試結果將打印在終端里，同時會生成到 reports 文件夾中。

您可以在 nightwatch.json 中修改 "output_folder" 來更換報告生成目錄。

需要注意的地方

您可能在使用中會遇到例如 “明明看到節點缺獲取不到”、“鼠標功能好像時好時壞” 等問題，在此給您一些建議：

• 由于現在很多網站使用諸如 Angular、Vue 等框架構建，其節點可能為組件動態渲染，所以 Selenium 在執行測試時可能獲取的 Dom 樹為舊數據從而導致找不到節點，因此您可以執行等待語句確保節點出現后再進行測試。不過可能不是 100% 成功，這也是這套測試系統的短板之一。

• 如果您在進行模擬鼠標的測試，您的鼠標指針可能會干擾您的測試，因此建議運行測試后將您的指針移動至屏幕外部，以避免干擾到瀏覽器測試。

• 測試很可能因為頁面加載時間問題導致測試失敗，不過這也是 E2E 測試的特征所在，您可以修改您的測試邏輯，或致力縮短加載時間。

大功告成！

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

如果您沒能成功構建您的項目，您可以從這里獲取代碼。

同時像之前提到的，如果您在使用 Vue 構建您的項目，您可以使用 Vue-cli 來生成已經包含 Selenium 與 Nightwatch 的 Vue 種子項目，您可以在 test/e2e 中編寫您的測試用例。

希望三篇簡單的短文能給您帶來幫助！?(? ???ω??? ?)?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。