使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」

require 'rails_helper'

RSpec.feature 'ログインとログアウト' do
  background do
    # ユーザを作成する
    User.create!(email: 'foo@example.com', password: '123456')
  end
  scenario 'ログインする' do
    # トップページを開く
    visit root_path
    # ログインフォームにEmailとパスワードを入力する
    fill_in 'Email', with: 'foo@example.com'
    fill_in 'Password', with: '123456'
    # ログインボタンをクリックする
    click_on 'ログイン'
    # ログインに成功したことを検証する
    expect(page).to have_content 'ログインしました'
  end
end

require 'rails_helper'

RSpec.describe 'ログインとログアウト', type: :feature do
  before do
    # ユーザを作成する
    User.create!(email: 'foo@example.com', password: '123456')
  end
  it 'ログインする' do
    # トップページを開く
    visit root_path
    # ログインフォームにEmailとパスワードを入力する
    fill_in 'Email', with: 'foo@example.com'
    fill_in 'Password', with: '123456'
    # ログインボタンをクリックする
    click_on 'ログイン'
    # ログインに成功したことを検証する
    expect(page).to have_content 'ログインしました'
  end
end

visit root_path
visit new_user_path

visit current_path

<input type="submit" name="commit" value="Save">
<!-- または -->
<!-- <button>Save</button> -->

click_button 'Save'

<a href="/users/new">New User</a>

click_link 'New User'

<a href="/users/new">New User</a>
<input type="submit" name="commit" value="Save">

click_on 'New User'
click_on 'Save'

<a href="/users/1">
  <img alt="Alice" src="./profile.jpg">
</a>

<!-- buttonの場合はNG -->
<!-- <button> -->
<!--   <img alt="Alice" src="./profile.jpg"> -->
<!-- </button> -->

click_on 'Alice'
# または
# click_link 'Alice'

<label for="blog_title">タイトル</label>
<input type="text" value="" name="blog[title]" id="blog_title">

fill_in 'タイトル', with: 'あけましておめでとうございます。'

<label for="japanese_calendar">和暦</label>
<select name="japanese_calendar" id="japanese_calendar">
  <option value="0">明治</option>
  <option value="1">大正</option>
  <option value="2">昭和</option>
  <option value="3">平成</option>
</select>

select '平成', from: '和暦'

<label for="mailmagazine">
    <input type="checkbox" name="mailmagazine" id="mailmagazine" value="1">
    メールマガジンを購読する
</label>

check 'メールマガジンを購読する'
uncheck 'メールマガジンを購読する'

<label>
  <input id="user_sex_male" name="user[sex]" type="radio" value="male" checked="checked">
  男性
</label>
<label>
  <input id="user_sex_female" name="user[sex]" type="radio" value="female">
  女性
</label>

choose '女性'

attach_file 'プロフィール画像', "#{Rails.root}/spec/factories/profile_image.jpg"

<input type="hidden" name="secret_value" id="secret_value">

find('#secret_value', visible: false).set('secret!!')

<input type="text" name="blog[title]" id="blog_title" value="" placeholder="ここにタイトルを入力します">

fill_in 'blog_title', with: 'あけましておめでとうございます。'
# または
# fill_in 'blog[title]', with: 'あけましておめでとうございます。'
# fill_in 'ここにタイトルを入力します', with: 'あけましておめでとうございます。'

<select name="japanese_calendar" id="japanese_calendar">
  <option value="0">明治</option>
  <option value="1">大正</option>
  <option value="2">昭和</option>
  <option value="3">平成</option>
</select>

select '平成', from: 'japanese_calendar'

<input type="checkbox" name="mailmagazine" id="mailmagazine" value="1">

check 'mailmagazine'

fill_in '本文', with: '今日はいい天気'

fill_in 'blog[content]', with: '今日はいい天気'

<label>本文</label>
<input type="text" name="blog[content]" id="blog_content">

<label for="blog_contet">本文</label>
<input type="text" name="blog[content]" id="blog_content">

<%= form_with(model: blog) do |f| %>
  <%= f.label :content %>
  <%= f.text_field :content %>
<% end %>

<div class="alert alert-success">
  ユーザーが作成されました。
