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