H5作為移動端的web頁面，有它自身的優(yōu)勢，如它可以跨平臺使用，開發(fā)成本相對較低；可隨時上線就更新版本，適合快速迭代；可以輕量的觸達用戶，提供更便捷的服務。因此在項目中，對于上線后迭代更新較快的頁面，通常利用H5頁面來實現(xiàn)。
從廣義上來講，HTML5是包括HTML、CSS和JavaScript在內的一套技術組合。
HTML：網(wǎng)頁的具體內容和結構；
CSS：網(wǎng)頁的樣式（美化網(wǎng)頁最重要的一塊）；
JavaScript：網(wǎng)頁的交互效果，比如對用戶鼠標事件作出響應；
它希望能夠減少瀏覽器對于需要插件的豐富性網(wǎng)絡應用服務（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，與Oracle JavaFX的需求，并且提供更多能有效增強網(wǎng)絡應用的標準集。
H5頁面測試
1. 環(huán)境配置
一般的測試流程是H5頁面開發(fā)完成后，先在測試環(huán)境進行測試，測試通過再部署到線上環(huán)境，所以測試階段要先進行測試環(huán)境配置。
2. 測試關注點
1）業(yè)務邏輯測試
業(yè)務邏輯相關的測試，視具體業(yè)務的需求而定；
2）頁面元素UI測試
頁面UI主要包括文字、圖片以及頁面布局等方面測試；
文字：風格一致、錯別字、標點符號統(tǒng)一、換行是否顯示正常、一行長文字是省略顯示全顯示、圖片與文字是否一致、刷新頁面文字是否展示；
圖片：A）靜態(tài)：大小、風格；B）動態(tài)：大小、風格、準確性動態(tài)圖、轉場動畫，loading動畫，點擊動畫等；C）刷新頁面圖片是否正常展示；D）圖片適配：根據(jù)不同屏幕和分辨率進行適配；
頁面布局：頁面文字圖片是否能自適應屏幕、整體布局是否合理等；
內嵌鏈接：空鏈接、刷新鏈接數(shù)據(jù)是否展示；鏈接跳轉是否正確；
3）頁面操作
A）刷新與返回
頁面刷新是否仍然處于當前頁面；用戶主動點擊刷新按鈕是否仍然處于當前頁面；點擊返回與back鍵，回退頁面是否是期望頁面（安卓物理按鍵返回；iOS左滑返回，考慮左滑一半松手，自動回到H5頁面是否正常加載的情況）；
B）翻頁
遇到翻頁加載的頁面，需要注意內容為一頁或者多頁的情況；數(shù)據(jù)分頁加載時，注意后續(xù)頁面請求數(shù)據(jù)的正確；
注意在快速操作場景中，請求頁數(shù)是不是依次遞增，快速操作（如第一頁尚未loading出來的時候仍然繼續(xù)上拉操作）時是否發(fā)出去對應的請求了。
C）彈窗出現(xiàn)/關閉
手機測試要特別關注交互是否友好，可能會導致一些體驗的問題，比如：彈出層的點擊，是否會穿透，影響到彈出層下面的頁面；
D）浮層頁面
對于一些浮層做的頁面，例如地圖、產品分類等浮層，注意拖動后是否可以看到它下面的頁面，拖動后邊緣是否有留白；
E）頁面提示
弱網(wǎng)絡下，數(shù)據(jù)加載較慢，是否有對應的loading提示；接口獲取異常時，提示是否合理；刷新頁面或者加載新內容時頁面是否有抖動；
F）手機操作相關
鎖屏之后展示頁面；退到后臺，再重新呼出在前臺展示；
4）接口測試
A）接口返回處理：
請求成功，且返回有數(shù)據(jù)，測試接口返回數(shù)據(jù)的各種場景-接口返回的數(shù)據(jù)期望的是否一致；接口入?yún)⒌倪吔缰敌ｒ?；檢查接口的容錯性，如對于傳輸數(shù)據(jù)類型錯誤能否處理等，整型的輸入小數(shù)、中英文等；
請求成功，但data內容為空；
請求接口異常時，頁面處理；
B）接口性能測試：
頁面加載時間：關注頁面首屏加載時間；調用接口數(shù)據(jù)返回的時間，速度過慢會影響用戶體驗；資源相關：頁面中有圖片的話，盡量縮小圖片；資源是否壓縮、是否通過CDN加載。
服務端并發(fā)性能：用戶量過多時，服務器性能是否受到影響；
內存：反復訪問，檢查是否占用大量內存；
流量消耗：對于一些不會變化的圖片，如游戲動畫效果相關圖片，不需要每次都請求的東西，做本地緩存；數(shù)據(jù)較多時是否做了分頁加載。
5）網(wǎng)絡測試
網(wǎng)絡環(huán)境：WiFi、4G、3G、2G；
網(wǎng)絡異常：弱網(wǎng)、斷網(wǎng)；網(wǎng)絡切換；
6）適配測試
H5頁面需要適配的內容主要有：圖片高清適配；字體大小適配；頁面布局寬度適配；橫豎屏適配；
考慮適配因素：對不同屏幕尺寸和分辨率的機型進行適配；不同平臺iOS和安卓進行適配；屏幕橫豎屏適配；日夜間模式適配；深色淺色模式適配（iOS系統(tǒng)）；
7）安全測試
明確投放渠道都有哪些，是否對未投放渠道做了限制，直接通過url請求是否攔截等；接口部分敏感信息是否加密傳輸?shù)龋恢苯覷RL是否能打開；防止惡意攻擊；
8）埋點測試
埋點數(shù)據(jù)檢查；
9）上線后驗證測試
上線后：H5涉及到的各種資源文件，在測試環(huán)境（包括預發(fā)環(huán)境），一般都是內域，正式上線，有把資源文件（或者說url中的鏈接忘了修改）漏發(fā)的風險，所以上線后一定要用外網(wǎng)環(huán)境再快速回歸下；
如何保證二次發(fā)布后有效更新；
以上是對項目中遇到的H5頁面的測試關注點的總結，基本都可以應用到移動端APP常見的H5頁面測試上，除此之外，如果有其他未考慮到的地方，歡迎大家留言補充。
推薦閱讀：
移動測試之H5頁面性能測試點總結
移動端測試用例怎么寫？如何設計移動端測試用例？
移動端自動化測試工具都有哪些？
APP的UI測試點及接口測試點總結
Android客戶端性能測試常見指標及關注點
4款常用的安卓自動化測試工具對比分析
測試iOS APP時需要注意什么？iOS APP需要關注的測試點
sales@spasvo.com
