Ruby
Rails

CentOS上にてRSpec+Turnip+Capybara+Selenium Webdriver+Headlessでスクリーンショットを撮るまで

More than 1 year has passed since last update.

CUIのみのLinuxでseleniumを使おうとした所ちょっと手順を踏む必要がありました。


インストールするもの


Xvfb

Xvfb 仮想フレームバッファ・サーバ - insomniaより


Xvfb はディスプレイのないサーバ機などで X Window System の画面入出力をシミュレートする X11 のサーバ・ソフトウェアである。 例えば,あるサイトのリンクにそのページ画面のサムネイル画像を掲げているのをよく目にするが,これをサーバで自動的にやろうとすると,JavaServlet などでサイトのページを取得し,ブラウザと同様にレンダリングし,画面イメージを生成するわけだ。 このとき Awt などの「ディスプレイ」の存在を仮定するライブラリを使うのが常である。 そこで,ディスプレイ・レスの UNIX サーバ機でもそれをエミュレートする,仮想フレームバッファなるインタフェースを提供するのが Xvfb である。


これによりSeleniumをヘッドレスに動かすことができます。

$ sudo yum install xorg-x11-server-Xvfb


ImageMagick

スクショを取るのに必要だそうです。

自分の場合別途インストールしてたのでよく覚えてないです()

# これだけで大丈夫なはず...

$ sudo yum install ImageMagick


Firefox

今回Firefoxでテストしたいのでyumで入れます。

$ sudo yum install firefox


日本語化

ブラウザの文字化けを防ぐため日本語化します

$ sudo yum groupinstall "Japanese Support"


各種gemたち


Gemfile

group :test do

gem 'rspec-rails'
gem 'capybara'
gem 'turnip'
gem 'selenium-webdriver'
gem 'headless'
# あと factory_girl_rails とか database_cleaner とか適宜どうぞ
end

headlessはrubyからXvfbの起動終了を行うためのgemです。

めっちゃ簡単なので入れておくといいと思います。


Xvfb準備

bash_profileなどに以下を追加します。


.bash_profile

export DISPLAY=:99


headlessがデフォルトでDISPLAY=:99を使用するのでそれに合わせて:99にします。

上記追加したらsource ~/.bash_profileなどで設定を反映。

動作テストをしてみます。

$ Xvfb :99 -screen 0 1024x768x24 &

$ firefox &

これで変なエラーが出なければok。

終了する際はkillall Xvfbなどで。


自分が嵌ったエラー

$ Xvfb :99 -screen 0 1024x768x24 &

...

The XKEYBOARD keymap compiler (xkbcomp) reports:
> Internal error: Could not resolve keysym XF86AudioMicMute
Errors from xkbcomp are not fatal to the X server

↑これが出ても特に問題ないみたいなので無視しても大丈夫...?

$ firefox &

Error cannot open display: :99

↑環境変数DISPLAYXvfb起動時に引数で渡したものと一致してるか・設定が反映されてるか確認して下さい。

また、もちろんXvfbが起動してないとfirefox使えません。


RSpec設定

spec_helper.rbなどの設定ファイルにて


spec_helper.rb

# (適当に必要なものrequireして下さい)

require 'selenium-webdriver'
require 'headless'
require 'capybara/rspec'
require 'turnip'
require 'turnip/capybara'

...

RSpec.configure do |config|

...

# selenium-webdriver
# 名前は任意。今回は selenium_firefox とします。
Capybara.register_driver :selenium_firefox do |app|
Capybara::Selenium::Driver.new(app, browser: :firefox)
end
Capybara.javascript_driver = :selenium_firefox
# 常時使用の場合は Capybara.default_driver = :selenium_firefox

# headless
config.before(:all) do
# デフォルトだとウインドウサイズが心もとないので大きくしときます。
@headless = Headless.new(dimensions: "1920x1080x24")
@headless.start
end

config.after(:all) do
@headless.destroy
end
end


Headless.newの引数はこちらをどうぞ。

listenするDISPLAY変えたりとかもできます。


スクショを撮る

準備完了なのでスクショとります。


screen_shot.feature

# encoding: utf-8

# language: ja

# Capybara.javascript_driver = :selenium_firefoxなら
# @javascriptタグが必要
@javascript
機能: スクリーンショットをとる
シナリオ: google先生のスクショを撮る
もし "http://google.com"にアクセスする
ならば スクリーンショットを撮る



screen_shot_steps.rb

step ':urlにアクセスする' do |url|

visit url
end

step 'スクリーンショットを撮る' do
# 引数には 適当なパス/ファイル名.png
page.save_screenshot("/vagrant/google.png")
end


で実行すると

150105_google_screen_shot.png

ちゃんとスクリーンショットが撮れました!