</div>

expect(page).to have_content 'ユーザーが作成されました。'

<h1 class="information" id="information">大事なお知らせ</h1>

expect(page).to have_selector 'h1', text: '大事なお知らせ'

expect(page).to have_selector '.information', text: '大事なお知らせ'
# または
expect(page).to have_selector '#information', text: '大事なお知らせ'
# 要素とクラスを組み合わせるのも可
expect(page).to have_selector 'h1.information', text: '大事なお知らせ'

<a href="contacts/1" data-method="delete">delete</a>

expect(page).to have_selector 'a[data-method=delete]', text: 'delete'

expect(page).to have_selector 'h1', text: /^大事なお知らせ$/

<input type="submit" name="commit" value="Save">

expect(page).to have_button 'Save'

<a href="/users/sign_up">会員登録はこちら</a>

expect(page).to have_link '会員登録はこちら'

<!-- バリデーションエラー時のHTML -->
<div class="field_with_errors">
  <input type="text" value="" name="blog[title]" id="blog_title">
</div>

# ブログの新規作成画面を開く
visit new_blog_path
# 何も入力せずに作成ボタンをクリックする
click_on 'Create Blog'
# フォーム内の要素にfield_with_errorsクラスが付いていることを検証する
expect(page).to have_css '.field_with_errors'

<!-- ブログの編集画面を開いたときのHTML -->
<label for="blog_title">タイトル</label>
<input type="text" value="あけましておめでとうございます。" name="blog[title]" id="blog_title">

# ブログの編集画面を開く
click_link 'Edit'
# 編集前のタイトルが表示されていることを検証する
expect(page).to have_field 'タイトル', with: 'あけましておめでとうございます。'

<label>
    <input type="checkbox" name="mailmagazine" id="mailmagazine" value="yes" checked="checked">
    メールマガジンを購読する
</label>

expect(page).to have_checked_field('メールマガジンを購読する')

expect(page).to have_unchecked_field('メールマガジンを購読する')

<label>
    <input type="checkbox" name="mailmagazine" id="mailmagazine" value="yes" checked="checked">
    メールマガジンを購読する
</label>

# チェックが付いていてもいなくてもパスする 
expect(page).to have_field('メールマガジンを購読する')

<label for="japanese_calendar">和暦</label>
<select name="japanese_calendar" id="japanese_calendar">
  <option value="明治">明治</option>
  <option value="大正">大正</option>
  <option selected="selected" value="昭和">昭和</option>
  <option value="平成">平成</option>
</select>

expect(page).to have_select('和暦', selected: '昭和')

<label for="japanese_calendar">和暦</label>
<select name="japanese_calendar" id="japanese_calendar">
  <option value="明治">明治</option>
  <option value="大正">大正</option>
  <option value="昭和">昭和</option>
  <option value="平成">平成</option>
</select>

expect(page).to have_select('和暦', options: ['明治', '大正', '昭和', '平成'])

expect(page).to have_select('和暦', selected: '昭和', options: ['明治', '大正', '昭和', '平成'])

<label for="japanese_calendar">和暦</label>
<select name="japanese_calendar" id="japanese_calendar">
  <option value="meiji">明治</option>
  <option value="taisho">大正</option>
  <option value="showa">昭和</option>
  <option value="heisei">平成</option>
</select>

# NG:検証に失敗する
expect(page).to have_select('和暦', selected: '明治')

within find_field('和暦') do
  all('option').each do |option|
    expect(option['selected']).to be_blank
  end
end

# selected になっていなくても、画面上に表示されている項目のvalueは取得できる 
expect(find_field('和暦').value).to eq 'meiji'

<label>
  <input id="user_sex_male" name="user[sex]" type="radio" value="male" checked="checked">
  男性
</label>
<label>
  <input id="user_sex_female" name="user[sex]" type="radio" value="female">
  女性
</label>

expect(page).to have_checked_field('男性')

<html>
<head>
<title>My favorite songs</title>
...

expect(page).to have_title 'My favorite songs'

expect(page).to_not have_content '秘密のパスワード'

expect(page).to have_no_content '秘密のパスワード'

<input type="hidden" name="secret_value" id="secret_value" value="secret!!">

