前端自動化測試與持續集成系統

舒海林 貴州大學明德學院

1 系統相關技術

值得一提的是，基于Node.js容器托管的YunOS官網V2.7發布上線證明前端項目也可以如同后端項目一樣以一個完整的工程存在。在這種開發模式下，開發機器上的預覽效果即等同線上效果的全貌，修改和迭代不再需要從線上拷貝源代碼了。在傳統的Java層和客戶端層引入了新的一層Node，不僅給前端帶來了機遇，也帶來了挑戰。對后端環境的陌生，使得前端在質量、安全、部署、監控、預警等領域需要重新思考、界定范圍并建立新規則。

2 系統需求分析

從前端自動化測試的特點出發分析，前端自動化測試提供質量信息給項目開發者，測試人員，以及維護人員。同時，前端自動化測試通過對有關被測試產品或者服務的而進行的一系列的測試活動，預測網站上線的風險以及對上線網站的回歸測試。至于進行前端自動化測試的實際，傳統來說是在軟件的具體概要已經確定并且完成代碼編寫后才進行軟件測試，但是隨著敏捷測試的概念的產生，軟件測試被提出與軟件開發同時進行，甚至開始于需求設計階段。對于本次前端自動化測試與持續集成系統來說，我們測試的目的是是對網站進行審核，這種審核是用來幫助軟件產品開發團隊的，是客觀的、獨立的，因此在開發過程中的任何階段都可以進行前端自動化測試與持續集成。

3 軟件設計

3.1 系統的特點

前端自動化測試及持續集成系統的特點主要體現在選擇測試計劃和執行測試計劃兩個方面。

(1）選擇測試計劃

如需求分析中所列，根據不同的測試內容，執行不同的測試計劃。區別于服務端代碼的測試的是GUI軟件測試部分。

(2）執行測試計劃

執行階段的工作就是按照步驟來執行測試,所依據的測試用例是設計階段建立的.狹義上講，按照測試用例開展測試的階段就是通常我們提到的測試。在我們這里把執行測試計劃分為：前端單元測試、前端覆蓋率測試、界面回歸測試、前端功能測試、持續集這幾個階段。

3.2 系統的難點

(1）GUI測試的難點

目前，計算機軟件與普通用戶進行信息傳遞和交互過程中，GUI（Graphical User Interface）是主要的方式。GUI中文譯為圖形用戶界面，而對GUI軟件開展的軟件測試也叫GUI軟件測試。

極大的方便了用戶的操作的同時，GUI的存在也使得GUI軟件更復雜、更難以測試。學術界和工業界日漸感興趣于GUI軟件的開發，也重視GUI軟件的測試的重要性，然而，還處于初級階段的測試實踐證明， 很多存在于GUI軟件的測試的問題還沒有解決，由于技術限制，在實際需求中，保證軟件質量不能被滿足，依然需要投入較多的項目時間和較高人工成本來進行GUI軟件測試。

(2）系統開發及推廣難點

在一些特殊的情況下，前端自動化測試及持續集成系統需要考慮到測試環境，如是否跨域，日常線上等；需要考慮到性能問題，如測試系統的性能會受本地機器的影響，能否同時測試多個承受大型項目的壓力測試等；需要考慮到可用性問題，為了代替手工的測試，是否建立通過倉庫地址來執行測試，然后建立測試腳本來調用測試工具，這就要求倉庫和腳本對測試平臺來說是可訪問的，一些私有倉庫需要考慮這一點；測試腳本的編寫：腳本的測試內容對使用者有技術門檻和較高的學習成本。基于這些信息，如何讓測試人員能夠方便快捷有效正確地使用測試系統，保證能夠按照預期進行測試，對前端自動化測試及持續集成系統的開發提出了挑戰。

另外的一個難點是測試腳本的開發，對于目前的工具，寫自定義測試用例是有一定門檻的，對于前端同學會好一些，但對于測試同學門檻會更高，給主動接入增加了難度。

3.3 系統技術選型

這里從需求，實現成本和使用成本出發，選擇方案一Phantomjs與CasperJS開發前端自動化測試與持續集成系統的開發。

(1）方案一：Phantomjs＋CasperJS

PhantomJS 是一個無界面的,可腳本編程的WebKit瀏覽器引擎。它原生支持多種web 標準：DOM 操作，CSS選擇器，JSON，Canvas以及SVG。

CasperJS 基于PhantomJS和SlimerJS，提供了更加易用API, 增強了測試等方面的支持。

Phantomjs＋CasperJS適合于大部分網站的自動化測試，但是要注意的是，這組技術選型不適合于新特性眾多的網站的測試，究其原因最新版的CasperJS所支持的Phantomjs1.9.8用的是2011年的Webkit內核534.34，目標測試網站用到的很多新特性在此版本瀏覽器上不兼容。

(2）方案二：SlimerJS＋CasperJS

SlimerJS 與PhantomJS相似，運行于Gecko內核之上（與Firefox同核）。SlimerJS的功能相對Phantomjs弱很多，比如不支持--ignore-ssl-errors參數設置，導致登錄頁面腳本運行失敗。

(3）方案三：webdriverio + mocha

webdriverio 自動化工具，基于Selenium WebDriver封裝，可運行于chrome, firefox, safari, ie, ios android等瀏覽器或APP。mocha 是一款BDD測試框架。用戶操作測試：編寫一套腳本，可運行于不同瀏覽器，實現功能測試的同時順帶實現瀏覽器兼容性測試。界面回歸測試：像素對比，需要安裝webdrivercss插件。作為前端工程師，在寫測試腳本時總有一股修改DOM元素從而達到操作效果的沖動，還好webdriver沒有提供此類API，避免了對測試對象的破壞與干涉。

3.4 系統架構

前端自動化測試與持續集成系統集前端單元測試、覆蓋率測試、界面回歸測試、功能測試、持續集成及結果分析等多種功能于一體。利用此平臺，測試工作者可以方便地進行測試內容管理和測試結果查看。此外，為了方便測試工作者使用前端自動化測試及持續集成系統，設計了易于理解的交互界面。以下將從幾個步驟分析系統的流程：

(1）搭建工程目錄

搭建工程目錄是自動化測試和項目開展的第一步，旨在自動地下載前端自動化測試與持續集成系統模塊，拉去代碼版本管理服務器（如SVN）里項目源碼的最新版本到本地，然后根據模塊的結構組織開展項目并隨時實施自動化測試。

(2）安裝環境以及插件

自動化安裝時需要考慮操作系統以及瀏覽器測試需求，前端自動化測試與持續集成系統將根據用戶的命令，在硬件軟件安祖運行條件時根據相應的測試環境來開展測試。

(3）啟停測試

多模塊協調工作的插件在前端自動化測試系統中普遍存在，部分前端自動化測試模塊有很嚴格的安裝啟動順序。被命令行調用的模塊成功安裝后，啟停測試的命令應該根據特定的業務邏輯執行，保證相應模塊的業務邏輯能夠正常的工作。

(4）測試腳本

根據系統使用者的需求，依據開發人員或者測試人員設計的測試用例，來開發測試腳本，根據對每個測試腳本執行測試用例。在每個測試用例逐一地自動化地執行后，測試結果（成功與失敗）將被返回給控制節點，返回結束后對結果進行過濾并且輸出顯示測試結果。

(5）顯示測試結果

在執行測試用例時，node中的監控進程會收集被測系統上的測試結果性能數據和詳細日志數據。在該測試用例執行完后，該監控進程自動地會將收集的結果發送到GUI界面。

由系統技術選型以及以上流程，這個系統的架構如下：

圖 系統架構圖