H5是HTML5的簡稱，以下的內(nèi)容是介紹H5頁面的知識：HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML 標準版本，現(xiàn)在仍處于發(fā)展階段，但大部分瀏覽器已經(jīng)支持某些 HTML5 技術。HTML 5有兩大特點：首先，強化了 Web 網(wǎng)頁的表現(xiàn)性能。其次，追加了本地數(shù)據(jù)庫等 Web 應用的功能。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術組合。它希望能夠減少瀏覽器對于需要插件的豐富性網(wǎng)絡應用服務（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，與Oracle JavaFX的需求，并且提供更多能有效增強網(wǎng)絡應用的標準集。H5表現(xiàn)在很多地方上，我們平時看到最多的就是手機微信上時不時彈出的騰訊新聞，這些新聞點擊進入觀看就是H5頁面的一個范疇。
好了，哪下面就主要說說如何去做H5頁面的測試呢？
1、業(yè)務邏輯相關的測試：
除基本的功能測試之外，H5頁面的測試，需要關注以下幾點：
1）登陸測試：
目前H5與native各個客戶端都做了互通，所以大家在測試的時候要注意兩點：
（1）若客戶端已登錄，那么進入H5后仍然是登錄狀態(tài)。
（2）若客戶端未登錄，進入H5，點擊對應按鈕OR鏈接，如果需要登錄，須拉起native登錄。若取消登錄，是否可再次拉起登錄，或者停留在的頁面是否有對應的登錄提示。 （注：本次測試過程中就發(fā)現(xiàn)，第一次點擊鏈接，可以拉起登錄，第二次卻不能）
2）翻頁測試：
當遇到翻頁加載的頁面，需要注意內(nèi)容為1頁或者多頁的情況。
（1）數(shù)據(jù)分頁加載時，注意后續(xù)頁面請求數(shù)據(jù)的正確。
注：這個需要注意在快速操作場景中，請求頁數(shù)是不是依次遞增，快速操作（如第一頁尚未loading出來的時候仍然繼續(xù)上拉操作）時是否發(fā)出去對應的請求了。
3）刷新與返回的測試：
（1）下拉刷新是否仍然處于當前頁面
（2）用戶主動點擊刷新按鈕是否仍然處于當前頁面
（3）點擊返回與back鍵，回退頁面是否是期望頁面
注：本次測試過程中就發(fā)現(xiàn)，mtop接口請求成功，但是data內(nèi)無數(shù)據(jù)時，返回到的就是個空白頁面，無法正常發(fā)送請求。
4） mtop接口返回處理：
發(fā)現(xiàn)這個出現(xiàn)問題的地方有很多，但是只要有意識的去處理，就很容易避免，主要是有以下幾種情況：
（1）請求成功，且返回有數(shù)據(jù)，測試mtop接口返回數(shù)據(jù)的各種場景。
（2）請求成功，但data內(nèi)容為空。
（3）請求接口異常，出現(xiàn)ERR_SID_INVALID::SESSION過期，拉起登錄。
（4）請求接口發(fā)生除C中提到的異常之外的異常，通?？蓺w結為一類進行處理。
2、與H5適配相關的測試：
H5的適配其實比客戶端的相對來說，要少一些，手機品牌之間的差異不大，所以不用太多關注，最容易出現(xiàn)問題的是系統(tǒng)，這個要特別關注下：
1）分辨率高（如7201280，重點關注頁面背景是否完全撐開頁面，刷新是否有抖動）、分辨率低（如320480，重點關注下彈框樣式和文案折行）
2）android4.2版本以上的設備隨便測試一兩臺即可
3）蘋果近幾年常用的系統(tǒng)版本手機
3、安全相關的測試：
1）明確投放渠道都有哪些 ：
如獨客、主客、wap，是否對未投放渠道做了限制，直接通過url請求是否攔截等
2）評估是否需要接入集團安全，如mtee黑白名單等
3）是否需要接入支付寶實名認證：
涉及到金錢相關，如天貓積分，紅包等，為了防刷，一般都需要判斷是否支付寶實名認證
4）是否接入windvane，所有請求通過native發(fā)出
4、操作頁面體驗相關的測試：
1）資源相關：
（1）頁面中有圖片的話，淘寶那邊建議圖片一般不大于50kb，本著一個原則，盡量縮小圖片
（2）資源是否壓縮、是否通過CDN加載
（3）如何保證二次發(fā)布后有效更新
2）流量消耗：
（1）對于一些不會變化的圖片，如游戲動畫效果相關圖片，不需要每次都請求的東西，做本地緩存。
（2）數(shù)據(jù)較多時是否做了分頁加載。
3）頁面展現(xiàn)時間：
（1）關注頁面首屏加載時間。
4）頁面提示：
（1）弱網(wǎng)絡下，數(shù)據(jù)加載較慢，是否有對應的loading提示。
（2）接口獲取異常時，提示是否友好。
（3）刷新頁面或者加載新內(nèi)容時頁面是否有抖動。
5）手機操作相關：
（1）鎖屏之后展示頁面。
（2）回退到后臺之后，重新呼出在前臺展示。
（3）弱網(wǎng)絡體驗
