H5是HTML5的簡稱，以下的內(nèi)容是介紹H5頁面的知識(shí)：HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標(biāo)準(zhǔn)的 HTML 標(biāo)準(zhǔn)版本惭等，現(xiàn)在仍處于發(fā)展階段，但大部分瀏覽器已經(jīng)支持某些 HTML5 技術(shù)每篷。HTML 5有兩大特點(diǎn)：首先卫漫，強(qiáng)化了 Web 網(wǎng)頁的表現(xiàn)性能。其次吵护，追加了本地?cái)?shù)據(jù)庫等 Web 應(yīng)用的功能。廣義論及HTML5時(shí)表鳍，實(shí)際指的是包括HTML馅而、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對于需要插件的豐富性網(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表現(xiàn)在很多地方上绳姨，我們平時(shí)看到最多的就是手機(jī)微信上時(shí)不時(shí)彈出的騰訊新聞登澜，這些新聞點(diǎn)擊進(jìn)入觀看就是H5頁面的一個(gè)范疇。

好了飘庄，哪下面就主要說說如何去做H5頁面的測試呢脑蠕？

1、業(yè)務(wù)邏輯相關(guān)的測試：

除基本的功能測試之外跪削，H5頁面的測試谴仙，需要關(guān)注以下幾點(diǎn)：

1）登陸測試：

目前H5與native各個(gè)客戶端都做了互通，所以大家在測試的時(shí)候要注意兩點(diǎn)：

（1）若客戶端已登錄碾盐，那么進(jìn)入H5后仍然是登錄狀態(tài)。

（2）若客戶端未登錄毫玖，進(jìn)入H5凌盯，點(diǎn)擊對應(yīng)按鈕OR鏈接十气，如果需要登錄春霍，須拉起native登錄叶眉。若取消登錄，是否可再次拉起登錄莲趣，或者停留在的頁面是否有對應(yīng)的登錄提示饱溢。 （注：本次測試過程中就發(fā)現(xiàn)，第一次點(diǎn)擊鏈接潘鲫，可以拉起登錄肋杖，第二次卻不能）

2）翻頁測試：

當(dāng)遇到翻頁加載的頁面状植，需要注意內(nèi)容為1頁或者多頁的情況。

（1）數(shù)據(jù)分頁加載時(shí)津畸，注意后續(xù)頁面請求數(shù)據(jù)的正確。

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

3）刷新與返回的測試：

（1）下拉刷新是否仍然處于當(dāng)前頁面

（2）用戶主動(dòng)點(diǎn)擊刷新按鈕是否仍然處于當(dāng)前頁面

（3）點(diǎn)擊返回與back鍵，回退頁面是否是期望頁面

注：本次測試過程中就發(fā)現(xiàn)抱环，mtop接口請求成功，但是data內(nèi)無數(shù)據(jù)時(shí)眶痰，返回到的就是個(gè)空白頁面竖伯，無法正常發(fā)送請求。

4） mtop接口返回處理：

發(fā)現(xiàn)這個(gè)出現(xiàn)問題的地方有很多七婴，但是只要有意識(shí)的去處理打厘，就很容易避免贺辰，主要是有以下幾種情況：

（1）請求成功，且返回有數(shù)據(jù)莽鸭，測試mtop接口返回?cái)?shù)據(jù)的各種場景滓侍。

（2）請求成功撩笆，但data內(nèi)容為空。

（3）請求接口異常氮兵，出現(xiàn)ERR_SID_INVALID::SESSION過期歹鱼，拉起登錄。

（4）請求接口發(fā)生除C中提到的異常之外的異常南片，通程劢可歸結(jié)為一類進(jìn)行處理。

2伞广、與H5適配相關(guān)的測試：

H5的適配其實(shí)比客戶端的相對來說，要少一些减拭，手機(jī)品牌之間的差異不大区丑，所以不用太多關(guān)注，最容易出現(xiàn)問題的是系統(tǒng)刊苍，這個(gè)要特別關(guān)注下：

1）分辨率高（如7201280正什，重點(diǎn)關(guān)注頁面背景是否完全撐開頁面号杏，刷新是否有抖動(dòng)）、分辨率低（如320480主经，重點(diǎn)關(guān)注下彈框樣式和文案折行）

2）android4.2版本以上的設(shè)備隨便測試一兩臺(tái)即可

3）蘋果近幾年常用的系統(tǒng)版本手機(jī)

3罩驻、安全相關(guān)的測試：

1）明確投放渠道都有哪些 ：

如獨(dú)客护赊、主客、wap节吮，是否對未投放渠道做了限制透绩，直接通過url請求是否攔截等

2）評(píng)估是否需要接入集團(tuán)安全壁熄，如mtee黑白名單等

3）是否需要接入支付寶實(shí)名認(rèn)證：

涉及到金錢相關(guān)草丧，如天貓積分，紅包等固棚，為了防刷，一般都需要判斷是否支付寶實(shí)名認(rèn)證

4）是否接入windvane厂汗，所有請求通過native發(fā)出

4娶桦、操作頁面體驗(yàn)相關(guān)的測試：

1）資源相關(guān)：

（1）頁面中有圖片的話汁汗，淘寶那邊建議圖片一般不大于50kb知牌，本著一個(gè)原則，盡量縮小圖片

（2）資源是否壓縮菩混、是否通過CDN加載

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

2）流量消耗：

（1）對于一些不會(huì)變化的圖片沮峡，如游戲動(dòng)畫效果相關(guān)圖片，不需要每次都請求的東西邢疙，做本地緩存疟游。

（2）數(shù)據(jù)較多時(shí)是否做了分頁加載式矫。

3）頁面展現(xiàn)時(shí)間：

（1）關(guān)注頁面首屏加載時(shí)間乡摹。

4）頁面提示：

（1）弱網(wǎng)絡(luò)下聪廉，數(shù)據(jù)加載較慢板熊，是否有對應(yīng)的loading提示察绷。

（2）接口獲取異常時(shí)，提示是否友好容劳。

（3）刷新頁面或者加載新內(nèi)容時(shí)頁面是否有抖動(dòng)。

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

（1）鎖屏之后展示頁面蚜印。

（2）回退到后臺(tái)之后窄赋，重新呼出在前臺(tái)展示。

（3）弱網(wǎng)絡(luò)體驗(yàn)