KonifarPod

rspecとcapybaraでスクリーンショットを保存する

   

Pocket

rspecとcapybaraを使って画面のスクリーンショットを保存してみました。これでレイアウト崩れや多言語対応漏れなどを簡単にチェックできるようになるはず。

capybaraとrspecについては、こちらに詳しくまとまっていますので、今回はスクリーンショットを取るための設定、それまでに出たエラーと対処方法を記載しておこうと思います。(rspecはすでに導入されている前提です)

 

1.gemの追加

Gemfile に以下を追加して bundle install します。

gem 'capybara'
gem 'capybara-webkit'
gem 'selenium-webdriver'

 

2.spec_helper に設定を追加

require 'capybara/rspec'
...
RSpec.configure do |config|
  ...
  ActionController::Base.asset_host = "http://xxxx.com"
  Capybara.default_driver = :selenium
  config.include Capybara::DSL
end

 

3.specファイルを作成

spec/features(またはspec/requests)というディレクトリを作成し、中にspecファイルを作ります。

[users_index_spec.rb]

# coding: utf-8
require 'spec_helper'
describe “users index" do
  specify ’screenshot' do
    visit “/users"
    page.save_screenshot 'screenshot.png'
  end
end

 

4.specの実行

rspec spec/features/users_index_spec.rb

で実行すると、ブラウザが立ち上がってスクショが取られ、ブロジェクトルートに screenshot.png という名前で保存されます。このサンプルのままだとCSSやJSはちゃんと適用されないかもしれませんが、スクショは取れます。

 

補足:ハマったエラーと対処方法

(1)capybara-webkit が bundle install できない

qt というライブラリが必要みたいです。bundle install で capybara-webkit がインストールできない時の対処法を参考に対処してみてください。

 

(2)undefined method `visit’ が出てこける

$ bundle exec rspec spec/features/users_index_spec.rb
Failures:
  1) users index
  Failure/Error: visit “/users"
  NoMethodError:
    undefined method `visit' for #<RSpec::Core::ExampleGroup::Nested_1:0x007f8e64726470>
    # ./spec/features/users_index_spec.rb:6:in `block (2 levels) in <top (required)>'

rpec_helper に config.include Capybara::DSL が記述してあるかを確認してみてください。

 

(3)Capybara::NotSupportedByDriverError が出てこける

1) users index
  Failure/Error: page.save_screenshot 'screenshot.png'
  Capybara::NotSupportedByDriverError:
  Capybara::Driver::Base#save_screenshot
  # ./spec/features/users_index_spec.rb:7:in `block (2 levels) in <top (required)>'

spec_helper.rb に Capybara.default_driver = :selenium の記述を追加してみてください。

 

(4)Capybara’s selenium driver is unable to load `selenium-webdriver` が出てこける

Failures:
  1) users index
  Failure/Error: visit “/users"
  LoadError:
    Capybara's selenium driver is unable to load `selenium-webdriver`, please install the gem and add `gem 'selenium-webdriver'` to your Gemfile if you are using bundler.
    # ./spec/features/users_index_spec.rb:6:in `block (2 levels) in <top (required)>'

エラーログに出ている通り selenium-webdriver がないので、Gemfileに gem ‘selenium-webdriver’ を追加してbundle install してみてください。

 

(5)No route matches [GET] “/assets/xxxx.css” が出てスクリーンショットが取れない

Failures:
  1) users index
  Failure/Error: Unable to find matching line from backtrace
  ActionController::RoutingError:
    No route matches [GET] "/assets/xxxx.css"

asset_hostを設定されてません。spec_helper.rbに、ActionController::Base.asset_host = “http://xxxx.com” のように記述してみてください。

 

(6)変更した設定が反映されていない気がする

guardを使っている場合、bundle install し直したら guard start し直す必要があります。意外とはまりやすいので注意が必要です。

 

 

なんかまとめてみたら結構エラー出て対処してたみたいですね。。。これから導入する人のお役に立てれば嬉しい限りであります。

Pocket

 - Develop , ,