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

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

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

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

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

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

它希望能夠減少瀏覽器對(duì)于需要插件的豐富性網(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頁(yè)面測(cè)試

1. 環(huán)境配置

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

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

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

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

2）頁(yè)面元素UI測(cè)試

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

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

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

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

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

3）頁(yè)面操作

A）刷新與返回

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

B）翻頁(yè)

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

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

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

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

D）浮層頁(yè)面

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

E）頁(yè)面提示

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

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

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

4）接口測(cè)試

A）接口返回處理：

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

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

請(qǐng)求接口異常時(shí)，頁(yè)面處理；

B）接口性能測(cè)試：

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

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

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

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

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

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

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

6）適配測(cè)試

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

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

7）安全測(cè)試

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

8）埋點(diǎn)測(cè)試

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

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

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

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

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

推薦閱讀：

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

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

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

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

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

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

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