expect(find('#secret_value', visible: false).value).to eq 'secret!!'

<label for="blog_title">タイトル</label>
<input type="text" value="" name="blog[title]" id="blog_title" disabled="disabled">

expect(find('#blog_title')).to be_disabled

expect(page).to have_field 'タイトル', disabled: true 

expect(page).to have_checked_field 'メールを受け取る', disabled: true

expect(page).to have_button '更新する', disabled: true 

<div style="display: none;" class="secret-message">
  よい子は見ちゃダメ
</div>

expect(find('.secret-message', visible: false)).to_not be_visible

<input type="submit" value="Create User" data-confirm="Are you sure?">

button = find_button 'Create User'
expect(button['data-confirm']).to eq 'Are you sure?'

click_on 'New User'
expect(current_path).to eq new_user_path

click_on 'Create User'
expect(page).to have_http_status(:success)
# または
# expect(page).to have_http_status(:ok)
# expect(page).to have_http_status(200)

<a class="settings-link" href="/settings">
  <i class="fa fa-gears"></i>
</a>

find('.settings-link').click

<a id="settings-link" href="/settings">
  <i class="fa fa-gears"></i>
</a>

find('#settings-link').click

<a class="settings-link" href="/settings">
  <i class="fa fa-gears"></i>
</a>

link = find('.settings-link')
expect(link[:href]).to eq edit_user_path

<a id="settings-link" href="/settings">
  <i class="fa fa-gears"></i>
</a>

link = find('#settings-link')
expect(link[:href]).to eq edit_user_path

<a>About Ruby</a>

# href属性がないと click_link 'About Ruby' ではクリックできないため、以下のようにする
link = find('a', text: 'About Ruby')
link.click

<div class="section-drug">
  現在薬を飲んでいますか？
  <label>
    <input id="user_drug_yes" name="user[drug]" type="radio" value="yes" checked="checked">
    はい
  </label>
  <label>
    <input id="user_drug_no" name="user[drug]" type="radio" value="no">
    いいえ
  </label>
</div>

<div class="section-disease">
  大きな病気にかかったことはありますか？
  <label>
    <input id="user_disease_yes" name="user[disease]" type="radio" value="yes" checked="checked">
    はい
  </label>
  <label>
    <input id="user_disease_no" name="user[disease]" type="radio" value="no">
    いいえ
  </label>
</div>

choose 'はい'
# => Capybara::Ambiguous: Ambiguous match, found 2 elements matching radio button "はい"

within '.section-drug' do
  choose 'はい'
end

within '.section-disease' do
  choose 'いいえ'
end

# 画面上2つある「はい」のうち、最初の「はい」を選択
choose 'はい', match: :first 

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mozell Conn</td>
      <td>
        <a href="/contacts/1/edit">Edit</a>
      </td>
    </tr>
    <tr>
      <td>Adaline Gleason</td>
      <td>
        <a href="/contacts/2/edit">Edit</a>
      </td>
    </tr>
    <tr>
      <td>Jazmyne Goldner</td>
      <td>
        <a href="/contacts/3/edit">Edit</a>
      </td>
    </tr>
  </tbody>
</table>

all('tbody tr')[1].click_link 'Edit'

all('tbody tr')[0].click_link 'Edit'

first('tbody tr').click_link 'Edit'

within first('tbody tr') do
  click_link 'Edit'
end

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mozell Conn</td>
      <td>
        <a href="/contacts/1/edit">Edit</a>
      </td>
    </tr>
    <tr>
      <td>Adaline Gleason</td>
      <td>
        <a href="/contacts/2/edit">Edit</a>
      </td>
    </tr>
    <tr>
      <td>Jazmyne Goldner</td>
      <td>
        <a href="/contacts/3/edit">Edit</a>
      </td>
    </tr>
  </tbody>
</table>

contact = Contact.find_by(name: 'Adaline Gleason')

expect(page).to have_link 'Edit', href: edit_contact_path(contact)

