更新日: 2014年2月28日
RSpec

RSpec + Capybara でラジオボタン/セレクト/チェックボックスのフォーム要素をテスト

Capybara を RSpec とともに使ってフォーム入力する際に、text_field 以外の HTML フォーム要素に入力してテストを行うためのチート。text_field（input type=”text”）は、普通に fill_in でフィールドに入力できますが、他の要素について調べました。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

— 環境 —
rails-4.0.1
rspec-rails-2.14.0
capybara-2.2.0

User モデルでの form_for の中で Rails ヘルパーでフォーム要素を作成し、出力される HTML を併記しています。また、それに対する RSpec + Capybara でのテストの書き方。

radio button（ラジオボタン）

<%= f.radio_button :gender, 'male' %> 男性
<%= f.radio_button :gender, 'female' %> 女性
  ↓
<input id="user_gender_male" name="user[gender]" type="radio" value="male" /> 男性
<input id="user_gender_female" name="user[gender]" type="radio" value="female" /> 女性

<%= f.radio_button :gender, 'male' %> 男性

<%= f.radio_button :gender, 'female' %> 女性

↓

<input id="user_gender_male" name="user[gender]" type="radio" value="male" /> 男性

<input id="user_gender_female" name="user[gender]" type="radio" value="female" /> 女性

ラジオボタンの場合、Capybara で要素をチェックするには以下のように書く。

choose "ラジオボタン要素のid"

1	choose "ラジオボタン要素のid"

男性にチェックする場合。

choose "user_gender_male"

1	choose "user_gender_male"

女性にチェックする場合。

choose "user_gender_female"

1	choose "user_gender_female"

select option（セレクト）

<%= f.select :language, { "日本語" => "ja",
                          "英語" => "en" } %>
  ↓
<select id="user_language" name="user[language]">
<option value="ja">日本語</option>
<option value="en">英語</option>
</select>

<%= f.select :language, { "日本語" => "ja",

"英語" => "en" } %>

↓

</select>

セレクトメニューの場合、Capybara で要素を選択するには以下のように書く。

select "ラベル", from: "セレクトメニューのid"

1	select "ラベル", from: "セレクトメニューのid"

日本語を選択する場合は以下。

select "日本語", from: "user_language"

1	select "日本語", from: "user_language"

英語を選択する場合は以下。

select "英語", from: "user_language"

1	select "英語", from: "user_language"

value の値（ja, en）じゃなくて、セレクトメニューのラベル名を指定する。ここちょっとはまりました。

check box（チェックボックス）

<%= f.check_box 'acceptance', {:checked => false}, true, false %>
  ↓
<input id="user_acceptance" name="user[acceptance]" type="checkbox" value="true" />

<%= f.check_box 'acceptance', {:checked => false}, true, false %>

↓

チェックボックスの場合、Capybara でのチェックには、check, uncheck メソッドを使う。

check "チェックボックスのid"
uncheck "チェックボックスのid"

1 2	check "チェックボックスのid" uncheck "チェックボックスのid"

チェックを入れる。

check "user_acceptance"

1	check "user_acceptance"

チェックを外す。

uncheck "user_acceptance"

1	uncheck "user_acceptance"

以上です。

私は Rails のテストフレームワークには RSpec を使っています。サーバーのテスト用に Serverspec もおすすめです。

Ruby on Rails 4 アプリケーションプログラミング

The RSpec Book (Professional Ruby Series)

Serverspec

>> 次の記事 : Rails モデルの RSpec 単体テストで validation と DB に対するテストを区別した

<< 前の記事 : Rails で i18n 化に RSpec + Capybara のテストを対応させる

RSpec + Capybara でラジオボタン/セレクト/チェックボックスのフォーム要素をテスト

radio button（ラジオボタン）

select option（セレクト）

check box（チェックボックス）

Leave Your Message! コメントをキャンセル