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

```ruby:Gemfile
group :test do
  gem 'rspec-rails'
  gem 'capybara'
  gem 'selenium-webdriver'
end
```
```ruby:ターミナル
$ bundle install
```
```ruby:ターミナル
$ rails g rspec:install
```
```ruby:ターミナル

      create  .rspec
      create  spec
      create  spec/spec_helper.rb
      create  spec/rails_helper.rb
```
こんな感じでファイルできます。

#chromedriverの導入

###Homebrewをアップグレード
```ruby:ターミナル
$ brew tap homebrew/cask
```

###Chrome Driverをインストール
```ruby:ターミナル
$ brew cask install chromedriver
```
これで下準備完了

#capybaraからコマンド一つで自動ブラウザテスト
spec/support/capybara.rbを作成します。

```ruby:ターミナル
$ mkdir spec/support
$ touch spec/support/capybara.rb
```
capybara.rbに設定を記載

```ruby: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でテストが動くように記載

```ruby: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テストの書き方がわからない人は[こちらの記事](https://qiita.com/jnchito/items/607f956263c38a5fec24)を読むとわかりやすいです。
今回私の作成したアプリは記事の投稿機能があるのでそのページ変遷についてのテストを書きます。

```ruby:ターミナル
$ mkdir spec/features
$ touch spec/features/post_spec.rb
```

```ruby: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
```
#結果

```ruby:ターミナル
$ bundle exec rspec spec/features
```

![go-enfeatureテスト.mp4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501638/67cfcdc7-5bd3-0326-6456-2b466735dccb.gif)
<img width="859" alt="スクリーンショット 2019-11-02 1.48.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501638/e6cf0d0c-a69a-8271-cc1b-b44442bc31b5.png">
こんな感じです。

#おわりに
RSpec極めます、、、