Browserstack Screenshot API使い方

Browserstack Screenshot APIを使ってみたので、まとめておきます。

まずRuby Clientをインストールします。

gem install "browserstack-screenshot"

そして、以下の容量でscreenshotが取得できます。

# Screenhost APIの初期化
config = { username: Settings.browserstack.username, password: Settings.browserstack.password }
client = Screenshot::Client.new(config)

# Browser APIの結果はObject Arrayなので、`Windows_XP_chrome_35.0`のようなキーのマップに変換しておく
all_browsers = client.get_os_and_browsers.inject({}) do |data, browser|
  key = browser.slice(:device, :os, :os_version, :browser, :browser_version).select{ |k, v| v.to_s != "" }.map{ |k, v| v.to_s.gsub(/\s+/, "-").gsub(/[^a-zA-Z0-9.\-]/, "") }.join("_")
  data[key] = browser
  data
end

# 実際はここでファイルに保存等しておく

# browser名をキーに設定を構築する
browsers = (ENV["BROWSERSTACK_BROWSERS"] || "OS-X_Lion_firefox_37.0").split(",").map { |name| all_browsers[name] }
request = {
  url: "http://www.google.com/",
  win_res: ENV["BROWSERSTACK_WINDOWS_RESOLUTION"], #Options : "1024x768", "1280x1024"
  mac_res: ENV["BROWSERSTACK_MAC_RESOLUTION"], #Options : "1024x768", "1280x960", "1280x1024", "1600x1200", "1920x1080"
  quality: "compressed",
  wait_time: 10, 
  orientation: ENV["BROWSERSTACK_ORIENTATION"], #Options: "portrait", "landscape"
  browsers: browsers
}

# Screenshotの取得
request_id = @client.generate_screenshots(request)
while @client.screenshots_status(request_id) != "done"
  sleep 5
end
results = @client.screenshots(request_id)
results[:image_url]

これだけです。

実際の画像ファイルはブラウザスタック側にあるので、以下のようにindexファイルを作ってあげると見栄えが良いです。

Screenshotを取って来てS3にindexファイルをアップするサンプルRakeタスクをGithubにあげました。