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

上一篇：搭建自己的前端自動化測試腳手架（二）
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.present
    client.expect.element(searchInput).to.be.visible
    client.pause(2000)  // 稍等兩秒.

    // 輸入 "what is microsoft" 然后搜索.
    client.setValue(searchInput, question)
    client.click(searchBtn)
    client.pause(2000)

    // 截一張圖然后保存到 "reports/answer.png". 
    client.expect.element("body").to.be.present
    client.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.visible
    client.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 = true
      result.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 中編寫您的測試用例。

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