Nightwatch101：手牽手一起來學 Nightwatch！

26 Mar 2018

本篇文章主要是將去年底今年初參加「2018 iT 邦幫忙鐵人賽」與後續在 VueJS 台灣 meetup 201803@五倍紅寶石所分享的文件做收納整理。

投影片-快速上手版

這是我在 VueJS 台灣 meetup 201803@五倍紅寶石所分享的投影片，快速帶大家看過 Nightwatch 到底 是什麼 和 怎麼用。內含 Nightwatch 是如何運作的、環境建置、撰寫測試程式、使用 Nightwatch Test Runner 跑各式各樣的測試、模組化、客製化測試報告等。

投影片連結

鐵人賽-詳細說明版

在這裡依特性重新調整了文章間的順序並做分類，分為六個類別：簡介、指令與斷言、Test Hooks、Test Runner、模組化和其他。

Part 1：簡介

這裡是來談 Nightwatch 到底是什麼呢？怎麼設定和使用呢？也就是來看運作原理、環境建置和設定檔。

• 前言
• Nightwatch 與 Selenium Webdriver
• 環境建置
• 設定檔
• External Globals

Part 2：指令與斷言

怎麼撰寫測試程式呢？進入指令和斷言的部份。

• 使用 CSS Selector 定位網頁元素
• 使用 Xpath 定位網頁元素
• 指令 Part 1
• 指令 Part 2
• 指令 Part 3
• BDD Expect
• BDD Assert
• BDD Verify

Part 3：Test Hooks

鉤子的用途主要是做前置作業或一些重複性的工作。

• Test Hooks
• Asynchronous Test Hooks

Part 4：Nightwatch Test Runner

各種跑測試的方式。

• Nightwatch Test Runner
• 依照分組做測試（Test Groups）
• 依照標籤做測試（Test Tags）
• 禁跑特定測試（Disable Tests）
• 平行執行測試程式

Part 5：模組化

如何優化測試程式？

1. 將常用的功能抽出來成為模組，成為客製化指令和斷言
2. 使用 Page Object 封裝網頁片段，增加重用和可讀性，減少維護的複雜度

• Page Objects
• 使用 Sections 優化 Page Objects
• 客製化指令（Custom Commands）
• 客製化斷言（Custom Assertions）

Part 6：其他

• 客製化測試報告
• 簡單測試範例
• 進階測試範例
• 獨立使用 ChromeDriver 跑測試
• Selenium IDE
• 總結

除了以上的部落格版，也可以來看 2018 iT 邦幫忙鐵人賽 的版本，基本上內容是一樣的。

小感想

關於參加鐵人賽的原由在這裡，感言在那裡。

關於在 VueJS 台灣 meetup 201803@五倍紅寶石的分享，一開始收到 Kuro 大大的邀約其實滿驚訝（驚喜!? ）的，畢竟小妹我一直覺得離這些高手的程度很遠之外，基本上都是默默參加與支持。但真正的支持應該是融入其中並站出來，所以我就來跟大家分享了 XD

感謝有這次分享的機會，讓我學到不少事情（應該要 Demo 更多範例、講慢一點等），只是還有很多想說的沒有放在投影片或鐵人賽裡面，後續會慢慢補在專案和部落格中。

活動截圖留念。

感謝露天夥伴當天到場支持 - Christine、Eddie、Ben 和 Hunter。由於分享完隔天即是我在露天上班的最後一天，因此在螢幕投影上看到自我介紹頁寫著「Summer 露天拍賣。前端工程師」的心情其實很複雜，在捨不得中人生要往另一個方向邁進了。

以上將 Nightwatch 的學習歷程做一次完整的整理，歡迎交流 ♡(*´∀｀*)人(*´∀｀*)♡