Zenn
🐹

【初心者】Capybaraさん

2025/01/26に公開
Ruby
Selenium
RSpec
capybara
racktest
tech

状況

  • rubyのrspecを用いてテストコードを作成している際に、生成AIからお勧めされて利用
  • 今までは、管理者画面にログインする際に
  post admin_login_path, params: { session: { email: 'hogehoge', password: 'password' } }

と記載していたが、capybaraを利用することにより、

  visit admin_login_path
  fill_in 'session[email]', with: 'hogehoge'
  fill_in 'session[password]', with: 'password'
  click_button 'ログイン'

とGUI上の操作イメージがわかりやすくなった

  • 名前は聞いたことがあったが、実際に利用してみて改めて便利だと感じたので導入として調べてみた

内容

Capybaraとは

  • capybara は、Ruby用のウェブアプリケーションテスト用のgem
  • 主にRailsなどのウェブアプリケーションの自動化テストを行う際に利用される
  • 以下にその役割や利用シーン、具体的な使い方を調査

1. Capybaraの役割

  • ウェブアプリケーションのテストを簡単に記述するためのDSL（ドメイン固有言語）を提供する
  • ブラウザ操作（クリック、フォーム入力、ページ遷移など）をシミュレートする
  • 様々なドライバ（Selenium, Rack::Test, WebKitなど）をサポートし、ブラウザの動作をエミュレートする
  • JavaScriptを含む動的なコンテンツのテストにも対応

2. 使用する場面

  • E2Eテスト（End-to-End Test）や受け入れテストで、アプリケーション全体のユーザー体験を検証する際
    • 例: ユーザーがログインして記事を投稿する一連のフローをテスト
  • JavaScriptを利用した動的ページのテスト
  • フォームのバリデーションやエラーメッセージの確認

3. 具体的な使い方

以下にRailsアプリケーションでのCapybaraの利用例を示す

(1) セットアップ

Gemfileに以下を追加し、bundle installを実行

# Gemfile
group :test do
  gem 'capybara'
  gem 'selenium-webdriver' # Seleniumを利用する場合
  gem 'webdrivers'         # 必要に応じて
end

(2) 基本的なテストコード

Capybaraを使用してログイン機能をテストする例

require 'rails_helper'

RSpec.feature "User Login", type: :feature do
  scenario "ユーザーがログインできることを確認" do
    # テスト用ユーザーの作成
    user = User.create!(email: "test@example.com", password: "password")

    # ログインページにアクセス
    visit new_user_session_path

    # フォームに入力
    fill_in "Email", with: user.email
    fill_in "Password", with: "password"

    # ログインボタンをクリック
    click_button "Log in"

    # ログイン成功メッセージを確認
    expect(page).to have_content "ログインしました"
  end
end

(3) JavaScript対応テスト

CapybaraはデフォルトでJavaScriptをサポートしないが、Seleniumなどのドライバを使うことで対応可能

RSpec.feature "Dynamic Content", type: :feature, js: true do
  scenario "JavaScriptで動的に追加される要素をテスト" do
    visit some_dynamic_page_path

    # ボタンをクリックして動的な要素を表示
    click_button "Show Content"

    # 動的に表示された要素を確認
    expect(page).to have_content "動的に追加されたコンテンツ"
  end
end

(4) ヘルパーメソッドを活用した例

複数のテストケースで使う共通操作をヘルパーメソッド化することが可能

module LoginHelper
  def login_as(user)
    visit new_user_session_path
    fill_in "Email", with: user.email
    fill_in "Password", with: user.password
    click_button "Log in"
  end
end

RSpec.configure do |config|
  config.include LoginHelper, type: :feature
end

RSpec.feature "User Dashboard", type: :feature do
  let(:user) { User.create!(email: "test@example.com", password: "password") }

  scenario "ログイン後にダッシュボードが表示される" do
    login_as(user)
    expect(page).to have_content "ダッシュボード"
  end
end

4. 主なメソッド一覧

  • visit(path): 指定したURLまたはパスを訪問
  • fill_in(field, with: value): フォームフィールドに値を入力
  • click_button(button_text): ボタンをクリック
  • click_link(link_text): リンクをクリック
  • have_content(text): ページに指定のテキストがあるか確認
  • find(selector): 指定のセレクタに一致する要素を取得

まとめ

  • Capybaraは、ウェブアプリケーションのテストにおいて、ユーザー目線で操作をシミュレートできる便利なツール
  • 特にフォーム入力やページ遷移、JavaScriptを伴う動的ページの動作確認に力を発揮

所見

  • 調べてみて上記メソッド以外にも様々なメソッドがあることを知り、capybaraの奥深さを学んだ
  • 一方で、javascriptをテストする際の:seleniumや:rack_testといったドライバの理解がまだ足りていないことにも気づいたので、次に学んでみたい
    例）Capybara.javascript_driver = :selenium_chromeとした際の
    ChromeDriverとの整合性 など

参考

https://qiita.com/morrr/items/0e24251c049180218db4
https://zenn.dev/topi_log/articles/b4d65b43217668

Discussion