如何進(jìn)行H5前端頁面測試？H5前端頁面需要注意的測試點(diǎn)

H5作為移動(dòng)端的web頁面，有它自身的優(yōu)勢，如它可以跨平臺(tái)使用，開發(fā)成本相對較低；可隨時(shí)上線就更新版本，適合快速迭代；可以輕量的觸達(dá)用戶，提供更便捷的服務(wù)。因此在項(xiàng)目中，對于上線后迭代更新較快的頁面，通常利用H5頁面來實(shí)現(xiàn)。

從廣義上來講，HTML5是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。

HTML：網(wǎng)頁的具體內(nèi)容和結(jié)構(gòu)；

CSS：網(wǎng)頁的樣式（美化網(wǎng)頁最重要的一塊）；

JavaScript：網(wǎng)頁的交互效果，比如對用戶鼠標(biāo)事件作出響應(yīng)；

它希望能夠減少瀏覽器對于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，與Oracle JavaFX的需求，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。

H5頁面測試

1. 環(huán)境配置

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

2. 測試關(guān)注點(diǎn)

1）業(yè)務(wù)邏輯測試

業(yè)務(wù)邏輯相關(guān)的測試，視具體業(yè)務(wù)的需求而定；

2）頁面元素UI測試

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

文字：風(fēng)格一致、錯(cuò)別字、標(biāo)點(diǎn)符號統(tǒng)一、換行是否顯示正常、一行長文字是省略顯示全顯示、圖片與文字是否一致、刷新頁面文字是否展示；

圖片：A）靜態(tài)：大小、風(fēng)格；B）動(dòng)態(tài)：大小、風(fēng)格、準(zhǔn)確性動(dòng)態(tài)圖、轉(zhuǎn)場動(dòng)畫，loading動(dòng)畫，點(diǎn)擊動(dòng)畫等；C）刷新頁面圖片是否正常展示；D）圖片適配：根據(jù)不同屏幕和分辨率進(jìn)行適配；

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

內(nèi)嵌鏈接：空鏈接、刷新鏈接數(shù)據(jù)是否展示；鏈接跳轉(zhuǎn)是否正確；

3）頁面操作

A）刷新與返回

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

B）翻頁

遇到翻頁加載的頁面，需要注意內(nèi)容為一頁或者多頁的情況；數(shù)據(jù)分頁加載時(shí)，注意后續(xù)頁面請求數(shù)據(jù)的正確；

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

C）彈窗出現(xiàn)/關(guān)閉

手機(jī)測試要特別關(guān)注交互是否友好，可能會(huì)導(dǎo)致一些體驗(yàn)的問題，比如：彈出層的點(diǎn)擊，是否會(huì)穿透，影響到彈出層下面的頁面；

D）浮層頁面

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

E）頁面提示

弱網(wǎng)絡(luò)下，數(shù)據(jù)加載較慢，是否有對應(yīng)的loading提示；接口獲取異常時(shí)，提示是否合理；刷新頁面或者加載新內(nèi)容時(shí)頁面是否有抖動(dòng)；

F）手機(jī)操作相關(guān)

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

4）接口測試

A）接口返回處理：

請求成功，且返回有數(shù)據(jù)，測試接口返回?cái)?shù)據(jù)的各種場景-接口返回的數(shù)據(jù)期望的是否一致；接口入?yún)⒌倪吔缰敌ｒ?yàn)；檢查接口的容錯(cuò)性，如對于傳輸數(shù)據(jù)類型錯(cuò)誤能否處理等，整型的輸入小數(shù)、中英文等；

請求成功，但data內(nèi)容為空；

請求接口異常時(shí)，頁面處理；

B）接口性能測試：

頁面加載時(shí)間：關(guān)注頁面首屏加載時(shí)間；調(diào)用接口數(shù)據(jù)返回的時(shí)間，速度過慢會(huì)影響用戶體驗(yàn)；資源相關(guān)：頁面中有圖片的話，盡量縮小圖片；資源是否壓縮、是否通過CDN加載。

服務(wù)端并發(fā)性能：用戶量過多時(shí)，服務(wù)器性能是否受到影響；

內(nèi)存：反復(fù)訪問，檢查是否占用大量內(nèi)存；

流量消耗：對于一些不會(huì)變化的圖片，如游戲動(dòng)畫效果相關(guān)圖片，不需要每次都請求的東西，做本地緩存；數(shù)據(jù)較多時(shí)是否做了分頁加載。

5）網(wǎng)絡(luò)測試

網(wǎng)絡(luò)環(huán)境：WiFi、4G、3G、2G；

網(wǎng)絡(luò)異常：弱網(wǎng)、斷網(wǎng)；網(wǎng)絡(luò)切換；

6）適配測試

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

考慮適配因素：對不同屏幕尺寸和分辨率的機(jī)型進(jìn)行適配；不同平臺(tái)iOS和安卓進(jìn)行適配；屏幕橫豎屏適配；日夜間模式適配；深色淺色模式適配（iOS系統(tǒng)）；

7）安全測試

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

8）埋點(diǎn)測試

埋點(diǎn)數(shù)據(jù)檢查；

9）上線后驗(yàn)證測試

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

如何保證二次發(fā)布后有效更新；

以上是對項(xiàng)目中遇到的H5頁面的測試關(guān)注點(diǎn)的總結(jié)，基本都可以應(yīng)用到移動(dòng)端APP常見的H5頁面測試上，除此之外，如果有其他未考慮到的地方，歡迎大家留言補(bǔ)充。

推薦閱讀：

移動(dòng)測試之H5頁面性能測試點(diǎn)總結(jié)

移動(dòng)端測試用例怎么寫？如何設(shè)計(jì)移動(dòng)端測試用例？

移動(dòng)端自動(dòng)化測試工具都有哪些？

APP的UI測試點(diǎn)及接口測試點(diǎn)總結(jié)

Android客戶端性能測試常見指標(biāo)及關(guān)注點(diǎn)

4款常用的安卓自動(dòng)化測試工具對比分析

測試iOS APP時(shí)需要注意什么？iOS APP需要關(guān)注的測試點(diǎn)