RSpec+capybara+selenium+chromedriverでブラウザ自動テスト！！

はじめに

仕事でブラウザテストやったので自作アプリにも入れておきますううううう。

環境

• ruby 2.5.0
• Rails 5.0.7.2
• rspec-rails 3.9.0
• capybara 3.29.0
• selenium-webdriver 3.4.4

Gem

Gemfile

group :test do
  gem 'rspec-rails'
  gem 'capybara'
  gem 'selenium-webdriver'
end

ターミナル

$ bundle install

ターミナル

$ rails g rspec:install

ターミナル

      create  .rspec
      create  spec
      create  spec/spec_helper.rb
      create  spec/rails_helper.rb

こんな感じでファイルできます。

chromedriverの導入

Homebrewをアップグレード

ターミナル

$ brew tap homebrew/cask

Chrome Driverをインストール

ターミナル

$ brew cask install chromedriver

これで下準備完了

capybaraからコマンド一つで自動ブラウザテスト

spec/support/capybara.rbを作成します。

ターミナル

$ mkdir spec/support
$ touch spec/support/capybara.rb

capybara.rbに設定を記載

spec/support/capybara.rb

require 'selenium-webdriver'
require 'capybara/rspec'

Capybara.configure do |config|

  config.default_driver = :chrome
  config.javascript_driver = :chrome
  config.run_server = true
  config.default_selector = :css 
  config.default_max_wait_time = 5  
  config.ignore_hidden_elements = true
  config.save_path = Dir.pwd     
  config.automatic_label_click = false 
end

Capybara.register_driver :chrome do |app|

  options = Selenium::WebDriver::Chrome::Options.new

  options.add_argument('disable-notifications')       
  options.add_argument('disable-translate')          
  options.add_argument('disable-extensions')         
  options.add_argument('disable-infobars')           
  options.add_argument('window-size=1280,960')        


  # ブラウザーを起動する
  Capybara::Selenium::Driver.new(
    app,
    browser: :chrome,
    options: options)
end

spec_helper.rbでテストが動くように記載

spec/spec_helper.rb

ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'support/capybara.rb'

Dir[Rails.root.join("spec/support/*.rb")].each { |f| require f }
ActiveRecord::Migration.check_pending! if defined?(ActiveRecord::Migration)

RSpec.configure do |config|
  config.include Rails.application.routes.url_helpers
  config.include Capybara::DSL
end

featureテストを動作させる

この章は各アプリケーションによって書き方が異なるので参考程度に！！

featureテストの書き方がわからない人はこちらの記事を読むとわかりやすいです。
今回私の作成したアプリは記事の投稿機能があるのでそのページ変遷についてのテストを書きます。

ターミナル

$ mkdir spec/features
$ touch spec/features/post_spec.rb

spec/features/post_spec.rb

require 'rails_helper'
require 'spec_helper'

describe 'トップページ', type: :feature do
  let!(:user_a) { create(:user) }
  let!(:user_b) { create(:user) }
  let!(:post_a) { create(:post, user_id: user_a.id )}
  let!(:task_a) { create(:task, post_id: post_a.id) }
  describe "表示部分" do
    
    before do
      visit root_path
    end

    it "表示されること" do
      expect(current_path).to eq "/"
      expect(page).to have_content("Go-En")
    end

    it "トップページから商品詳細ページに遷移できる" do
      within first('.post-contents') do
        click_on(user_a.name)
      end
      expect(current_path).to eq "/posts/#{post_a.id}"
    end

    context "ログインしていない場合" do
      it "フォローボタンを押すとログイン画面に遷移する" do
        within first('.post-contents') do
          click_on(user_a.name)
        end
        expect(current_path).to eq "/posts/#{post_a.id}"
        click_on("フォローする")
        expect(current_path).to eq new_user_session_path
      end
    end

    context "ログインしている場合" do

      context "当人の投稿の場合" do
        before do
          visit new_user_session_path
          fill_in "user[email]", with: user_a.email
          fill_in "user[password]", with: user_a.password
          click_on 'ログインする'
        end
        
        it "削除ボタンを押すと投稿が削除される" do
          within first('.post-contents') do
            click_on(user_a.name)
          end
          expect(current_path).to eq "/posts/#{post_a.id}"
          expect{
            click_on("投稿を削除")
          }.to change(Post, :count).by(-1)
          expect(current_path).to eq root_path
        end

      end

      context "当人の投稿ではない場合" do
        before do
          visit new_user_session_path
          fill_in "user[email]", with: user_b.email
          fill_in "user[password]", with: user_b.password
          click_on 'ログインする'
        end

        it "フォローボタンを押すとフォローされる" do
          within first('.post-contents') do
            click_on(user_a.name)
          end
          expect(current_path).to eq "/posts/#{post_a.id}"
          expect{
            click_on("フォローする")
          }.to change(Relationship, :count).by(1)
          expect(current_path).to eq "/users/#{user_a.id}"
        end

      end

    end

  end
end

結果

ターミナル

$ bundle exec rspec spec/features

こんな感じです。

おわりに

RSpec極めます、、、