H5測試

H5是什麼？

H5的全稱是HTML5，其實就是：移動端WEB頁面。

H5與原生 APP的差別：

• APP是使用原生系統核心的，相當于直接在系統上操作，是我們傳統意義上的軟體，更加穩定。
• H5的APP先得調用系統的浏覽器内容，相當于在網頁中進行操作，較原生APP穩定性，順暢性稍差，似乎還沒有百萬級使用者量的H5 APP。
• H5最大的優點是可以跨平台，開發容易。原生APP則需要在android和ios上各開發一套。

簡單的說：H5是基于web，native APP基于系統。

H5測試應該從哪些方面考慮？

除基本的功能測試之外，H5頁面的測試，需要關注一下幾點：

1、業務邏輯相關

1.1 登入

　　A、若用戶端已登入，那麼進入H5後仍然是登入狀态。

　　B、若用戶端未登入，進入H5，點選對應按鈕或連結，如果需要登入，須拉起native登入。若取消登入，是否可再次拉起登入，或者停留在的頁面是否有對應的登入提示。

1.2 翻頁

　　A、資料分頁加載時，注意後續頁面請求資料的正确。（這個需要注意在快速操作場景中，請求頁數是不是依次遞增，快速操作）

1.3 重新整理與傳回

　　A、下拉重新整理是否依然處于目前頁面。

　　B、使用者主動點選重新整理按鈕是否仍然處于目前頁面。

　　C、點選傳回與back鍵，回退頁面是否是期望頁面。

1.4 資料的請求與傳回

　　A、送出了資料，資料是否正确送出到背景。

　　B、發送了請求，是否正确傳回要求的資料。

2.H5适配相關

　　A、大屏（如720*1280，重點關注頁面背景是否完全撐開頁面，重新整理是否有抖動）、小屏（320*480，重點關注下拉框，彈窗和文案折行）

　　B、android 2.3，android4.x 随機找一個即可。

　　C、ios5，ios6，ios7

　　D、自帶浏覽器，微信浏覽器

3.安全相關

　　3.1 明确投放管道都有哪些

　　3.2 是否涉及到金錢相關，實名，防刷等

4.體驗相關

4.1 資源相關

　　A、頁面中的圖檔，本着一個原則，盡量縮小圖檔。淘寶那邊建議圖檔一般不大于50kb。

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

　　C、如何保證二次釋出後有效更新

4.2 流量

　　A、對于一些不會變化的圖檔，如遊戲動畫效果相關圖檔，不需要每次都請求的東西，做本地緩存

　　B、資料較多時是否做了分頁加載。

4.3 頁面展現時間

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

4.4 頁面提示

　　A、弱網下，資料加載較慢，是否有對應的loading提示。

　　B、接口擷取異常時，提示是否友好

　　C、重新整理頁面或加載新内容時頁面是否有抖動

4.5 手機操作相關

　　A、鎖屏之後展示頁面

　　B、回退到背景後，重新呼出在前台展示。

　　C、手指快速滑動是否順暢，手指點選時焦點是否定位準确。

5.埋點資料檢查

H5測試的工具推薦

• 手機真機
• 谷歌浏覽器-手機模式