search
LoginSignup
22

More than 3 years have passed since last update.

posted at

updated at

RailsのSystemTest(headless chrome)をDocker上で動かす

以下のエラーに遭遇したときのメモ

Selenium::WebDriver::Error::UnknownError:
  unknown error: DevToolsActivePort file doesn't exist
  (Driver info: chromedriver=2.40.565383 (76257d1ab79276b2d53ee976b2c3e3b9f335cde7),platform=Linux 4.9.87-linuxkit-aufs x86_64)

Dockerのインストール

はじめに、下記サイトからDocker for Macをインストール。

Docker環境構築

Dockerfile、docker-compose.yml、Gemfile、Gemfile.lockの4つを作成

まずはディレクトリmyappを作成
mkdir myapp; cd myapp
Dockerfile
FROM ruby:2.5
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs libappindicator1 fonts-liberation libappindicator3-1 libasound2 libnspr4 libnss3 libxss1 xdg-utils
RUN curl -sL https://deb.nodesource.com/setup_6.x | bash - && apt-get install -y nodejs build-essential && npm install -g phantomjs-prebuilt
RUN npm install -g yarn
RUN rm -rf /var/lib/apt/lists/*
RUN curl -O https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
RUN dpkg -i google-chrome-stable_current_amd64.deb

RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp
docker-compose.yml
version: '3'
services:
  db:
    image: postgres
    volumes:
      - ./tmp/db:/var/lib/postgresql/data
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db
  datastore:
    image: myapp_web
    volumes:
      - /bundle
Gemfile
source 'https://rubygems.org'
gem 'rails', '5.2.0'
Gemfile.lockは以下のコマンドで作成
touch Gemfile.lock

 ここまでのディレクトリ構成は以下

./myapp
├── Dockerfile
├── Gemfile
├── Gemfile.lock
└── docker-compose.yml

rails プロジェクトの作成

myappディレクトリ配下で以下を実行
docker-compose run web rails new . --webpack=vue --force --database=postgresql

rails newによって作成されたGemfileにrspec-railsを追加する

※ rspec-railsを :test のグループに追加する

gem 'rspec-rails'

rspec-railsを追加した後、以下の2つのコマンドを実行する

docker-compose build

DBのセットアップ

config/database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password:
  pool: 5

development:
  <<: *default
  database: myapp_development


test:
  <<: *default
  database: myapp_test

config/database.ymlの設定完了後、以下を実行する

docker-compose run web bundle exec rails db:drop db:create db:migrate

Viewの準備

routesの設定

config/routes.rb
Rails.application.routes.draw do
  root 'application#index'
end

viewの作成

mkdir app/views/application; echo "<%= javascript_pack_tag 'hello_vue' %>" >>  app/views/application/index.html.erb

アプリケーションの起動

rm -rf tmp/pids/server.pid; docker-compose up

localhost:3000にアクセスすると、以下の画面が表示されています。
スクリーンショット 2018-06-09 22.27.52.png

RSpecの準備

以下のコマンドを実行する

docker-compose run web rails generate rspec:install
mkdir spec/system; touch spec/system/index_spec.rb
mkdir spec/support; touch spec/support/capybara.rb

spec/rails_helper.rb の以下の行をコメントアウトする

Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }

Capybaraの設定

spec/support/capybara.rb
Capybara.server = :puma, { Silent: true }

Capybara.register_driver :chrome_headless do |app|
  options = ::Selenium::WebDriver::Chrome::Options.new

  options.add_argument('--headless')
  options.add_argument('--no-sandbox')
  options.add_argument('--disable-dev-shm-usage')
  options.add_argument('--window-size=1400,1400')

  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
end

Capybara.javascript_driver = :chrome_headless

# Setup rspec
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 :chrome_headless
  end
end
spec/system/index_spec.rb
require 'rails_helper'

describe "SystemTest", type: :system, js: true do
  it "hello_vue.js" do
    visit root_path

    expect(page).to have_content 'Hello Vue!'
  end
end

テストを実行する

docker-compose run web rspec spec

参考URL
- https://stackoverflow.com/questions/50610316/capybara-headless-chrome-in-docker-returns-devtoolsactiveport-file-doesnt-exist
- https://github.com/GoogleChrome/puppeteer/issues/1834

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
22