Seleniumでスマホビューをテストする

はじめに

• SeleniumWebdriverでスマホビューのテストをする方法の一つとしてUserAgentを偽装する手がある
• もちろん実機を使うのも１つの手であるが

動かしてみた

• 以下のどちらの方法でもブラウザが立ち上がり自動操縦できることを確認した

webdriver-user-agentを使って書く

• githubに設定できるagentなどは詳しく載っているのでこちらを参照
• gem install selenium-webdriver webdriver-user-agent をしておく

test.rb

require 'rspec'
require 'selenium-webdriver'
require 'webdriver-user-agent'

driver = Webdriver::UserAgent.driver(:browser     => :firefox,
                                     :agent       => :iphone,
                                     :orientation => :landscape)
driver.get 'http://yahoo.co.jp' # スマホビューのYahoo!のサイトが表示される
driver.title.should == 'Yahoo! JAPAN' # ページタイトル確認
sleep 1
driver.quit  # ブラウザ終了

Capybaraを使って書く

• ブラウザの操作はCapybaraでおなじみのコマンドなので設定部分だけを
• UserAgentについてはこちらを参照
• support以下のファイルなどに記述しておく

Capybara.register_driver :ios do |app|
  profile = Selenium::WebDriver::Firefox::Profile.new
  ua = 'Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25'
  profile["general.useragent.override"] = ua
  opts = { browser: :firefox, profile: profile }
  Capybara::Selenium::Driver.new app, opts
end

---

Firefoxでスマホビューを確認したい場合

• アドレスバーにabout:configと打つ
• general.useragent.overrideに'Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25を設定すればよい

～ただの宣伝～

• 全国のSeleniumer必読
• Selenium, SauceLabs, Travis, Jenkinsに関するノウハウ書いているのでよかったら参考にしてみてください