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设计图，对比各个手机上展现的效果便可