H5頁面識別及測試點

咱們平時說的H5測試就是HTML5

其實就是：移動端WEB頁面。

★   咱們以往的APP是使用原生系統內核的，至關於直接在系統上操做，是咱們傳統意義上的軟件，更加穩定

★   H5的APP先得調用系統的瀏覽器內核，至關因而在網頁中進行操做，較原生APP穩定性稍差，彷佛尚未百萬級用戶量的H5 APP

★   H5最大的優勢是能夠跨平臺，開發容易，APP的話須要用ANDROID的語言和IOS的語言各自寫，H5只要開發一套 

★   簡單的說：H5是基於web，native基於客戶端

 

1、如何判斷一個 APP頁面是不是H5頁面

一、無網絡
斷開網絡，顯示404或則錯誤頁面的是H5

二、頁面佈局
a.在手機設置、開發者選項中開啓顯示佈局邊界功能；
b.進入應用查看佈局邊界；
c.原生應用能夠看到各個控件的佈局邊界，H5只有整個頁面的一個邊界

（注：開發者工具是進入<關於手機>，找到<版本號>，有的手機這個版本號是在更多信息裏，連續雙擊<版本號>，會提示開啓開發者模式，再返回通用菜單，開啓開發者選項）

                        原生：                                                                                     H5：

                                                    

三、長按頁面
長按頁面，出現特殊標記、放大鏡，複製，粘貼等等，甚至手機震動（Android），則表示是H5

四、加載的方式
打開新頁面導航欄下面有一條加載的線的話，這個頁面就是H5頁面
微信裏面打開咱們的H5頁面常見的有個綠色的加載線條。

五、導航欄是否會有關閉的操做
APP頂部導航欄當中出現了關閉按鈕或者有關閉的圖標，那麼當前是H5頁面

 

 

 

六、網頁提供方

下拉頁面的時候顯示網址提供方的是H5頁面

 

 

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

1、業務邏輯相關  

除基本的功能測試以外，H5頁面的測試，須要關注如下幾點：

1.1 登錄

目前H5與native各個客戶端都作了互通，因此你們在測試的時候要注意兩點：

A、若客戶端已登陸，那麼進入H5後仍然是登陸狀態。

B、若客戶端未登陸，進入H5，點擊對應按鈕OR連接。

若是須要登陸，須拉起native登陸；

若取消登陸，是否可再次拉起登陸，或者停留在的頁面是否有對應的登陸提示。

1.2 翻頁

遇到翻頁加載的頁面，須要注意內容爲1頁或者多頁的狀況。

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

ps：這個須要注意在快速操做場景中，請求頁數是否是依次遞增，快速操做

（如第一頁還沒有loading出來的時候仍然繼續上拉操做）時是否發出去對應的請求了。

1.3 刷新與返回

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

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

C、點擊返回與back鍵，回退頁面是不是指望頁面

1.4 數據的請求與返回：

A：提交了數據，數據是否正確的整理到後臺管理系統：結婚請帖來參加婚禮的用戶，信息和號碼以及參與人數，是否正確的提交後臺。

B：發送了請求，是否正確返回你要求的數據：好比咱們常見的結婚請帖，是否有收到回執？

 

2、H5適配相關

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

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

B、android2.三、android4.X隨機找一個便可

C、ios五、ios六、ios7

D、瀏覽器上也要可以進行完美展現

 

3、安全相關

3.1 明確投放渠道都有哪些？

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

3.2 是否須要接入支付寶實名認證涉及到金錢相關。

如天貓積分，紅包等，爲了防刷，通常都須要判斷是否支付寶實名認證。

之前我在的公司，有一次爲了作推廣~發起了一個數錢的活動，每次都是一毛一毛的數，時間是15秒，出現以下bug：

1)利用腳本數錢，15秒數出了100多~~-最後出於推廣成本的考慮，就把時間限制爲5秒、

2）轉發一次就能夠獎勵多一次機會數錢，結果沒有作好限制，朋友的朋友推廣，仍是能夠獎勵次數。

 

4、體驗相關

4.1 資源相關

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

B、資源是否壓縮、是否經過CDN加載。---CDN是什麼？---就近地區訪問，服務速度會更快。

C、如何保證二次發佈後有效更新。

D、對於相似公司名稱、offer名稱長度的問題，在手機上最好能根據屏幕大小自適應而不是截斷，由於手機上是不會有tips能夠看的。

截斷致使大屏幕下也只能顯示幾個字，交互很差

4.2 流量

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

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

4.3 頁面展示時間

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

4.4 頁面提示

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

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

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

4.5 手機操做相關

A、鎖屏以後展現頁面。

B、回退到後臺以後，從新呼出在前臺展現。

C、手指滑動是否流暢，手指點擊時焦點是否認位正確，不一樣機型會不同。焦點地位後點擊是否靈敏。

4.6 弱網絡體驗

 

5、埋點數據檢查

與前端一塊兒確認埋點狀況。什麼是埋點？

接下來你可能要問，H5測試的工具是什麼？很簡單。

1：你手上的手機→直接掃描二維碼打開連接，進行測試

2：谷歌瀏覽器→調試成手機模式來進行測試

下載谷歌瀏覽器，點擊瀏覽器右上角「三」圖標，在下拉選項中選擇→「更多工具」→「開發者工具」，或者直接按F2；