騰訊雲技術社群-掘金主頁持續為大家呈現雲端計算技術文章，歡迎大家關注！
作者：莫卓穎
背景
相信進行過前端開發的同學都知道，前端測試不僅僅涉及到功能的測試，而且也需要考慮到介面樣式測試、多瀏覽器相容性測試、效能測試。本文主要討論分析目前前端測試的現狀，並討論目前流行的測試工具，下篇文章將會介紹工具的使用方法
前端測試分類
前端測試主要分三大方向測試，而這三大方向也分很多小方向測試，首先簡單的介紹每個方向的概念
- 介面樣式測試
固定介面樣式測試：主要針對文字內容不變的區域，例如頁面的頁頭，頁尾這類結構、內容不變的區域，而測試一般通過截圖對比解決。
結構不變介面樣式測試：主要針對結構不變的區域，例如新聞區域這類結構不變，內容變化的區域，這類測試一般通過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(7、8、9)、Mozilla Firefox、Mozilla Suite等。這個工具的主要功能包括：測試與瀏覽器的相容性——測試你的應用程式看是否能夠很好得工作在不同瀏覽器和作業系統之上。
工具可測試型別：多瀏覽器測試。
工具點評：Selenium作為多瀏覽器的測試工具，解決前端在多瀏覽器測試的空缺。但Selenium與PhantomJS類似語法十分晦澀難懂，而且各個瀏覽器之間的相容性對比比較容易出錯。因不同瀏覽器之間由於標準原因很難做到畫素級別的比較，因此不推薦使用Selenium作介面比較比較測試，而推薦進行功能迴歸測試。
- Phantomas
工具地址：github.com/macbre/phan…
工具介紹：基於PhantomJS的效能資料收集工具。
工具點評：Phantomas作為自動化效能資料收集工具，解決了日常效能資料收集的問題的，但是效能優化的指標資料需要的是大樣本、更加貼近使用者資料的平均值，而不是使用假設在條件良好的環境下獲取的效能資料，因此更推薦使用Phantomas作效能異常監控，而不是效能指標的評測。
總結：
隨著網際網路產品的日益複雜，前端的單頁面應用、前端介面、前端功能邏輯變得越來越複雜，為了保證功能的正常，因此前端測試變得越來越重要，但是進行前端測試必然會影響到前端開發的效率，因此我們後面將會提供一種自動化前端測試方案來平衡效率與穩定性的問題。
相關推薦
前端 fetch 通訊
教你用webgl快速建立一個小世界
前端開發框架簡介:angular和react
此文已由作者授權騰訊雲技術社群釋出，轉載請註明文章出處
原文連結：www.qcloud.com/community/a…
獲取更多騰訊海量技術實踐乾貨，歡迎大家前往騰訊雲技術社群