H5作為移動端的web頁面，有它自身的優勢，如它可以跨平臺使用，開發成本相對較低；可隨時上線就更新版本，適合快速迭代；可以輕量的觸達用戶，提供更便捷的服務。因此在項目中，對于上線后迭代更新較快的頁面，通常利用H5頁面來實現。

從廣義上來講，HTML5是包括HTML、CSS和JavaScript在內的一套技術組合。

HTML：網頁的具體內容和結構；

CSS：網頁的樣式（美化網頁最重要的一塊）；

JavaScript：網頁的交互效果，比如對用戶鼠標事件作出響應；

它希望能夠減少瀏覽器對于需要插件的豐富性網絡應用服務（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，與Oracle JavaFX的需求，并且提供更多能有效增強網絡應用的標準集。

H5頁面測試

1. 環境配置

一般的測試流程是H5頁面開發完成后，先在測試環境進行測試，測試通過再部署到線上環境，所以測試階段要先進行測試環境配置。

2. 測試關注點

1）業務邏輯測試

業務邏輯相關的測試，視具體業務的需求而定；

2）頁面元素UI測試

頁面UI主要包括文字、圖片以及頁面布局等方面測試；

文字：風格一致、錯別字、標點符號統一、換行是否顯示正常、一行長文字是省略顯示全顯示、圖片與文字是否一致、刷新頁面文字是否展示；

圖片：A）靜態：大小、風格；B）動態：大小、風格、準確性動態圖、轉場動畫，loading動畫，點擊動畫等；C）刷新頁面圖片是否正常展示；D）圖片適配：根據不同屏幕和分辨率進行適配；

頁面布局：頁面文字圖片是否能自適應屏幕、整體布局是否合理等；

內嵌鏈接：空鏈接、刷新鏈接數據是否展示；鏈接跳轉是否正確；

3）頁面操作

A）刷新與返回

頁面刷新是否仍然處于當前頁面；用戶主動點擊刷新按鈕是否仍然處于當前頁面；點擊返回與back鍵，回退頁面是否是期望頁面（安卓物理按鍵返回；iOS左滑返回，考慮左滑一半松手，自動回到H5頁面是否正常加載的情況）；

B）翻頁

遇到翻頁加載的頁面，需要注意內容為一頁或者多頁的情況；數據分頁加載時，注意后續頁面請求數據的正確；

注意在快速操作場景中，請求頁數是不是依次遞增，快速操作（如第一頁尚未loading出來的時候仍然繼續上拉操作）時是否發出去對應的請求了。

C）彈窗出現/關閉

手機測試要特別關注交互是否友好，可能會導致一些體驗的問題，比如：彈出層的點擊，是否會穿透，影響到彈出層下面的頁面；

D）浮層頁面

對于一些浮層做的頁面，例如地圖、產品分類等浮層，注意拖動后是否可以看到它下面的頁面，拖動后邊緣是否有留白；

E）頁面提示

弱網絡下，數據加載較慢，是否有對應的loading提示；接口獲取異常時，提示是否合理；刷新頁面或者加載新內容時頁面是否有抖動；

F）手機操作相關

鎖屏之后展示頁面；退到后臺，再重新呼出在前臺展示；

4）接口測試

A）接口返回處理：

請求成功，且返回有數據，測試接口返回數據的各種場景-接口返回的數據期望的是否一致；接口入參的邊界值校驗；檢查接口的容錯性，如對于傳輸數據類型錯誤能否處理等，整型的輸入小數、中英文等；

請求成功，但data內容為空；

請求接口異常時，頁面處理；

B）接口性能測試：

頁面加載時間：關注頁面首屏加載時間；調用接口數據返回的時間，速度過慢會影響用戶體驗；資源相關：頁面中有圖片的話，盡量縮小圖片；資源是否壓縮、是否通過CDN加載。

服務端并發性能：用戶量過多時，服務器性能是否受到影響；

內存：反復訪問，檢查是否占用大量內存；

流量消耗：對于一些不會變化的圖片，如游戲動畫效果相關圖片，不需要每次都請求的東西，做本地緩存；數據較多時是否做了分頁加載。

5）網絡測試

網絡環境：WiFi、4G、3G、2G；

網絡異常：弱網、斷網；網絡切換；

6）適配測試

H5頁面需要適配的內容主要有：圖片高清適配；字體大小適配；頁面布局寬度適配；橫豎屏適配；

考慮適配因素：對不同屏幕尺寸和分辨率的機型進行適配；不同平臺iOS和安卓進行適配；屏幕橫豎屏適配；日夜間模式適配；深色淺色模式適配（iOS系統）；

7）安全測試

明確投放渠道都有哪些，是否對未投放渠道做了限制，直接通過url請求是否攔截等；接口部分敏感信息是否加密傳輸等；直接URL是否能打開；防止惡意攻擊；

8）埋點測試

埋點數據檢查；

9）上線后驗證測試

上線后：H5涉及到的各種資源文件，在測試環境（包括預發環境），一般都是內域，正式上線，有把資源文件（或者說url中的鏈接忘了修改）漏發的風險，所以上線后一定要用外網環境再快速回歸下；

如何保證二次發布后有效更新；

以上是對項目中遇到的H5頁面的測試關注點的總結，基本都可以應用到移動端APP常見的H5頁面測試上，除此之外，如果有其他未考慮到的地方，歡迎大家留言補充。

推薦閱讀：

移動測試之H5頁面性能測試點總結

移動端測試用例怎么寫？如何設計移動端測試用例？

移動端自動化測試工具都有哪些？

APP的UI測試點及接口測試點總結

Android客戶端性能測試常見指標及關注點

4款常用的安卓自動化測試工具對比分析

測試iOS APP時需要注意什么？iOS APP需要關注的測試點