fill_inでCapybara::ElementNotFound: Unable to find field "フィールド名"が出た時の対応

検索フォームを作成時に「フォームに検索する値を入力➡︎検索ボタンクリック」というfeature specを書きました

visit 検索フォームページ
fill_in ‘xxxID', with: ‘値'

として

テンプレートはslimを使っていて
label.col-sm-2.col-form-label xxxID
.col-sm-4
  = label_tag ‘xxx_id', ‘xxxID', class: ['col-sm-2', 'col-form-label']

としていた

実際にテストを走らせてみたところ、

Failure/Error: fill_in ‘xxxID', with: 12345

     Capybara::ElementNotFound:
       Unable to find field “xxxID"

となってしまった

そもそもfill_inの第1引数は何を示しているのかドキュメントを確認
http://www.rubydoc.info/github/jnicklas/capybara/master/Capybara/Node/Actions#fill_in-instance_method

Locate a text field or text area and fill it in with the given text The field can be found via its name, id or label text.

と記載されているため、inputのname, idもしくはlabelテキストが指定できることがわかる
今回はlabelテキストを指定しているが、not foundとなってしまう

実際に出力されるHTMLを見てみると
<div class="form-group row">
    <label class="col-sm-2 col-form-label”>xxxID</label>
    <div class="col-sm-4">
        <input type="text" name=“xxx_id" id=“xxx_id" value="" class="form-control" placeholder="12345" />
    </div>
</div>

調べていたら以下のようなページが出てきた
http://stackoverflow.com/questions/26072095/how-does-fill-in-work-in-rspec-capybara

このページではinputのid, nameを使うといいよとかかれている

今回はlabelのforに要素のidを追加することで解決させた
<div class="form-group row">
    <label class="col-sm-2 col-form-label" for=“xxx_id”>xxxID</label>
    <div class="col-sm-4">
        <input type="text" name="entry_id" id="entry_id" value="" class="form-control" placeholder="12345" />
    </div>
</div>

slimではlabelをベタ書きするのではなく、label_tagを用いる
= label_tag ‘xxx_id', ‘xxxID', class: ['col-sm-2', 'col-form-label']

label forとinputのidが一致するのでfill_inでlabelテキストが指定できる
Back