Capybara Rspec UIテストのめっちゃ基礎

とある受託開発会社でRailsでアプリケーション開発を半年ほど行い、今年の4月から新卒としてHRTech開発のエンジニアリングをしております。

新卒エンジニアはRailsの研修を行っているんですが初めて(今更ながら)feature specでUIテストを書きました。

書き方もまた別物でとても戸惑っております。なので今回勉強したfeature specについてまとめたいと思います。まだ本当に触った程度なのでもっと詳しい技術等は後日書こうと思います。

この記事を見てこれからRailsのUIテストを書こうとしている超初心者の方に1割でも参考になれば幸いです。

 

Capybaraを使えるようにする

capybaraはUIテストを使うためのライブラリです。テスト上でブラウザを開きテストコード通りに実行してくれるイメージだそうです。

使用したライブラリ

  • Capybara

Capybaraの用意

gem 'capybara'

bundle installで読み込んでおいてください。

spec/rails_helper.rbに追記

require'capybara/rspec'

上記1行を追記

 

UIテストとは

『Everyday Rails – RSpecによるRailsテスト入門』という書籍でテストを勉強をしています。

簡単に言うとブラウザ上で操作したときに期待通りの動作をし結果が返ってくるかをテストします。エディタ上ではブラウザでの操作と期待する結果をソースコードで書きます。

https://leanpub.com/everydayrailsrspec-jp

具体的な例とソースはこれか

 

実際に使ってみた

実際に研修課題で作ったコードを例にあげて紹介します。課題内容はシンプルなタスク登録アプリです。以下が実際にかいたテストコードです。

require 'rails_helper'

RSpec.feature "Task", type: :feature do
  scenario "click link new_task_path" do 
    before { visit new_task_path } 
    
  scenario "create new task" do 
    expect {
      fill_in "タスク名", with: "テストを書く"
      fill_in "説明文", with: "テストの説明です"
      click_button "登録"
    }.to change(Task, :count).by(1)

  end
end

先程紹介した『Everyday Rails – RSpecによるRailsテスト入門』を参考にほぼコピペしたコードです。正しい書き方かどうかは今後勉強してくので今は無視してください。一つひとつが何をしているか自分なりの解説をします。

 

visit root_path

「visit」でテストしたブラウザページにまず繊維することができます。今回の場合ですとnew_task_pathつまりタスク新規作成画面のページに遷移しています。これがないとそもそもブラウザのページにいないのでテストすることができません。

new_task_pathのところを変更すればテストしたいページに移動することが可能です。

ちなみに「before {}」の部分はテストをする前に実行するコードをかけます。テストをする上でbeforeやletは超重要となるで最低限どんなことをするかは知っておく必要があるでしょう。今回は割愛します。

 

 

fill_in “タスク名”, with: “テストを書く”

beforeの中でvisit new_task_pathで新規作成画面に遷移しました。そこにはタスクを新規で作成するためのフォームが並んでいます。フォームの中に値を入れていく操作をソースに書いていきます。

「fill_in」はフォームに文字列を入力することができます。クオーテーションの中はラベルの文字列、またはhtmlタグのid名を指定して「with:」の中に入力する値を入れいることができます。

 

 

click_button “登録”

「click_button」でボタンを押すことができます。クォーテーションの中にはボタンに表示されている文字列、またはhtmlタグのidをしてすることができます。

 

 

expect {}

expectのブロック内で処理をまとめて実行後し期待する動きをメソッドをつなげて書くことができます。「.to change(Task, :count).by(1)」はTaskのレコードが一つ増加することを期待しているテストです。

“create new task”のブロックではフォームに文字列を入力して登録ボタンを押したらレコードが1件増えるかどうかのテストです。実際のフォームは以下の通りです。

<%= form_for @task do |f| %>

  <%= f.label :title, ""タスク名 %>
  <%= f.text_fiedl :title %>

  <%= f.text_area :description, "説明文" %>
  <%= f.text_area :description %>

  <%= f.submit "登録" >

<% end %>

 

注意

「click_link」や「click_button」などのメソッドはページ内に複数あるとどのボタンうあリンクをクリックしていいかわからないみたいな意味合いのエラーが出ます。複数あるうちの一つを指定して操作することもできます。以下一部の例です。

find('.link-btn').click

findで一つ該当するものを指定できます。カッコの中にはhtmlタグのクラス名を入れています。

page.all('a')[0].click

ページ全体にあるhtmlのaタグを見つけ[]の中にindex番号を入れることで何番目かを指定することができます。今回は0番目なので最初のaタグをクリックしています。

 

 

最後に

今回使用したfeature specのメソッドは以上です。使ってみたばかりでまだ理解も薄くテストコードも甘いと思います。とりあえずこれを書けばこう動くというメモ程度に投稿してみました。

今回紹介したメソッド以外にも便利なメソッドはたくさんあります。今後使って行くと思うので都度記事を投稿して行きたいと思います。

まだほんとに触ったばかりで表面も理解しているか怪しい状態です。指摘等ありました優しくコメントをお願いいたします。

ありがとうございました。

label, , ,

書いた人

銀座の事業会社でエンジニアをやっております。 まだまだぺーぺーです。

2 Comments

  1. gumi 2019年6月8日 Reply
    • yamasouAuthor 2019年6月11日 Reply

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です