PIYO - Tech & Life -

RailsのFeatureテスト環境をHeadless Chromeに変更した

Rails RSpec Test

Poltergeist detected another element ...に対応するために RailsのFeatureテスト環境をHeadless Chromeに置き換えました。

Capybara + PhantomJSのフィーチャテストでドロップダウンメニューがクリックできないので色々調べてみると、ドロップダウンメニューが画面外に描画されちえるらしいことが判明。

うろ覚えだけど、ウィンドウサイズを1920x1080とかにして実行してたら、↓のようなクリックできなかったよ、といエラーが出てました。

Firing a click at co-ordinates [21xx, 40] failed. Poltergeist detected another element with CSS selector ''

x座標が画面幅越えてるっていうね。このレイアウト崩れのようなものはPhantomJSに起因するらしいので重い腰をあげてHeadless Chromeに乗り換えました。

最初に参考にしたのはこちらのSpeeeさんの記事。

http://tech.speee.jp/entry/2017/06/15/135636

さらに細かい点で対応を調べたかったのでさらに詳しいGitLabの記事も見ながら進めました。

https://about.gitlab.com/2017/12/19/moving-to-headless-chrome/

変えてみてどうだったか

PhantomJSとHeadless ChromeではCapybaraのドライバーで提供される機能が違うのでそのままでは動かない箇所がある、というのは↑の記事でも書いてある通りです。特にGitLabさんはいろんな工夫をしててすごい。けど僕の場合はそこまですることもないなーということで、同等のテストをするような別の方法に置き換えて回避する作戦でいきました。

削除ボタンなんかで、「削除してもいいですか?」みたいなconfirmを出している箇所はテストコード側に対応が必要なので面倒でした。一度テストを流してみないと気づかないし。

ただ、レイアウトがおかしくてクリックできないみたいなことはなくなりました。変なことにはまらなくてよくなったのは快適です!!