Docker開発環境でCapybaraを使ったブラウザテスト環境を構築する

##概要
docker開発環境でRSpecテスト環境を構築するやり方をまとめました。
初心者で独学なので間違っている部分やもっといいやり方があると思いますが、その時はご指摘頂けると嬉しいです。

以下の記事を参考にしました。
Rails on DockerでRSpecのSystem testをSelenium Dockerを使ってやってみた。

##はじめに
以前、Dockerを使ったRails開発でブラウザテストが実行できないでブラウザテストのエラー解消の記事を投稿しましたが、
コメントを頂き、docker-composeを使ってchrome自体をサービスの一つとして動かせば、
Rails環境を汚さずに簡単にテストができるとアドバイスを頂きましたので試してみました。
ご指摘ありがとうございました！

##1.docker-compose.ymlにchromeのサービスを追加
使用するイメージはChromeが最初からインストールされたものである、standalone-chromeを使います。

docker-compose.yml

version: '3'
services:
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/[app名]
    ports:
      - 3000:3000
    depends_on:
      - db
      - chrome　# ←追加
    tty: true
    stdin_open: true
  db:
    image: mysql:5.7
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
　# ↓追加
  chrome:
    image: selenium/standalone-chrome:latest
    ports:
      - 4444:4444
　# ↑追加
volumes:
  db-volume:

##2.RSpecの導入
rspec-railsのgemを追記します

Gemfile

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'rspec-rails', '~> 4.0.1'  # 追加
  gem 'factory_bot_rails', '~>4.11'
end

gemをインストールします。

$ docker-compose build

※ビルドした後はコンテナの再起動を忘れずに

RSpecのインストール

$ docker-compose run web rails g rspec:install

次に、インストールすると作成されるファイルの中に、"rails_helper.rb"に設定を記述していきます。
RSpec実行時にdocker-seleniumのコンテナのブラウザを使用するように設定します。

/spec/rails_helper.rb

#~
Capybara.register_driver :remote_chrome do |app|
  url = "http://chrome:4444/wd/hub"
  caps = ::Selenium::WebDriver::Remote::Capabilities.chrome(
    "goog:chromeOptions" => {
      "args" => [
        "no-sandbox",
        "headless",
        "disable-gpu",
        "window-size=1680,1050"
      ]
    }
  )
  Capybara::Selenium::Driver.new(app, browser: :remote, url: url, desired_capabilities: caps)
end

#~

RSpec.configure do |config|
  
  config.before(:each, type: :system) do
    driven_by :rack_test
  end

  config.before(:each, type: :system, js: true) do
    driven_by :remote_chrome
    Capybara.server_host = IPSocket.getaddress(Socket.gethostname)
    Capybara.server_port = 4444
    Capybara.app_host = "http://#{Capybara.server_host}:#{Capybara.server_port}"
  end
#~
end

最後に.rspecを編集して、rails_helper.rbの設定を読み取るようにします。

.rspec

- --require spec_helper
+ --require rails_helper

以上です。

あとはテストを記述してテストを実行できるか確認してみます。

#コンテナ起動時
$ docker-compose exec web rspec [rspecテストファイルのpath]

テスト失敗時にブラウザのハードコピーを確認することができました。