H5頁面移動端兼容性測試
一、背景
測試任務:H5頁面,但是涉及移動端常用溝通工具,常用瀏覽器訪問兼容性測試
二、分析
1、常用聊天工具:微信、QQ、釘釘
2、手機端常用瀏覽器:UC瀏覽器、QQ瀏覽器、360瀏覽器、百度瀏覽器、手機自帶瀏覽器
3、常用手機型號:華為、魅族、小米、Iphone
4、分辨率:
VGA(640×480像素),QVGA(240×320像素),HVGA(480×320像素),WVGA(854×480像素、800×480像素), QCIF(176×144像素、176×220像素、96×96像素、128×128像素)
綜上所分析,感覺重復工作量實在太大
三、思考
1、是否可以有軟件模擬各種手機機型;(否決,真機和模擬器有差別)
但是在查找解決方案的時候也發現了一個靜態頁面兼容性的在線網站
Sizzy 在線iOS、Android 平台瀏覽器兼容性測試
網站名稱:Sizzy
網站地址:https://sizzy.co/
網站功能:檢查網頁在手機瀏覽器上的兼容性
2、是否可以實現操作一次,同時驗證多種手機自帶瀏覽器效果
通過網上查詢資料,查找到一個多終端聯動的工作,可實現操作一端,其他終端聯動。
可解決以上問題,參考
https://blog.csdn.net/l_ynan/article/details/73176388
3、要對比H5頁面和設計圖,同時還要操作一個終端,感覺會比較麻煩,是否可以實現pc終端自動化
通過python+selenium實現了pc終端訪問頁面,頁面自動下滑實現pc自動化
所以、最終實現以下場景
1、啟動頁面代理
browser-sync start --proxy "http://localhost:6060/mobile-xb-school" "css/*.css"
2、pc端訪問該頁面
3、不同手機端瀏覽器訪問該頁面
4、pc端啟動自動化腳本(腳本啟動chrome瀏覽器,訪問頁面,實現頁面自動下滑,並且每次下滑后在該頁面停留8s)
5、pc端自動下滑時,各移動端也自動下滑
所以,驗證時只要打開UI設計圖,對比各個手機上展示的效果即可