文系人間がエンジニアを目指すブログ

大学の文系学部を卒業した私が、ソフトウェアエンジニアになって、一人前を目指す過程を書くブログです。

【Rspec&Capybara】「fill_inでフォームのtext_areaを埋めたいが、labelがない…」と困ったら、idを使おう

この記事で言ってること

タイトルのまんまです。

Rspecのフィーチャテスト(統合テスト)を書いていて、

「labelがないtext_areaの中身を埋めたい」

というシチュエーションの対処法をメモ。

結論から言うと、labelの名前だけでなく、埋めたいタグのidでも指定できるよ。という話です。

開発環境

開発環境は以下の通り。

rails (5.1.6)
rspec-rails (3.7.2)
capybara (2.15.4)

そもそも、fill_inってなんだっけ?

Rspecのフィーチャスペックでは、実際にユーザーが使うであろう手順をシナリオ化してテストすることが可能です。

「text_areaにある特定の値を入力して、submitする」といったシミュレーションもお手の物。

その「text_areaに特定の値を入力する」という動作を実現させているのが「fill_in」と言う記述です。

例えば、ユーザーからの投稿をテストしたい場合は、

click_link "記事を投稿"
fill_in "タイトルを入力", with: "波乗りジョニー"
fill_in"記事を書く", with: "青い渚を走り、恋の季節がやってくる"
click_button "投稿する"

このように書きます。

fill_inの後の「タイトルを編集」&「記事を編集」という記述が、埋めたいフィールドのラベル名を表しています。

htmlを見ると、こんな感じになっています。

(new.html.haml)

  = form_for @blog, html: {class: 'col s12'} do |f|
    .row
      .col.s3
      .input-field.col.s6
        =f.label :title, "タイトルを入力", for: "textarea1"
        = f.text_area :title, class: "materialize-textarea", id: "textarea1"
    .row
      .col.s2
      .input-field.col.s8
        =f.label :text, "記事を書く", for: "textarea2"
        = f.text_area :text, class: "materialize-textarea", id: "textarea2"
      .col.s12#blog_submit
        =f.submit :投稿する, class: "waves-effect waves-light blue btn"

fill_inする対象のinputタグは、labelの中身でしか指定できない?

上の例のように、labelがちゃんと存在しているフィールドは、これで問題ありません。

しかし、中にはラベルタグを使っていないものもあるでしょう。

そんな時は、フィールドのid名を指定してやると、うまいこと行きます。

click_link "記事を投稿"
fill_in "textarea1", with: "波乗りジョニー"
fill_in"textarea2", with: "青い渚を走り、恋の季節がやってくる"
click_button "投稿する"

このように、idを指定する書き方をしても、先ほどと同じように動いてくれます。