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