Help us understand the problem. What is going on with this article?

Browserstack Screenshot API使い方

More than 3 years have passed since last update.

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にあげました。

Screen Shot 2015-12-24 at 1.29.37 AM.png

https://github.com/dtaniwaki/browserstack-screenshot-task

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away