1. 程式人生 > >H5頁面測試點總結

H5頁面測試點總結

流量 模型 排序 url 增刪改 訪問 適配 web 長按

如何判斷是否是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.3、android4.X隨機找一個即可。

C、ios5、ios6、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*****關於隱私內容******

是否加密顯示?

H5頁面測試點總結