如何搭建一個類似於 BrowserStack 的跨瀏覽器測試平台？

01-06

是否有類似於 BrowserStack 的開源實現呢？

BrowserStack提供的service有三個部分：各個平台的Browsers瀏覽（Live）、自動化測試、頁面截圖（包括Responsive）。

關於第一個部分，我可能給不了什麼建議。但是如果你想搭建自動化測試平台，我這到是有些便利的方式。

先說說Browserstack自動化的工作方式，其實它背後就是使用了Selenium Webdriver的Grid配置，是Hub和Nodes的組合。具體細節可以看Selenium-Grid 和 Grid2 -
selenium -

Browser automation framework的介紹。在這，我就以一個hub，多個nodes作為搭建包括IE、Firefox、Chrome、iOS Safari、PhantomJS瀏覽器的測試環境來模擬Browserstack。

假設我們有三個環境（環境配置可以自己決定）

Linux 系統，IP是10.171.10.1，在上面運行一個hub
Win7 系統，運行了IE9，Chrome，Firefox
Mac 系統，運行iOS Simulator和PhantomJS

先準備各個瀏覽器的Webdriver和Selenium Server

IE 需要準備Windows電腦或者虛擬機，下載驅動 InternetExplorerDriver
Chrome 下載驅動 ChromeDriver
PhantomJS 直接安裝 phantomjs
iOS Safari 需要Mac系統，安裝Xcode和iOS Simulator，並下載 IPhoneDriver。按照說明把驅動編譯好可以在Simulator中運行（所以你會發現Browserstack裡面的iOS設備查看是在Simulator里的）
Firefox 不需要，默認支持
Selenium Server，下載最新standalone版本 Downloads -
selenium -

Browser automation framework

針對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建立在http://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 Filesfirefox,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 MaxInstances 和 Grid2 - 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變為http://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還不能輕易訪問到你的開發環境，集成環境，快速搭建自己的測試環境確實是必要的。

國內就有免費好用的啊，阿里家的和騰訊的都有，不過名氣不大，花了我不少時間搜索

登錄--優測網，讓測試更簡單

FTS-前端測試服務