【Capybara】vue.jsを使ったページのfeature test時に値が取れない
前提
Ruby On Rails
プロジェクト内vue.js
でフロントエンドを賄っています。Capybara
でfeatue
テストをする時、値がうまく取れずにコケた話です。
問題
ajax
を使い、並び順等を非同期で変更できるようなtable
を持つページに対してテストを書こうとしました。しかし、値をall()
やfind()
で取得しようとしても、find("hoge").text
や.value
の値は""
の空の文字列が帰ってきて、テストは失敗します。
binding.pry
をテスト中に挟んだところ、formが上手く描画しきれてないような気がしました。form
のvalueがresource.id
であったり、resource.title
のままだったので、vue.jsが走る前の状態なんだなと言うことはわかります。ググっていくうちに、JavaScriptがそもそも動いていない、もしくはCapybaraがデフォルトでJavaScriptをテストできないのでは?と思い始めました。
解決
初めにjs: true
を記述してあげれば、JavaScriptを使用する者に対しても、テストが実行できるようになります。ちなみに、chrome
が入っていないとエラー出るので入れておきましょう。(私はVivaldiしか入っていなかった..)
describe "HogePage", type: :feature, js: true do ... end
余談
とても時間を使ってしまいましたが、単純な知識不足。原因にあたりをつけるために、save_and_open_page
メソッドが役立ちました。これは、テスト中に挟むことで、その時のhtmlをブラウザで開いてくれます。今回ではform
のtbody
部分が<script>
タグで囲まれていて未実行状態のような感じだったので、あたりをつけられました。以上。