测试新人经手过一些涉及浏览器兼容的项目,其中可复用的经验和实用工具记录如下:
一、PC 端浏览器兼容性测试工具 Browser Sandbox
(现需付费才可使用)
你的电脑上有 IE9/10/11/Chrome、FireFox、Safari、Opera 吗?你还在为找不到对应版本的浏览器来测试或者调试代码而苦恼吗?
Browser Sandbox 你值得拥有!
- 它是个 Chrome 插件
- 基于虚拟机技术,通过在浏览器下安装插件的方式来运行不同浏览器模块,可同时运行 IE、Chrome、FireFox、Safari、Opera 的多个版本
- 使用方法:
进入官网,点击任何一个 RUN 按钮,进行账号注册,登录以后就可以下载安装,安装之后,alt+window 打开;想用什么浏览器就点 run,选择下载到桌面;下载完成后点击就可以运行对应的浏览器。使用中亦可进入个人设置主页查看已下载的浏览器版本类型,进入多浏览器选择选择需要测试的浏览器类型和版本。
推荐理由:
- 解决以下困境:原本一台计算机的本地安装支持的浏览器种类有限而且通常只能安装一个版本的产品,有局限性;如果用一台专门的服务器,通过配置本机没有的浏览器、远程来解决该局限性,在不测试时会造成资源闲置、浪费;如果通过 vmware 虚拟机配置多浏览器环境,测试时经常面临卡顿局面。
- 可以测试指定的多种浏览器,而不用实际安装它,只是装个插件就可以了,方便、快捷、不卡。
小故事:
开发 A:“你的电脑上有 IE9 吗?”
测试 B:“推荐你个浏览器兼容性测试工具 Browser Sandbox”
开发 A:“这种工具不靠谱吧,还是你远程借我解个 bug 吧”
测试 B(用 Browser Sandbox 打开 “IE9”):“嗯 你远程吧”
开发 A 通过远程 愉快地使用 “IE9” 调试程序解 bug
这个故事告诉我们 皮这一下很开心 不是啦 其实是想说 试一下吧 真的挺好用的
运行截图:
二、线上响应式设计网站效果验证工具网站
安利指数 ★★☆☆☆
三、移动端浏览器兼容性测试
对于移动端的浏览器项目,我们测试时需要考虑哪些,网页需要适配哪些东西?
测试点总结如下:
1、分辨率、屏幕大小:
- 需和设计师、开发讨论需要兼容的分辨率和屏幕大小范围;
- 需确认 iphone4、iPhone X 这些比较特殊的机型是否需要兼容;
- 可以参考用户统计数据来确认兼容范围,比如友盟数据中的 top10 机型、主流分辨率;
ps:
安卓常见的分辨率:
2560 x 1440、1920 x 1080、1280 x 720、(新增 2960x1440、2040x1080)
ios 常见的机型对应的分辨率:
4 4s 960*640、
5 5c 5s se 1136*640、
6 6s、
7 8 1334*750、
6+ 6s+ 7+ 8+ 1920*1080、
新增 iPhone X 2436×1125
更详细的机型分辨率请查看——>手机屏幕尺寸对应表
2、浏览器类型:
(1)手机自带的系统浏览器:oppo、vivo、华为、小米、safri
(2)主流浏览器应用:google、QQ、UC、火狐、猎豹、360
3、其他:
(1)从微信手机端、电脑端打开
(2)iPad 等其他移动设备是否需要兼容
关于浏览器兼容性测试,您有什么亲测有效的测试方法和工具吗?新人求赐教