H5頁面的基本測試點


優勢:
  1. H5可以跨平台使用,開發成本相對較低
  2. H5可隨時上線就更新版本,適合快速迭代
  3. H5可以輕量的觸達用戶,提供更便捷的服務
          在微信入口或者瀏覽器上,用戶只需點開鏈接就可以獲取我們鎖提供的服務 
 
劣勢:
  1. H5->app的轉化強依賴於瀏覽器
  2. H5目前基本無法將數據存儲在本地,依賴實時性數據,網絡狀態不好的時候卡到哭。
  3. 性能相對較低,影響用戶體驗
 
如何判斷是否是H5頁面:
  1. 基本上只要對那個view長按,然后看是不是有反應,比如手機震動(Android)、或者出現文字選擇粘貼(Android/iOS),那么就是WebView!
 如何測試H5: 
        
  1. 基本功能測試:(瀏覽器、微信內置瀏覽器)
  2. 登陸

    目前H5與native各個客戶端都做了互通,所以大家在測試的時候要注意兩點:

    A、若客戶端已登錄,那么進入H5后仍然是登錄狀態。

    B、若客戶端未登錄,進入H5,點擊對應按鈕OR鏈接,如果需要登錄,須拉起native登錄。若取消登錄,是否可再次拉起登錄,或者停留在的頁面是否有對應的登錄提示。

    ps:本次測試過程中就發現,第一次點擊鏈接,可以拉起登錄,第二次卻不能。

    1.2 翻頁

    遇到翻頁加載的頁面,需要注意內容為1頁或者多頁的情況。

    A、數據分頁加載時,注意后續頁面請求數據的正確。

    ps:這個需要注意在快速操作場景中,請求頁數是不是依次遞增,快速操作(如第一頁尚未loading出來的時候仍然繼續上拉操作)時是否發出去對應的請求了。

     

    3. 刷新與返回

    A、下拉刷新是否仍然處於當前頁面。

    B、用戶主動點擊刷新按鈕是否仍然處於當前頁面。

    C、點擊返回與back鍵,回退頁面是否是期望頁面

    ps:本次測試過程中就發現,mtop接口請求成功,但是data內無數據時,返回到的就是個空白頁面,無法正常發送請求。

     

    4、H5適配相關

    H5的適配其實比客戶端的相對來說,要少一些,手機品牌之間的差異不大,所以不用太多關注,最容易出現問題的是android2.3系統,這個要特別關注下:

    A、大屏(如720*1280,重點關注頁面背景是否完全撐開頁面,刷新是否有抖動)、小屏手機(如320*480,重點關注下彈框樣式和文案折行)

    B、android2.3、android4.X隨機找一個即可。

    C、ios5、ios6、ios7。

     

    5、體驗相關

    5.1 資源相關

    A、頁面中有圖片的話,淘寶那邊建議圖片一般不大於50kb,本着一個原則,盡量縮小圖片。

    B、資源是否壓縮、是否通過CDN加載。

    C、如何保證二次發布后有效更新。

    5.2 流量

    A、對於一些不會變化的圖片,如游戲動畫效果相關圖片,不需要每次都請求的東西,做本地緩存。

    B、數據較多時是否做了分頁加載。

    5.3 頁面展現時間

    A、關注頁面首屏加載時間。

    5.4 頁面提示

    A、弱網絡下,數據加載較慢,是否有對應的loading提示。

    B、接口獲取異常時,提示是否友好。

    C、刷新頁面或者加載新內容時頁面是否有抖動。

    5.5 手機操作相關

    A、鎖屏之后展示頁面。

    B、回退到后台之后,重新呼出在前台展示。




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM