H5頁面測試實戰總結

如何判斷是不是H5頁面：

1. 基本上只要對那個view長按，而後看是否是有反應，好比手機震動（Android）、或者出現文字選擇粘貼（Android/iOS），那麼就是WebView！
2. 橫屏豎屏相互切換，能自適應，而且佈局不會亂掉；
3. H5的頁面在PC端也是能訪問的，chrome對H5支持最好，功能的測試能夠在PC端chrome下先測試，也能夠在手機上直接測試，這個看我的習慣。（ie系列包括ie8,及如下都支持的很差，這個能夠與PD確認H5頁面在這些PC瀏覽器上不支持）

 

1.UI測試

①查看全部頁面展現問題

　　-文字字體、大小、顏色是否一致，如圖1.1

　　　　圖1.1

 

　　-是否添加標點符號，如圖1.2

　　圖1.2

 

　　-圖片展現是否展現正常，如圖裂了、沒法展現等

 

　　-長文字展現是否換行展現，如圖1.3

　　圖1.3

 

　　-一些控件展現是否重疊展現，如圖1.4，不容許有重疊的

　　　　圖1.4

 

　　-一些控件輸入是否進行內容限制（字符限制：特殊字符、0、特殊表情符號），如輸入後直接變爲正確的，如圖1.5（應輸入完畢後直接變成正確的，捨棄過濾以前的錯誤內容），或有提示框彈出，如圖1.6,1.7

　　圖1.5

　　圖1.6

　　圖1.7

 

　　-內外頁展現內容一致，如圖1.8，或者是展現數字內外不一致

　　圖1.8

 

②業務邏輯測試

2.1登陸

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

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

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

ps：本次測試過程當中就發現，第一次點擊連接，能夠拉起登陸，第二次卻不能。

C、清空cookies後，是否正常退出，返回登陸頁面

D、兩個設備，一個忘記密碼後，查看另外一設備是否可操做

 

2.2刷新

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

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

　　******內容未被清空，再此基礎上返回也不會出現，以前頁面內容丟失的問題*****

C、進行相應邏輯操做後，頁面應正常自動刷新，內容變爲最新的（扔在本頁的內容），且內容應該與外面內容一致

 

 

2.3返回

A、點擊返回與back鍵，回退頁面是不是指望頁面 （經過H5網頁（非手機的返回功能）的返回功能能夠返回，不會出現沒法返回的狀況。）

B、進行其餘操做後，頁面會統一返回首頁，或統一返回一個頁面

C、返回以後，是否須要定位到以前的位置，仍是返回到頂部

 

2.4翻頁

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

A、數據分頁加載時，注意後續頁面請求數據的正確。（有沒有重複加載的，或者到分界線時提示沒有數據，可是後有數據的狀況）

ps：這個須要注意在快速操做場景中，請求頁數是否是依次遞增，快速操做（如第一頁還沒有loading出來的時候仍然繼續上拉操做）時是否發出去對應的請求了。

　　重複加載內容

下方還有數據

 

2.5搜索

A，搜索後內容是否一致，內容的排序是怎麼排序的

B，搜索後點擊內容後，點擊返回是否返回到以前頁面

C，搜索後其餘操做後，頁面是返回哪一個頁面？（統一首頁？以前頁面【內容是否存在】？）

 

2.6排序

A、不一樣排序是否正常排序

B、插入後，內容是否正常排序

C、搜索後，內容是否按正常排序

 

2.7業務邏輯

A、業務邏輯數據流變化，從一個頁面影響到另外一個頁面

B、業務的業務流變化，狀態的變化，後臺系統狀態變化後，查看系統狀態是否變化，同一個內容的多條信息是否一塊兒變化

C、判斷邏輯的前後順序，例如提交先判斷時間？仍是內容是否爲空？這個邏輯***

D、不填寫內容後，按鈕是可點擊狀態仍是置灰狀態？***

 

3.基本功能

3.1增刪改查

①對不一樣內容增長，是否有成功添加提示框/是否成功添加到頁面/數據是否變化/其餘頁面是否有刷新

　　-增長不一樣內容

　　-增長相同內容

　　-刪除後再添加相同內容

　　-增長空內容

　　-增長特殊字符內容

　　-增長超限長度內容

　　-增長特殊表情符號內容

　　-增長負數內容

　　-增長粘貼複製內容

　　-增長內容後，根據調整框跳轉內容

 

 

②刪除，是否有刪除提示框/是否成功刪除提示框/刪除後頁面內容是否刪除/數據是否變化/其餘頁面是否有刪除

　　-刪除內容後

　　-刪除後添加再刪除，是否可刪除

 

③改，是否有成功修改提示框/是否成功修改到頁面（是否從新加載）/數據是否變化/其餘頁面是否有修改

　　-更改不一樣內容

　　-更改相同內容

　　-更改後再次更改

 

④查，查詢後內容是否一致/查詢後操做後，返回什麼頁面/查詢後，點擊返回，是什麼頁面

　　-正常查詢

　　-操做後查詢頁面

　　-查詢後，返回

 

4.接口內容

4.1mtop接口返回處理

發現這個出現問題的地方有不少，可是隻要有意識的去處理，就很容易避免，主要是如下幾種狀況：

A、請求成功，且返回有數據，測試mtop接口返回數據的各類場景。

B、請求成功，但data內容爲空。

C、請求接口異常，出現ERR_SID_INVALID::SESSION過時，拉起登陸。

D、請求接口發生除C中提到的異常以外的異常，一般可歸結爲一類進行處理。

 

4.2數據的請求與返回

A、提交了數據，數據是否正確提交到後臺。

B、發送了請求，是否正確返回要求的數據。

關注頁面請求，是否會有多餘的請求，或者請求後有多餘的數據返回，儘可能精簡，不然會浪費流量。

 

5.適配性（兼容性問題）

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

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

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

C、ios五、ios六、ios7。

 

①圖片適配測試，根據不一樣屏幕和分辨率作適配，以及適配後的清晰度，高端機取雙倍尺寸的圖

②對於相似公司名稱、offer名稱長度的問題，在手機上最好能根據屏幕大小自適應而不是截斷，由於手機上是不會有tips能夠看的。截斷致使大屏幕下也只能顯示幾個字，交互很差

③手機測試要特別關注交互是否友好，與PC機的事件模型不同，可能會致使一些體驗的問題，好比：彈出層的點擊，是否會穿透，影響到彈出層下面的頁面。

④對於一些浮層作的頁面，例如地圖、產品分類等浮層，注意拖動後是否能夠看到它下面的頁面，拖動後邊緣是否有留白

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

注意：手機鍵盤切出後，焦點的定位是否正確、內容是否該改隱藏的隱藏、鍵盤是否切換到數字/字母

 

6.用戶的體驗

6.1資源相關

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

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

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

 

6.2 流量

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

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

 

6.3 頁面展示時間

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

 

6.4 頁面提示

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

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

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

 

6.5 手機操做相關

A、鎖屏以後展現頁面。

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

 

6.6 弱網絡體驗

 

7.安全相關

7.1 明確投放渠道都有哪些

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

 

7.2 評估是否須要接入集團安全

如mtee黑白名單等。

 

7.3 是否須要接入支付寶實名認證

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

 

7.4 是否接入windvane

全部請求經過native發出。

 

7.5*****關於隱私內容******

是否加密顯示？