如何搭建一个类似于 BrowserStack 的跨浏览器测试平台?

是否有类似于 BrowserStack 的开源实现呢?
关注者
200
被浏览
4608
BrowserStack提供的service有三个部分:各个平台的Browsers浏览(Live)、自动化测试、页面截图(包括Responsive)。

关于第一个部分,我可能给不了什么建议。但是如果你想搭建自动化测试平台,我这到是有些便利的方式。

先说说Browserstack自动化的工作方式,其实它背后就是使用了Selenium Webdriver的Grid配置,是Hub和Nodes的组合。具体细节可以看Selenium-GridGrid2 - selenium - Browser automation framework的介绍。在这,我就以一个hub,多个nodes作为搭建包括IE、Firefox、Chrome、iOS Safari、PhantomJS浏览器的测试环境来模拟Browserstack。

假设我们有三个环境(环境配置可以自己决定)
  1. Linux 系统,IP是10.171.10.1,在上面运行一个hub
  2. Win7 系统,运行了IE9,Chrome,Firefox
  3. Mac 系统,运行iOS Simulator和PhantomJS

先准备各个浏览器的Webdriver和Selenium Server
针对Selenium Server和IE、Chrome Driver的安装,我最近做了一个Webdriver Manager工具 winsonwq/wd-manager 可以快速帮你搭建。

搭建Hub

在Linux系统安装Selenium Server
// install wdm
$ npm install wdm -g

// install selenium server
$ wdm update --standalone

// start hub
$ wdm start -- -role hub

这样Hub建立在10.171.10.1:4444上,搭建起来十分快速。

建立IE/Chrome/Firefox的Node

切换到Win7系统,同样安装Selenium Server和Driver。
// install wdm
$ npm install wdm -g

// install selenium server and chrome/ie drivers
$ wdm update --standalone

// start node
$ wdm start -- \
    -role node \
    -hub http://10.171.10.1:4444/grid/register \
    -browser "browserName=firefox,firefox_binary=c:\Program Files\firefox,maxInstances=5" \
    -browser "browserName=internet explorer,version=9,maxInstances=5" \
    -browser "browserName=*googlechrome,maxInstances=5"

这样就把浏览器都注册到hub上了,并且设置了每个浏览器为5的并发量(maxInstances=5),每种浏览器都可以同时打开5个Instances同时运行测试,不过maxInstances和maxSession需要联合起来配置,具体怎么使用可以看Selenium Grid: MaxSessions vs MaxInstancesGrid2 - selenium - Browser automation framework 最后部分。

基于这种模式你可以建立多个node到hub上,各种组合自行扩增吧。

建立iOS Simulator/PhantomJS的Node

Browserstack吸引这么多人去使用的原因之一是对Mobile Devices的支持。其实这个也没什么难的,自己也可以进行搭建。打开Simulator,这里就把Webdriver运行在iPhone iOS7上。
— webdriver app
在Settings » iWebDriver 中配置hub的信息,注册此node在hub中。其实Android Browser的Node搭建和这个类似,更好的是Android的Simulator有Headless版本,命令行支持也很出色。

至于PhantomJS,它已经和driver集成了起来,一句命令就可以注册到Hub上。
$ phantomjs --webdriver=5555 --webdriver-selenium-grid-hub=http://10.171.10.1:4444

运行下试试

以下是一段来自Browserstack的测试代码,只是把hub变为10.171.10.1:4444/wd/hub,也没用browserstack提供的library。运行下就知道Hub和Node的配置是否正确。
// update browserstack-webdriver to selenium-webdriver
var webdriver = require('selenium-webdriver'); 

// Input capabilities
var capabilities = {
  'browserName' : 'firefox' /*'internet explorer', 'chrome', 'iPhone', 'phantomjs'*/
}

var driver = new webdriver.Builder().
  usingServer('http://10.171.10.1/wd/hub').
  withCapabilities(capabilities).
  build();

driver.get('http://www.google.com/ncr');
driver.findElement(webdriver.By.name('q')).sendKeys('BrowserStack');
driver.findElement(webdriver.By.name('btnG')).click();

driver.getTitle().then(function(title) {
  console.log(title);
});

driver.quit();

更多的capabilities配置,你可以在 Selenium WebDriver capabilities 找到,Browserstack Specific的参数暂时不可以使用。

有了这套配置,除了第一项Live服务可能需要你自己打开各个环境的浏览器代替之外,集群自动化测试环境有了,页面截图和Responsive可以通过Webdriver的截图API、Window API来代替。另外,Browserstack的收费策略是按照并发数不同来定价的,2个并发数的自动化测试subscription就需要99刀/月,真是贵的离谱。利用maxSession和maxInstances自行搭建瞬间可以秒杀之。

可以说这完全足够使用了,而且你想想,开发过程中,Browserstack还不能轻易访问到你的开发环境,集成环境,快速搭建自己的测试环境确实是必要的。