BrowserStack是一款提供网站浏览器兼容性测试的在线云端测试工具,从而开发测试人员不必再准备很多虚拟机或者手机模拟器。
其包含的功能有:Live,Automate,App Live,App Automate,Enterprise,Screenshots,Responsive。
Live
Live提供了包含Windows操作系统,Mac操作系统,iOS,Android以及Windows Phone在内的100多个浏览器。

当打开任意浏览器,会悬浮出现一个工具栏。

1:Switch - 切换浏览器
2:Resolution - 切换分辨率
3:Capture a bug - 对发现的问题截图
4:Settings - 对session进行设置以及对Local testing的设置
5:Issue Tracker - 可以简单追踪bug的状态(Open/Closed)
6:Help - Support/Contact
7:Features - 列出所包含的功能
8:Stop - 关闭Session
对于Mobile,多了如下图中的三个工具。

1:DevTools - 相当于桌面浏览器中的开发者工具(一般如果我们想通过开发者工具来定位问题,需要使用数据线连接手机和电脑,Android使用chrome://inspections,iOS使用safari工具栏上的Develop。但是我们经常会遇到一个问题,在我们正在定位的问题的时候,连接断了。所以这里的DevTools很实用)
2:Device info - 显示当前使用的设备信息
3:Switch Orientation - 切换屏幕方向
需要注意的是,只有Android上的Chrome和iOS上的Safari有DevTools。
Screenshots
对某一个页面同时在多个浏览器和Mobile上生成图片,并且可以对分辨率、图片质量、延迟时间进行设置。


生成后,可以直接下载其.zip文件。
Responsive
基于真实的屏幕大小直接生成图片。

App Live
上传想要测试App的APK或IPA文件,选择相应的Mobile设备后,就可以开始对App进行测试了。

Automate
Automate功能支持很多测试框架。

怎么执行测试用例?(下边只是例子)
1. 在单个浏览器上执行测试。
$./node_modules/.bin/nightwatch -c conf/single.conf.js
在single.conf.js中替换为你的用户名和key,同时设置想要测试的浏览器信息:

2. 同时在多个浏览器上执行测试。
$./node_modules/.bin/nightwatch -c conf/parallel.conf.js -e chrome,firefox,safari,ie,device
在parallel.conf.js中的浏览器设置信息:

执行测试时,Dashboard上显示如下:

在执行过程中,BrowserStack会自动记录:
Text Logs
Visual Logs(自动为每个操作截图,大大节省了你再去手动复现步骤截取相应图片的时间)
Exceptions
Console Logs
Network Logs
同时可以自动生成Video来记录整个测试过程,测试结束后,我们可以通过Video来回看测试过程中在哪儿出现了问题。

BrowserStack的Automate功能最多只能同时执行5个测试,如果大于5个,排队。
App Automate
App Automate是BrowserStack的一个新功能,是对App进行自动化测试。
支持的框架如下:

如何使用,与上述的Automate功能相似。
Enterprise
Enterprise功能没有使用过,应该是针对企业级用户的。看其介绍,可以在后期做一些数据分析的工作。
BrowserStack也不是没有缺点,比如从执行速度上来看,确实不如真机,并且会受Network traffic的影响,等等。
大家可以根据实际情况来选择什么时候使用BrowserStack。
网友评论