click_link 'Edit', href: edit_contact_path(contact)

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mozell Conn</td>
      <td>
        <a href="/contacts/1/edit">
          <i class="fa fa-pencil"></i>
        </a>
      </td>
    </tr>
    <tr>
      <td>Adaline Gleason</td>
      <td>
        <a href="/contacts/2/edit">
          <i class="fa fa-pencil"></i>
        </a>
      </td>
    </tr>
    <tr>
      <td>Jazmyne Goldner</td>
      <td>        
        <a href="/contacts/3/edit">
          <i class="fa fa-pencil"></i>
        </a>
      </td>
    </tr>
  </tbody>
</table>

contact = Contact.find_by(name: 'Adaline Gleason')

expect(page).to have_link nil, href: edit_contact_path(contact)

click_link nil, href: edit_contact_path(contact)

click_on 'Create User'
expect(page).to have_content 'ユーザを作成しました'
# エラー => expected to find text "ユーザを作成しました" in "...

click_on 'Create User'
# ブラウザで画面を開く
save_and_open_page
expect(page).to have_content 'ユーザを作成しました'

# Gemfile
group :test do 
  gem 'launchy'
end

bundle install

xscenario '一時的に実行させたくないシナリオ' do
  # ...
end

scenario 'Userの作成', js: true do
# または
# it 'Userの作成', js: true do

# Ajaxでデータを保存するテストの例
expect { 
  click_link 'Save'
  sleep 0.5 # 秒数は適当に調整 
}.to change { Item.count }.by(1)

expect { 
  click_link 'Save'
  # sleepの代わりにfindで待つ
  find '.alert', text: '保存しました' 
}.to change { Item.count }.by(1)

# または
click_link 'Save'
# sleepの代わりにhave_selectorで待つ
expect(page).to have_selector '.alert', text: '保存しました'
expect(Item.count).to eq 1 

group :test do
  # ...
  gem 'rspec-retry'
end

# ...
require 'rspec/retry'

RSpec.configure do |config|
  # ...

  # 実行中にリトライのステータスを表示する
  config.verbose_retry = true
  # リトライの原因となった例外を表示する
  config.display_try_failure_messages = true

  # js: true のフィーチャスペックのみリトライを有効にする
  config.around :each, :js do |ex|
    ex.run_with_retry retry: 3
  end
end

scenario '秘密の隠しボタンをクリックする', js: true do
  visit secret_path
  find('.secret-area').hover
  # hover中しか表示されないボタンをクリックする
  find('.secret-button').click
end

<form (略)>
<input type="text" id="search-text">
</form>

# 検索テキストを入力
fill_in 'search-text', with: 'Capybara'
# テキストボックス内でリターンキーを押下
find('#search-text').native.send_key(:Enter)
# 検索結果の検証
expect(page).to have_content 'Capybaraの検索結果'

visit root_path
html = page.html
# 取得結果 
# <!DOCTYPE html>
# <html>
# <head>
# ...

visit root_path

# <div class="navbar">内のHTMLを取得する

# js: true を使わない場合
html = find('.navbar').native.inner_html

# js: true を使う場合 （Poltergeist 1.8以上で有効。Poltergeist以外では動作未確認）
html = find('.navbar')['innerHTML']

user_agent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) CriOS/38.0.2125.67 Mobile/12B411 Safari/600.1.4'

Capybara.current_session.driver.header('User-Agent', user_agent)

user_agent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) CriOS/38.0.2125.67 Mobile/12B411 Safari/600.1.4'

page.driver.headers = { "User-Agent" => user_agent }

# Deviseでプログラミング的にログイン状態を作る
user = User.create(email: 'foo@example.com')
login_as user, scope: :user
visit edit_settings_path

# OmniAuthでTwitter認証を偽装する
OmniAuth.config.test_mode = true
params = { provider: 'twitter', uid: '123545' }
OmniAuth.config.mock_auth[:twitter] = OmniAuth::AuthHash.new(params)
click_on 'Twitter Login'

<a href="/some_information" target="_blank">新しいウインドウを開く</a>

scenario '新しいウインドウの内容を検証する', js: true do
  visit some_path
  click_on '新しいウインドウを開く'
  handle = page.driver.browser.window_handles.last
  page.driver.browser.within_window(handle) do
    expect(page).to have_content '新しいウインドウの内容'
  end
end