label要素の使い方(フォーム作成、結合テスト)

12739 ワード
HTML Capybara Rails RSpec HTML テキストリンク

はじめに

Railsで某フリマアプリのコピーアプリを作成中、
結合テストを記述した際に、labelをよく使ったので一度まとめてみました。

開発環境

Ruby 2.6.5
Rails 6.0.3.4
RSpec
- rspec-rails 4.0.1
- capybara 3.33.0
MySQL
Visual Studio Code
(GoogleChrome)

検証

labelとは

フォームの中で項目名(ラベル)と入力要素（プルダウン、チェックボックスなど）を関連付けるための要素です。

主に、チェックボックスやラジオボタンをラベルと関連付け、ラベルをクリックすることで選択できるようにするときに使われます。

書き方は下記の2パターンです。

  1. label要素で括る
  2. for属性を使用

①項目名と入力要素をlabelで一括りにする

sample1
<div>
  <label>
    チェックボックス：
    <input type="checkbox" name="sample-checkbox" id="checkbox-id">
  </label>
</div>
<div>
  <label>
    ラジオボタンＡ：
    <input type="radio" name="sample-radio" id="radio-id-a">
  </label>
  <br>
  <label>
    ラジオボタンＢ：
    <input type="radio" name="sample-radio" id="radio-id-b">
  </label>
</div>
<div>
  <label>
    テキスト(input)：
    <input type="text" name="sample-text" id="text-id">
  </label>
</div>
<div>
  <label>
    テキストエリア(textarea)：<br>
    <textarea name="sample-textarea" id="textarea-id"></textarea>
  </label>
</div>

②入力要素のidを、for属性で項目名と結びつける

sample2
<div>
  <label for="checkbox-id">
    チェックボックス：
  </label>
  <input type="checkbox" name="sample-checkbox" id="checkbox-id">
</div>
<div>
  <label for="radio-id-a">
    ラジオボタンＡ：
  </label>
  <input type="radio" name="sample-radio" id="radio-id-a">
  <br>
  <label for="radio-id-b">
    ラジオボタンＢ：
  </label>
  <input type="radio" name="sample-radio" id="radio-id-b">
</div>
<div>
  <label for="text-id">
    テキスト(input)：
  </label>
  <input type="text" name="sample-text" id="text-id">
</div>
<div>
  <label for="textarea-id">
    テキストエリア(textarea)：<br>
  </label>
  <textarea name="sample-textarea" id="textarea-id"></textarea>
</div>

どちらの書き方でも、同様のフォームが作成可能です。

テストコードで使う

labelは結合テストでも大活躍してくれます！

例えばログイン処理の結合テストの場合、
ログインに必要なユーザー情報の入力動作には、fill_inを使ってフォームに入力します。

fill_in 'フォームの名前', with: '入力する文字列'

このとき、予めビュー側でラベルの関連付けをしておくことで、
fill_inで指定するフォームを簡潔にすることが出来ます。

login.html.erb
  <div class="form-group">
    <div class='form-text-wrap'>
      <label for="email" class="form-text">メールアドレス</label>
      <span class="indispensable">必須</span>
    </div>
    <%= f.email_field :email, class:"input-default", id:"email", placeholder:"PC・携帯どちらでも可", autofocus: true %>
  </div>
  <div class="form-group">
    <div class='form-text-wrap'>
      <label for="password" class="form-text">パスワード</label>
      <span class="indispensable">必須</span>
    </div>
    <%= f.password_field :password, class:"input-default", id:"password", placeholder:"" %>
  </div>
  <div class='login-btn'>
    <%= f.submit "ログイン" ,class:"login-red-btn" %>
  </div>

label要素とfor属性を使って
メールアドレスラベルに、入力フォームのemailというid、
パスワードラベルに、入力フォームのpasswordというidを
それぞれ紐付けしています。

この紐付けによって、それぞれのラベル名でフォームを認識できるようになり
fill_inにラベル名で指定ができるようになります。

spec/system/users_spec.rb
RSpec.describe 'ログイン', type: :system do
  before do
    @user = FactoryBot.create(:user)
  end
  context 'ログインができるとき' do
    it '保存されているユーザーの情報と合致すればログインができる' do
      # トップページに移動する
      basic_pass root_path

      (中略)    

      # ログインページへ遷移する
      visit new_user_session_path

      # 正しいユーザー情報を入力する
      fill_in 'メールアドレス', with: @user.email
      fill_in 'パスワード', with: @user.password

      # ログインボタンを押す
      find('input[name="commit"]').click

      (中略)

    end
  end
end

どのフォームかが項目名で判断できて、スッキリします◎

終わりに/感想

アプリケーションの利用時にも、テスト時にも
フォームの使い勝手を良くしてくれるlabel要素でした！

初学者で拙い記事ですが、少しでもお役に立てると嬉しく思います。
最後まで読んでいただき、誠にありがとうございました。

参考記事

HTML5入門/label要素
TAG index/フォーム部品とラベルを関連付ける
【Qiita】使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」