CapybaraでJavascriptエラーを検知する

capybaraとcapybara-webkitを使ってページのjavascriptエラーを検知できるようにしてみました。当然のように色々ハマったので、対処法とともに記載しておこうと思います。

導入部分に関してはrspecとcapybaraでスクリーンショットを保存するを参考に。特に、capybara-webkitは必須なので忘れずにインストールしておいてください。

 

１．spec_helper.rbに設定を追加

require 'capybara/rspec'
require 'capybara/webkit/matchers'
...
RSpec.configure do |config|
  ...
  Capybara.javascript_driver = :webkit
  Capybara.default_driver = :selenium
  config.include Capybara::DSL
  config.include(Capybara::Webkit::RspecMatchers, :type => :feature)
end

 

２．specファイルの作成

[spec/features/xxxxx_spec.rb]

# coding: utf-8
require 'spec_helper'
# javascriptも考慮したテストを書きたい時は:js => trueを書いておく
describe “root", :js => true do
  # ルートページに移動
  before{ visit root_path }
  specify 'js error' do
    # エラーがないかチェック
    expect(page).not_to have_errors
  end
end

 

３．テストの実行

rspec spec/features/xxxxx_spec.rb で実行します。エラーがなければsuccessするはず。

 

[ハマったポイント]

(1) undefined method `has_errors?’ が出てコケる

Failures:
1) root js error
Failure/Error: expect(page).not_to have_errors
NoMethodError:
  undefined method `has_errors?' for #<Capybara::Session>
  # ./spec/features/xxxxx_spec.rb:9:in `block (2 levels) in <top (required)>'

capybara-webkitのmatcherが認識されていないようです。spec_helper.rbに以下の設定を追加してみてください。

require 'capybara/webkit/matchers'
...
RSpec.configure do |config|
  ...
  config.include(Capybara::Webkit::RspecMatchers, :type => :feature)
end

 

(2) undefined method `error_messages’ for ~ が出てコケる

Failures:
1) root js error
Failure/Error: expect(page).not_to have_errors
NoMethodError:
  undefined method `error_messages' for #<Capybara::Selenium::Driver:0x007fbae3b47b20>
  # ./spec/features/xxxxx_spec.9:in `block (2 levels) in <top (required)>'

selenium driverはerror_messagesなんてメソッド持ってないよと言われてます。

spec_helperに以下の設定を追加して、javascriptのdriverにwebkitをセットしましょう。

RSpec.configure do |config|
…
Capybara.javascript_driver = :webkit
…
end

 

(3) x11をインストールしろと言われてコケる

下記のようなダイアログが表示された時は、素直に従いましょう。

javascriptのdriverにwebkitを使う場合、x11というのが必要みたいです。続けるを押すとAppleのページに飛んで、XQuartzからインストールしろと言われるのでインストールします。結構時間かかりますが、気長に待ちましょう。

 

 

以上です。

rspecとcapybaraでスクリーンショットを保存すると組み合わせれば、全ページの表示確認テストは自動化できそうです。是非試してみてはいかがでしょうか。

 - Develop capybara, javascript, rspec