H5頁面移動端兼容性測試

H5頁面移動端兼容性測試

2018年12月17日 18:30:46 閱讀數：397

 

1、背景

測試任務：H5頁面，可是涉及移動端經常使用溝通工具，經常使用瀏覽器訪問兼容性測試

2、分析

一、經常使用聊天工具：微信、QQ、釘釘

二、手機端經常使用瀏覽器：UC瀏覽器、QQ瀏覽器、360瀏覽器、百度瀏覽器、手機自帶瀏覽器

三、經常使用手機型號：華爲、魅族、小米、Iphone

四、分辨率：

 VGA（640×480像素），QVGA（240×320像素），HVGA（480×320像素），WVGA（854×480像素、800×480像素）， QCIF（176×144像素、176×220像素、96×96像素、128×128像素）

綜上所分析，感受重複工做量實在太大

3、思考

一、是否能夠有軟件模擬各類手機機型；（否決，真機和模擬器有差異）

可是在查找解決方案的時候也發現了一個靜態頁面兼容性的在線網站

Sizzy 在線iOS、Android 平臺瀏覽器兼容性測試

網站名稱：Sizzy

網站地址：https://sizzy.co/

網站功能：檢查網頁在手機瀏覽器上的兼容性

二、是否能夠實現操做一次，同時驗證多種手機自帶瀏覽器效果

經過網上查詢資料，查找到一個多終端聯動的工做，可實現操做一端，其餘終端聯動。

可解決以上問題，參考

https://blog.csdn.net/l_ynan/article/details/73176388

三、要對比H5頁面和設計圖，同時還要操做一個終端，感受會比較麻煩，是否能夠實現pc終端自動化

經過python+selenium實現了pc終端訪問頁面，頁面自動下滑實現pc自動化

 

因此、最終實現如下場景

一、啓動頁面代理

browser-sync start --proxy "http://localhost:6060/mobile-xb-school" "css/*.css"

二、pc端訪問該頁面

三、不一樣手機端瀏覽器訪問該頁面

四、pc端啓動自動化腳本（腳本啓動chrome瀏覽器，訪問頁面，實現頁面自動下滑，而且每次下滑後在該頁面停留8s）

五、pc端自動下滑時，各移動端也自動下滑

因此，驗證時只要打開UI設計圖，對比各個手機上展現的效果便可