WEBサービス創造記

WEBサービスを作ったり保守したりしてる人のメモブログです。

Capybara::Poltergeist でリモートデバッグ

      2015/12/19

Capybara::Poltergeistのデバッグ機能について

RSpecでもサーバサイドのテストではpry-byebugのようなおなじみのデバッガは使えるが、Capybara::Poltergeistをドライバーとして利用している(js: trueな)クライアントサイドのテストでは使えない。

このような場合はPoltergeistが提供しているリモートデバッグ機能を使用することができる。

teampoltergeist/poltergeist Remote debugging (experimental)

page.driver.debug

デバッガの設定

リモートデバッグ機能を利用するには下記のように設定が必要。

Capybara.register_driver :poltergeist do |app|
  Capybara::Poltergeist::Driver.new(app, inspector: true)
end
Capybara.javascript_driver = :poltergeist

スペックで使う

設定がおわったら任意の場所にpage.driver.debugを仕込んで使うだけ。

describe "GET /search" do
  it 'キーワードを入力すると候補が表示されること'
    visit search_path
    page.driver.debug
    #...
  end
end

これでpage.driver.debug実行時にWebKitのWebInspectorが立ち上がる。 あとはそこでDOMを確認するならコンソールでJavaScriptを実行してみるなりデバッグする。

WebInspectorがうまく起動しない場合

自分の環境ではWebInspectorがうまく起動しなかった(デフォルトブラウザとして利用しているFirefoxが起動した)。

起動するブラウザの選定がうまくいってなくてWebKit(Google Chrome)系のブラウザを選べていないのだろうとは思う。 使っているOSにはGoogle Chromeも入れてあるのでそっちを見るようにしてほしいが、内部的にはどのようなパスで起動するブラウザを選んでいるんだろうか。

みたところ、当該箇所のソースは以下のようになっている。

BROWSERS = %w(chromium chromium-browser google-chrome open)

https://github.com/teampoltergeist/poltergeist/blob/master/lib/capybara/poltergeist/inspector.rb#L3

つまり僕の環境では chromium, chromium-browser, google-chrome, という順でコマンド(バイナリ)を検索していって、どれも該当しなかったから一番最後のopenコマンドが選ばれて、これでデフォルトブラウザにしているFirefoxが実行されたとわかった。

解決策

さっき設定したinspector:オプションに文字列を渡すことで実行するコマンドを指定できる。

Capybara.register_driver :poltergeist do |app|
  Capybara::Poltergeist::Driver.new(app, inspector: 'google-chrome-stable')
end

ただし他の開発メンバーもいるリポジトリでこういう書き方はまずいのでこれは却下。

変数に置き換えるなどしたほうがいいだろうけど、時間なかったので手っ取り早くパスが通ってるところに"google-chrome"っていう名前の下記スクリプトを作って実行権限与えといた。

#!/bin/bash
open -a '/opt/homebrew-cask/Caskroom/google-chrome/latest/Google Chrome.app' $@ 

これで一時的に回避できる。 正式な対処法は後々考える。

参考

 - Ruby , , , , , , , , , ,