概覽：可視化前端測試

騰訊雲技術社區-掘金主頁持續爲你們呈現雲計算技術文章，歡迎你們關注！

---

做者：莫卓穎

背景

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

前端測試分類

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

• 界面樣式測試

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

• 功能測試

服務器數據預期測試：主要針對用戶在前端界面進行某種操做後，提交數據給後臺後，測試後臺可否返回預期的數據
界面功能測試：主要針對用戶在前端界面進行某種交互性操做後，測試可否獲取預期的功能、界面交互

• 多瀏覽器測試

多瀏覽器測試：基於界面樣式測試、功能測試的基礎上來進行不一樣瀏覽器的的測試。

• 性能測試

白屏時間：用戶瀏覽器輸入網址後至瀏覽器出現至少1px畫面爲止。
首屏時間：用戶瀏覽器首屏內全部的元素呈現所花費時間。
用戶可操做時間(dom ready) ：網站某些功能可使用的時間。
頁面總下載時間(onload):網站中全部資源加載完成而且可用時間。

前端測試工具

欲善其事必利其器，在深刻討論若是打造可視化測試工具以前，咱們先得討論目前前端流行的測試工具

• PhantomJS

工具地址：phantomjs.org/
工具介紹：是一個基於 WebKit 的服務器端 JavaScript API。它全面支持web而不需瀏覽器支持，其快速，原生支持各類Web標準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。 PhantomJS 能夠用於 頁面自動化 ， 網絡監測 ， 網頁截屏 ，以及 無界面測試 等,簡單來講就是經過js操做瀏覽器。
工具可測試類型：性能測試、功能測試、界面測試。
工具點評：做爲衆多測試工具的核心基礎庫，PhantomJS可謂無所不能，基本上在前端測試領域只有你想不到的，沒有它作不到的，可是也正是由於PhantomJS的功能過於強大，更加接近原生瀏覽器，致使其語法十分晦澀。

• casperjs

工具地址：casperjs.org/
工具介紹：CasperJS 是基於PhantomJS做爲內核的測試工具，爲界面測試、功能測試提供了更加易用的API, 加強了測試的便利性
工具可測試類型：性能測試、功能測試、界面測試
工具點評：CasperJS極大的簡化了PhantomJS的接口，特別在前端測試方面，封裝了大量相關的函數，並且支持定製化的單元測試結果

• PhantomCSS

工具地址：github.com/Huddle/Phan…
工具介紹：PhantomCSS是基於CasperJS做爲內核，並結合Resemble.js 去進行圖像像素級的比較，支持不一致的地方。
工具可測試類型：界面測試。
工具點評：PhantomCSS增強了CasperJS在界面測試中圖像比較的不足，在Resemble.js的基礎上提供更加易用的圖像比較接口。

• Selenium

工具地址：www.seleniumhq.org/
工具介紹：Selenium是一個用於Web應用程序測試的工具。Selenium測試直接運行在瀏覽器中，就像真正的用戶在操做同樣。支持的瀏覽器包括IE(七、八、9)、Mozilla Firefox、Mozilla Suite等。這個工具的主要功能包括：測試與瀏覽器的兼容性——測試你的應用程序看是否可以很好得工做在不一樣瀏覽器和操做系統之上。
工具可測試類型：多瀏覽器測試。
工具點評：Selenium做爲多瀏覽器的測試工具，解決前端在多瀏覽器測試的空缺。但Selenium與PhantomJS相似語法十分晦澀難懂，並且各個瀏覽器之間的兼容性對比比較容易出錯。因不一樣瀏覽器之間因爲標準緣由很難作到像素級別的比較，所以不推薦使用Selenium做界面比較比較測試，而推薦進行功能迴歸測試。

• Phantomas
  工具地址：github.com/macbre/phan…
  工具介紹：基於PhantomJS的性能數據收集工具。
  工具點評：Phantomas做爲自動化性能數據收集工具，解決了平常性能數據收集的問題的，可是性能優化的指標數據須要的是大樣本、更加貼近用戶數據的平均值，而不是使用假設在條件良好的環境下獲取的性能數據，所以更推薦使用Phantomas做性能異常監控，而不是性能指標的評測。

總結：

隨着互聯網產品的日益複雜，前端的單頁面應用、前端界面、前端功能邏輯變得愈來愈複雜，爲了保證功能的正常，所以前端測試變得愈來愈重要，可是進行前端測試必然會影響到前端開發的效率，所以咱們後面將會提供一種自動化前端測試方案來平衡效率與穩定性的問題。

原文連接：ivweb.io/topic/55e3e…

相關推薦
前端 fetch 通訊
教你用webgl快速建立一個小世界
前端開發框架簡介:angular和react

---

此文已由做者受權騰訊雲技術社區發佈，轉載請註明文章出處
原文連接：www.qcloud.com/community/a…
獲取更多騰訊海量技術實踐乾貨，歡迎你們前往騰訊雲技術社區