やる気がストロングZERO

やる気のストロングスタイル

【Rails】ブラウザ実行自動テスト設定方法

railsでブラウザ実行のテストの自動化をどうやるのか調べた。
結構把握に時間がかかったのでメモ。

前提知識整理

個人的認識なのでもしかしたら間違っているかも。

Rspec
railsでテストを書く際のインターフェース定義的なもの?
英語の文章のようにテストを書ける。

◆Capybara
railswebブラウザ実行テストを書く際のインターフェース的なもの。
Capybaraが指定する方法でテストコードを記載すると、Capybaraがdriverを操作してブラウザ実行して検証してくれる。
Rspecと一緒に使う事で、Rspecの記法でテストを書く事ができる感じ。

selenium-webdriver
Capybaraだけではブラウザを操作できない。
seleniumが各ブラウザのdriverを使ってwebブラウザを操作する。
seleniumのデフォルトはfirefoxブラウザで、firefoxのdriverをインストールしてパス上に配置することでfirefoxブラウザを操作できるようになる。
設定で対象ブラウザをchromeにすることもでき、この場合はchromeドライバーが必要になる。
ブラウザ本体ももちろん必要。

◆Capybara-webkit
Capybara用に用意されるwebkitのheadlessブラウザ(っぽい)
Capybaraの設定でこのブラウザを使うようにすれば、使用するブラウザもGemfileで管理できるしいいかも。実行も軽いらしい。
ただし、インストールでめんどくさい場合が多い印象。

chromeで実行できるようにしてみた

参考)
GitHub - teamcapybara/capybara: Acceptance test framework for web applications

spec_helper.rbに下記を追記

Capybara.javascript_driver = :selenium_chrome
# Capybara.javascript_driver = :selenium_chrome_headless ヘッドレスにしたい場合はこっち
# current_driverを変更しても良さげ

spec/features/以下にテストコードを配置

require 'spec_helper'

describe "ブラウザ実行テスト", type: :feature, js: true do # js: trueで上記で設定したjavascript_driverが使われるようになる
  context "ログイン状態" do
    before :each do
      login
    end

    describe "表示確認" do
      it "トップページが表示される" do
        click_link('TOP')
        page.save_screenshot('top.png') # スクリーンショットを取れる。
        expect(page).to have_css("body > div > dl:nth-child(1) > dd", text: "TOP") # cssセレクタを使ってtext内容でチェックするなど
      end

      it "アカウント情報ページが表示される" do
        click_link('account')
        page.save_screenshot('accounts.png')
        expect(page).to have_css("body > div > div:nth-child(2) > div > form > div:nth-child(2) > div:nth-child(1) > label", text: "アカウント情報") # cssセレクタを使ってtext内容でチェックするなど
      end
    end
  end
end

def login
  visit '/sign_in'
  fill_in('username', with: 'ユーザー名')
  fill_in('password', with: 'パスワード')
  click_on('sign in')
end

よくわからない点

visit("/")を実行するとbeforeでログインした状態がクリアされてしまう。
ログインした状態で指定urlにジャンプしたい時はどうすればいいのか?