可視化前端測試

背景

相信進行過前端開發的同學都知道，前端測試不僅僅涉及到功能的測試，而且也需要考慮到界面樣式測試、多浏覽器相容性測試、性能測試。本文主要讨論分析目前前端測試的現狀，并讨論目前流行的測試工具，下篇文章将會介紹工具的使用方法

前端測試分類

前端測試主要分三大方向測試，而這三大方向也分很多小方向測試，首先簡單的介紹每個方向的概念

• 界面樣式測試

固定界面樣式測試：主要針對文字内容不變的區域，例如頁面的頁頭，頁腳這類結構、内容不變的區域，而測試一般通過截圖對比解決。 結構不變界面樣式測試：主要針對結構不變的區域，例如新聞區域這類結構不變，内容變化的區域，這類測試一般通過DOM元素對比解決。 計算樣式測試：主要針對計算樣式不變的區域，這類測試一般通過比較計算樣式解決，但是這種測試不推薦，因為測試成本比較大。

• 功能測試

伺服器資料預期測試：主要針對使用者在前端界面進行某種操作後，送出資料給背景後，測試背景能否傳回預期的資料 界面功能測試：主要針對使用者在前端界面進行某種互動性操作後，測試能否擷取預期的功能、界面互動

• 多浏覽器測試

多浏覽器測試：基于界面樣式測試、功能測試的基礎上來進行不同浏覽器的的測試。

• 性能測試

白屏時間：使用者浏覽器輸入網址後至浏覽器出現至少1px畫面為止。 首屏時間：使用者浏覽器首屏内所有的元素呈現所花費時間。 使用者可操作時間(dom ready) ：網站某些功能可以使用的時間。 頁面總下載下傳時間(onload):網站中所有資源加載完成并且可用時間。

前端測試工具

欲善其事必利其器，在深入讨論如果打造可視化測試工具之前，我們先得讨論目前前端流行的測試工具

• PhantomJS

工具位址：http://phantomjs.org/ 工具介紹：是一個基于 WebKit 的伺服器端 JavaScript API。它全面支援web而不需浏覽器支援，其快速，原生支援各種Web标準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于 頁面自動化 ， 網絡監測 ， 網頁截屏 ，以及 無界面測試 等,簡單來說就是通過js操作浏覽器。工具可測試類型：性能測試、功能測試、界面測試。 工具點評：作為衆多測試工具的核心基礎庫，PhantomJS可謂無所不能，基本上在前端測試領域隻有你想不到的，沒有它做不到的，但是也正是因為PhantomJS的功能過于強大，更加接近原生浏覽器，導緻其文法十分晦澀。

• casperjs

工具位址：http://casperjs.org/ 工具介紹：CasperJS 是基于PhantomJS作為核心的測試工具，為界面測試、功能測試提供了更加易用的API, 增強了測試的便利性 工具可測試類型：性能測試、功能測試、界面測試 工具點評：CasperJS極大的簡化了PhantomJS的接口，特别在前端測試方面，封裝了大量相關的函數，而且支援定制化的單元測試結果

• PhantomCSS

工具位址：https://github.com/Huddle/PhantomCSS 工具介紹：PhantomCSS是基于CasperJS作為核心，并結合Resemble.js 去進行圖像像素級的比較，支援不一緻的地方。 工具可測試類型：界面測試。 工具點評：PhantomCSS加強了CasperJS在界面測試中圖像比較的不足，在Resemble.js的基礎上提供更加易用的圖像比較接口。

• Selenium

工具位址：http://www.seleniumhq.org/ 工具介紹：Selenium是一個用于Web應用程式測試的工具。Selenium測試直接運作在浏覽器中，就像真正的使用者在操作一樣。支援的浏覽器包括IE(7、8、9)、Mozilla Firefox、Mozilla Suite等。這個工具的主要功能包括：測試與浏覽器的相容性——測試你的應用程式看是否能夠很好得工作在不同浏覽器和作業系統之上。 工具可測試類型：多浏覽器測試。 工具點評：Selenium作為多浏覽器的測試工具，解決前端在多浏覽器測試的空缺。但Selenium與PhantomJS類似文法十分晦澀難懂，而且各個浏覽器之間的相容性對比比較容易出錯。因不同浏覽器之間由于标準原因很難做到像素級别的比較，是以不推薦使用Selenium作界面比較比較測試，而推薦進行功能回歸測試。

• Phantomas 工具位址：https://github.com/macbre/phantomas 工具介紹：基于PhantomJS的性能資料收集工具。 工具點評：Phantomas作為自動化性能資料收集工具，解決了日常性能資料收集的問題的，但是性能優化的名額資料需要的是大樣本、更加貼近使用者資料的平均值，而不是使用假設在條件良好的環境下擷取的性能資料，是以更推薦使用Phantomas作性能異常監控，而不是性能名額的評測。

總結：