H5頁面測試要點

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頁面的測試呢？

 

一、業務邏輯相關的測試：

除基本的功能測試以外，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中提到的異常以外的異常，一般可歸結爲一類進行處理。 

 

二、與H5適配相關的測試： 

H5的適配其實比客戶端的相對來講，要少一些，手機品牌之間的差別不大，因此不用太多關注，最容易出現問題的是系統，這個要特別關注下： 

1）分辨率高（如720*1280，重點關注頁面背景是否徹底撐開頁面，刷新是否有抖動）、分辨率低（如320*480，重點關注下彈框樣式和文案折行） 

2）android4.2版本以上的設備隨便測試一兩臺便可

3）蘋果近幾年經常使用的系統版本手機

 

三、安全相關的測試：

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

如獨客、主客、wap，是否對未投放渠道作了限制，直接經過url請求是否攔截等 

2）評估是否須要接入集團安全，如mtee黑白名單等

3）是否須要接入支付寶實名認證：

涉及到金錢相關，如天貓積分，紅包等，爲了防刷，通常都須要判斷是否支付寶實名認證 

4）是否接入windvane，全部請求經過native發出

 

四、操做頁面體驗相關的測試：

1）資源相關：

（1）頁面中有圖片的話，淘寶那邊建議圖片通常不大於50kb，本着一個原則，儘可能縮小圖片 

（2）資源是否壓縮、是否經過CDN加載 

（3）如何保證二次發佈後有效更新　

2）流量消耗： 

（1）對於一些不會變化的圖片，如遊戲動畫效果相關圖片，不須要每次都請求的東西，作本地緩存。 

（2）數據較多時是否作了分頁加載。 

3）頁面展示時間：

（1）關注頁面首屏加載時間。 

4）頁面提示： 

（1）弱網絡下，數據加載較慢，是否有對應的loading提示。 

（2）接口獲取異常時，提示是否友好。 

（3）刷新頁面或者加載新內容時頁面是否有抖動。 

5）手機操做相關：

（1）鎖屏以後展現頁面。 

（2）回退到後臺以後，從新呼出在前臺展現。 

（3）弱網絡體驗