更新日: 2014年11月30日
RSpec

CapybaraのwithinをRSpecで使う

RSpec の RequestSpec 等で Capybara を使っているのですけど、最近割と積極的に within を使うようになったので、基本的な使い方を紹介。以前はなぜかあまり使ってませんでした、というか必要になる場面があまりなかったかな。within を使いセレクタを指定することで、操作・テストのセレクタ範囲対象を簡単に絞り込むことができます。

— 環境 —
capybara (2.2.0)

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

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

within でセレクタを指定してフォーム入力

GitHub の Readme には、RSpec と共に使う例として以下のサンプルが掲載されていました。

describe "the signin process", :type => :feature do
  before :each do
    User.make(:email => 'user@example.com', :password => 'password')
  end

  it "signs me in" do
    visit '/sessions/new'
    within("#session") do
      fill_in 'Email', :with => 'user@example.com'
      fill_in 'Password', :with => 'password'
    end
    click_button 'Sign in'
    expect(page).to have_content 'Success'
  end
end

describe "the signin process", :type => :feature do

before :each do

User.make(:email => 'user@example.com', :password => 'password')

end

it "signs me in" do

visit '/sessions/new'

within("#session") do

fill_in 'Email', :with => 'user@example.com'

fill_in 'Password', :with => 'password'

end

click_button 'Sign in'

expect(page).to have_content 'Success'

end

jnicklas/capybara: Using Capybara with RSpec

#session（id=”session” のセレクタ）にあるフォームに fill_in（入力）して click_button（サブミット）する操作。expect でサブミット後に、Success が表示されることをテストしてあります。

within で指定したセレクタの範囲に文字列が表示されることをテスト

GitHub の Readme には掲載されていなかったのですけど、within で指定したセレクタの範囲に特定の文字列が表示されること等を確認するテストも、以下のように書けます。

describe "some page has hoge" do
  before { visit "/some/page" }
  specify do
    within("div#hoge") do
      expect(page).to have_content("hoge")
    end
  end
end

describe "some page has hoge" do

before { visit "/some/page" }

specify do

within("div#hoge") do

expect(page).to have_content("hoge")

end

これは /some/page の <div id="hoge">…</div> のセレクタ内に “hoge” という文字列が表示されることを確認しています。

以下のページが参考になりました。

RSpecとCapybaraでJavaScript/Ajaxをテストする – Rails 雑感 – Ruby on Rails with OIAX

その他、footer タグのセレクタ（<footer>…</footer>）内にある、HOME へのリンクをクリックする例は以下。

within("footer") do
  click_link "HOME"
end

within("footer") do

click_link "HOME"

end

XPath で within のセレクタを指定

Capybara のセレクタ指定はデフォルトでは CSS ですが、以下のように書くと XPath による指定も行えます。

within(:xpath, '//ul/li') { ... }

1	within(:xpath, '//ul/li') { ... }

私は XPath が好きじゃないので、基本的に使わないようにしていますけれど。

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

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

The RSpec Book (Professional Ruby Series)

Serverspec

>> 次の記事 : Capybara + Launchy で RSpec テストをブラウザで確認

<< 前の記事 : Serverspec（RSpec）のテスト出力に色を付けて見やすくフォーマット

CapybaraのwithinをRSpecで使う

within でセレクタを指定してフォーム入力

within で指定したセレクタの範囲に文字列が表示されることをテスト

XPath で within のセレクタを指定

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