目的

本文是為了幫助測試人員了解并實施在無線客戶端的Html5頁面的測試提供指南和參考

Html5頁面的要求標準

測試工具

• Wireshark
  經典工具，用在這里有點牛刀殺雞的感覺。如果需要測量3G的話, 使用tcpdump抓包然后用wireshark分析是必備技能.

• Charles 或 Fiddler
  通過設置主機作為代理的抓包方式, 抓HTTP協議分析比Wireshark簡易一些, 應該是很多測試人員的選擇.

• Chrome 和 Safari
  Chrome可以遠程調試Android上的Html5頁面, Safari可以遠程調試iOS上的.

測試方法

使用Charles和Fiddler的方法不累述了, 這兩個工具使用起來也比較方便. Wireshark的使用可以達到非常之專業的, 不過對于常用需求, 可以參考這篇博文.

• 功能
  大部分的Html5頁面在PC端也可以訪問的, 使用Chrome打開開發者工具, 可以看到一排標簽

  
  
  debug.png
  
  

  簡要說明如下：

• 手機樣式的小圖標是在Chrome模擬手機的尺寸和網絡速度， 點開以后如下圖所示：

  
  
  phone
  
  

  這樣可以在PC端查看不同機器上的畫面適配是否合理

• Network
  點開Network標簽可以查看連接數量， 加載時間， 以及流量使用的情況。比Charles和Fiddler要方便不少。 我們還可以結合畫面查看一下頁面是否根據屏幕大小使用了懶加載， 有沒有什么不合要求的請求。

  
  
  network

• Timeline
  如果發現了頁面的加載會卡頓， 可以查看Timeline圖表， 這里展示了Js的運行時間。 可以點擊錄制的小紅點開始錄制——操作——停止錄制來得到類似下圖的信息：

  
  
  timeline.png

• Profile
  如果懷疑CPU和內存的使用有異常， 可以錄制CPU使用情況， 或者抓取內存的分配情況。

• Audits
  頁面的分析， 有助于發現頁面上存在的問題。

  
  
  audit.png

• Console
  可以調試用的Console

• 流量/連接數量/頁面大小
  通過抓包工具, 可以方便的抓到這幾個指標. 需要特別關注如下2個方面:

• 初次加載和二次加載, 是否有流量/鏈接數量上的差異(比如資源重復拉去的情況), 以此判斷緩存策略是否合理.
• 頁面滑動的過程中流量和連接的情況如何, 頁面滑動的卡頓其實常常伴有不合理的加載策略.

• CPU/內存消耗
  CPU和內存消耗需要特定的工具輔助, Android上可以用DDMS, iOS則需要使用Instrument(前提是你要有源代碼).
  CPU和內存消耗同樣需要

1. 以3G中最快的Wcdma為基準， 其使用速率峰值一般會達到400KB/s左右， 400KB作為標準是期望在網絡十分好的情況下，頁面可以達到秒開。當然在實際使用中， 很難達到這個標準。 ?

2. 有的客戶端規定不允許跳轉到一些其他的域名, 這里需要檢查是否有違反的地方, 是否需要添加讓用戶知道的提示等等. ?