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さんの記事。
Speee エンジニア組織推進室の服部 (yhatt) です。 みなさん E2E テストされていますでしょうか。弊社の Ruby on Rails プロダクトにおいては、RSpec、Capybara、 Poltergeist を組み合わせ、 feature spec で E2E テストを行う構成が一般的でした。 そんな中、Chrome 59 に ヘッドレスモード (--headless) が搭載 されたことで、テストや CI 環境において、最新の Chrome 環境による E2E テストを実施できるようになりました。それに合わせて、PhantomJS のコアメンテナーがメンテナーを降りる こと…
さらに細かい点で対応を調べたかったのでさらに詳しいGitLabの記事も見ながら進めました。
A detailed explanation with examples of how GitLab made the switch to headless Chrome.
変えてみてどうだったか
PhantomJSとHeadless ChromeではCapybaraのドライバーで提供される機能が違うのでそのままでは動かない箇所がある、というのは↑の記事でも書いてある通りです。特にGitLabさんはいろんな工夫をしててすごい。けど僕の場合はそこまですることもないなーということで、同等のテストをするような別の方法に置き換えて回避する作戦でいきました。
削除ボタンなんかで、「削除してもいいですか？」みたいなconfirmを出している箇所はテストコード側に対応が必要なので面倒でした。一度テストを流してみないと気づかないし。
ただ、レイアウトがおかしくてクリックできないみたいなことはなくなりました。変なことにはまらなくてよくなったのは快適です！！