Zi 字媒體

測試，尤其是自動化測試在現代 WEB 工程中有著非常重要的角色，與交付過程集成良好的自動化測試流程可以在新版發布時幫你快速回歸產品功能，也可以充當產品文檔。測試因粒度不同又可以分為單元測試、介面測試、功能測試。在 WEB 領域，功能測試亦稱為端到端測試（End to End Test，簡稱 E2E 測試），筆者在本文中會結合自身實踐和 GitHub 趨勢對比最受歡迎的 Node.js E2E 測試解決方案，首先我們按 GitHub 的 star 總數量排序，取前 5 名列舉如下（注意：你閱讀本文時 star 的數量可能已經不是最新的）。CasperJS — 6460 個 star，官網，代碼，最近更新於 7 天前；Protractor — 6408 個 star，官網，代碼，最近更新於 10 天前；Nightwatch.js — 6121 個 star，官網，代碼，最近更新於 6 天前；TestCafe — 2268 個 star，官網，代碼，最近更新於 1 天前；CodeceptJS — 1087 個 star，官網，代碼，最近更新於 7 天前；然後分別從環境搭建、測試編寫、測試報告等方面來直觀展示這 5 個 E2E 測試框架，期望能夠對做測試框架選型的同學有幫助。為了更客觀的體現各測試框架的特點，筆者設計了一些包含 E2E 測試中常用操作的測試用例，分別使用不同的框架來編寫。E2E 測試的常用操作如下：打開網頁，跳轉網頁：打開 Github 的首頁；填寫輸入框，提交表單：鍵入搜索詞，提交搜索表單；元素單擊等操作：單擊搜索結果的第一項；元素數量、屬性檢視：確認搜索結果展示了 10 條；頁面運行環境檢視：確認頁面的地址是正確的；CasperJSCasperJS 是 star 數最高的測試框架，也是筆者最早開始採用的 E2E 測試框架，使用 Python 編寫，雖不算是嚴格意義上的原生 Node.js 解決方案，但因為能夠使用 npm 安裝，且能夠很好的與 Node.js 工具鏈組合使用，筆者還是把它列在了這裡。其特別之處在於只能與無界面瀏覽器（Headless Browser）組合使用，比如 PhantomJS 和 SlimerJS，這也讓 CasperJS 的優勢顯而易見：測試運行速度比真實瀏覽器快不少，且你不需要在持續集成系統中安裝各種瀏覽器或者某個瀏覽器的不同版本；潛在的坑在於，無界面瀏覽器的表現有時和真實瀏覽器不完全相同，會帶來某些難以排查解決的瀏覽器兼容問題。安裝步驟安裝 Python 2.6 或更高版本安裝 PhantomJS：npm install -g phantomjs安裝 CasperJS：npm install -g casperjs編寫測試如果使用 ES6 之前的風格來編寫 CasperJS 測試，代碼看起來會顯得非常臃腫，而實際上 CasperJS 也不支持任何 ES6/ES7 的新語法，除非你在運行測試之前自己對代碼進行預編譯，實際代碼如下：因為 CasperJS 對 CoffeeScript 有天然的支持，熟悉 CoffeeScript 的同學可以嘗試使用 CoffeeScript 編寫測試，或者使用這個工具轉換為 CoffeScript。前端學習交流群477149581，歡迎喜歡前端的各位大神小神前來學習交流，每天晚上群裡面也會有大佬直播企業項目開發學習，更有各種項目案例供你自己學習運行測試查看報告測試通過測試失敗ProtractorProtractor 是 Angular 官方正在使用的 E2E 測試框架，可以說是專門為 Angular 定製，內置了各種可以選擇、操作 Angular 元素的便捷方法，如果你的應用基於 Angular 開發，使用它可以減少很多重複代碼（顯然類似的便利在其他框架中也有支持）。對於 Angular 的重度使用者，Protractor 會是非常明智的選擇，不同於 CasperJS 的是 Protractor 在真實瀏覽器中運行測試代碼。此外，Protractor 內置的頁面載入等待的功能，在 CasperJS 中需要自己設置合理的超時。相比於本文列出的其他框架，Protractor 的明顯優勢是測試用例的組織方式可以自由使用 Jasmine 或者 Mocha。安裝步驟安裝 JDK安裝 Protractor：npm install –g protractor初始化 WebDriver Manager：webdriver-manager update創建配置文件編寫測試Protractor 默認開啟了等待 Angular 載入並初始化完成的功能，如果你測試的不是 Angular 應用，則需要關閉這個功能，測試代碼示例如下：運行測試運行 WebDriver Manager: webdriver-manager start運行測試：protractor protractor.config.js查看報告測試通過測試失敗Nightwatch同樣流行的 Nightwatch，可以認為是 Protractor 的主要競爭對手，使用 Nigthwatch 編寫的代碼非常簡潔，但是你需要手動在測試代碼中添加合適的等待來保障測試的穩定，而 Protractor 和 TestCafe 則提供了內置的支持；Nightwatch 的主要劣勢在於繁瑣的安裝步驟，可能部分同學看到這個安裝文檔或者下面的安裝步驟就知難而退了。安裝步驟安裝 JDK，版本 7 以上下載 Selenium: selenium-server-standalone-{VERSION}.jar，複製到測試目錄下載 WebDriver for Google Chrome，複製到測試目錄安裝 Nightwatch: npm install -g nightwatch創建配置文件，需要在配置中聲明 chromewebdriver 的地址；編寫測試運行測試運行 Selenium：java -jar selenium-server-standalone-3.0.0.jarnightwatch test.js查看報告測試通過測試失敗TestCafeTestCafe 是非常年輕但很受開發者歡迎的測試框架，因為不需要依賴 WebDriver 之類的東西，TestCafe 環境只需一鍵即可完成，這也意味著，你可以在任何安裝了瀏覽器應用的物理設備上運行測試。TestCafe 對 ES6/ES7 語法的天然支持讓它更具前瞻性，命令行工具產生的測試報告簡潔但不失完整。由於開源的時間較短，相比於其他測試框架 TestCafe 的社區和生態還不夠成熟。儘管如此，不斷出現的各種 TestCafe 功能擴展也證明了它的社區和生態在不斷壯大。對於站在 WEB 技術風口浪尖的同學，TestCafe 無疑是非常值得留意的 E2E 測試解決方案，開箱即用的特性極大的降低了使用者的成本。安裝步驟npm install testcafe -g編寫測試TestCafe 的測試組織方式詳見這裡，選擇符支持也非常強大，支持類似於 jQuery 的靈活非同步的選擇符，斷言風格非常類似 Chai，下面是測試代碼：運行測試查看報告測試通過測試失敗CodeceptJsCodeceptJs 可能並不算是嚴格意義的 E2E 測試框架，它對各種測試運行工具做了一層封裝，旨在提供更簡潔的 API，你可以自由選擇下面這些測試運行工具：WebDriverIOProtractorSelenium WebDriver JSNightmareJSCodeceptJs 讓筆者比較欣賞的地方在於測試用例的組織，基於 Feature 和 Scenario 兩個粒度來組織測試讓它看起來更有 E2E 測試的樣子，它支持最新的 ES6 語法，同時也屏蔽各種複雜的回調細節，所有的測試用例都是以第一人稱來做，讓測試代碼閱讀起來更像是自然語言，而讓筆者擔憂的地方在於，過多的封裝可能導致出問題時排查比較困難。安裝步驟安裝 CodeceptJs npm install -g codeceptjs用命令行工具初始化配置 codecept.json：codeceptjs init使用命令行工具生成測試：codeceptjs gt此外，你需要安裝你所選擇的底層測試工具，比如 WebDriver、Protractor對於web前端的學習有不懂的，或者不知道學習路線，不知道學習方法，不知道該如何紮實能找到工作的朋友，我還是要推薦下我自己建的前端學習群：477149581，首先你要是前端黨，其次不管你是小白還是大牛，我都挺歡迎，小白嘛，主動點多問問題也就學好了，群里每天分享乾貨，包括我自己最近花了一星期整理的一份適合2017年自學的最新web前端資料，送給大家，歡迎初學和進階中的小夥伴。編寫測試運行測試codeceptjs run查看報告測試通過測試失敗總結對比本文中的所有代碼可以在 GitHub 倉庫上看到。任何開發工具的演化都是朝著更快捷、高效的目標。本文介紹的幾個 E2E 測試框架可以說各有所長，在做框架選型的時候該考慮哪些因子呢？這些因子的優先順序如何？下面是筆者的考慮：上手簡單：P0，環境搭建步驟？出錯的概率？是否需要繁瑣的配置？TestCafe 非常簡單；文檔支持：P0，是否包含入門文檔？API 參考？開發者文檔？本文中的五款都還不錯；過程透明：P0，測試運行過程是否是透明的，能否觀察到頁面行為？CasperJS 就像個黑盒；運行速度：P0，測試運行速度能決定你 CI 流程的好壞；測試報告：P0，是否支持多種報告？是否方便與 CI 流程集成？比如要支持 XML、JUnit 等格式輸出；調試功能：P0，出錯時提供的信息是否清晰？是否支持截圖？TestCafe 做的很好；測試組織：P1，是否能與現有的技術棧很好的組合起來？不能結合獨創的方式是否直觀？如果是大型項目可以提高優先順序，Protractor 和 CodeCeptJs 佔優；代碼風格：P1，簡潔的代碼意味的更高的可讀性、更低的維護成本；TestCafe、CodeCeptJs 不錯；社區支持：P2，圍繞這個工具是否有成熟的社區？可以用來提問、貢獻代碼；可擴展性：P3，是否支持 API 擴展？擴展成本如何？如果你的項目中需要添加 E2E 測試，做決定的時候沒有標準答案，因為還需要結合項目自身的特點，比如規模大小、對上面各因子的要求。備註：本文的初始版本來源於 Medium 上的文章，但是筆者在原文基礎上重新設計了測試用例，每個測試框架的介紹也參與了筆者自身的使用經驗，框架選型上也融入了自己的思考，有興趣的可以去看原文。