【備忘録】Rspec・ブラウザ検証に使うフィーチャースペック

5080 ワード
rails, rspec, Ruby, Capybara Capybara テキストリンク

はじめに

はじめまして。
現在、プログラミングスクールで「結合テスト(フィーチャースペックというようなので、以降そのように呼びます)」について学んでいます。

ブラウザ検証を行うにあたって続々とmatcherや構文が現れて混乱してきたので、
ここいらで一度、まとめたいと思います。

後から調べやすいように、以下のまとめ方にします。

  • どんなときに使う構文なのか
  • 記述の一例
  • 構文の意味

見づらいかもしれませんが、どうぞよろしくお願いします。

更新履歴

日付 更新内容
3/23(木) ページのレイアウト、概要執筆
3/24(金) fill_inの’フォームの要素'について追記

ページの移動や画面のクリックなど

特定のページへ移動する

記述の一例 : visit + 移動したいpath
構文の意味 : 移動先は、rails routesで調べて、Prefix記法で指定する。
こんなとき : トップページに遷移したか確認する

rails routes # 移動したい先のパスを調べる
visit root_path

ボタンをクリックする

記述の一例 : find('ボタンの要素').click
構文の意味 : 'ボタンの要素'は、ブラウザの検証機能で特定する。
こんなとき : 送信ボタンをクリックする

sample.html
<input type="submit" name="commit" value="Save">

sample.htmlが▲だとしたら、送信ボタンはcommitという要素だとわかるので、

find('input[name="commit"]').click

フォーム(テキストボックス)に文字を入力する*

記述の一例 : fill_in 'フォームの要素', with:　'入れたいテキスト'
構文の意味 : 'フォームの要素'は、ブラウザの検証機能で特定する。
こんなとき : ユーザー登録フォームの氏名欄に名前を入力する

ここで、fill_inの構文に用いる、'フォームの要素'について、補足します。

HTMLのタグは、'入力欄'などのテキストを1つの入力欄と紐づける役割があります。タグをつけることで、

  • 入力欄が何を表しているかわかりやすくなったり
  • アイコンをかざすだけで、入力欄がアクティブになったり

便利なタグなのです。

ただし、テキストをタグで囲んだだけの構文では、テキストをフォームの要素に指定することはできません。

fill_in 'Content', with: '今日はいい天気'
# 「そんなフィールドは見つからないよerror」が出ます
# Capybara::ElementNotFound: Unable to find field "Content" that is not disabled）

これは、Capybaraでラベル名で選択できるようにするためにはlabelタグのfor属性を正しく設定（inputタグのid属性を指定）する必要があるからです。
for構文を使うと、<label for="ここ">と<input id="ここ">を合わせると、お互いが別の場所にあっても、紐付くようになります。

sample2.html
<label for="blog_contet">Content</label>
<input type="text" name="blog[content]" id="blog_content">

▲ これなら、fill_inの'フォームの要素'は、で囲まれたContentとすることができます。

fill_in 'Content', with: '今日はいい天気'

おわりに

まだまだ途中なので、日々追記していこうと思います。
もし記載や認識に誤りがあれば、ご指摘いただけますと助かります。

よろしくお願いします。

Wordpressの練習もしていますので、のぞいてみてください