Zenn
📖

【🔴RSpecエラー】「Docker」+「Rails6」環境で、RSpecの結合テスト(SYSTEM）時にブラウザが起動しないについて

2022/08/12に公開
CircleCI
Docker
Rails
#
RSpec
#
system
tech

✅当方の環境

  • 開発環境 : Docker
  • ruby 2.7.5
  • rails 6.1.5

✅Gemの内容（必要なもののみ）

Gemfile
＜中略＞

group :development, :test do
  gem 'pry-rails'
  gem "rspec-rails", "~> 4.0.1"
  gem 'factory_bot_rails', '~> 5.0'
end

＜中略＞

group :test do
  gem 'capybara', '~> 3.28'
  gem 'selenium-webdriver', '~> 3.142'
  # gem 'webdrivers', '~> 4.1'　
　#「webdrivers」は、Docker上では使用しません。（以前は、chromedriver-helperという名称）
end

＜中略＞

✅ よくあるエラー

  • 「Docker」環境でSYSTEMテストを実行する際に発生するエラーを列挙しています。
Selenium::WebDriver::Error::WebDriverError:
Failure/Error: raise Error::WebDriverError, self.class.missing_text unless path
     1.2) Failure/Error: raise Error::WebDriverError, self.class.missing_text unless path

          Selenium::WebDriver::Error::WebDriverError:
            Unable to find chromedriver. Please download the server from
            https://chromedriver.storage.googleapis.com/index.html and place it somewhere on your PATH.
            More info at https://github.com/SeleniumHQ/selenium/wiki/ChromeDriver.

     1.1) Failure/Error: visit root_path

          Selenium::WebDriver::Error::WebDriverError:
            Unable to find chromedriver. Please download the server from
            https://chromedriver.storage.googleapis.com/index.html and place it somewhere on your PATH.
            More info at https://github.com/SeleniumHQ/selenium/wiki/ChromeDriver.

     1.2) Failure/Error: raise Capybara::DriverNotFoundError, "no driver called #{mode.inspect} was found, available drivers: #{other_drivers.join(', ')}"

          Capybara::DriverNotFoundError:
            no driver called :remote_chrome was found, available drivers: :rack_test, :selenium, :selenium_headless, :selenium_chrome, :selenium_chrome_headless

✅ エラー発生原因

✅解決法

🔴「docker-compose.yml」修正

  • 修正する箇所は抜粋しています。
docker-compose.yml
  web_or_app:
    environment:
      RAILS_ENV: development
      TZ: Asia/Tokyo
+     SELENIUM_DRIVER_URL: http://selenium_chrome:4444/wd/hub
    depends_on:
      - db
+     - chrome
+chrome:
+   image: selenium/standalone-chrome-debug
+   ports:
+     - 4444:4444

🔴「Gemfile」修正

  • 修正する箇所は抜粋しています。
Gemfile
group :test do
  gem 'capybara', '~> 3.28'
  gem 'selenium-webdriver', '~> 3.142'
-  # gem 'webdrivers', '~> 4.1'　
-  #「webdrivers」は、Docker上では使用しません。（以前は、chromedriver-helperという名称）
end

🔴「rails_helper.rb」修正

spec/rails_helper.rb
# 初期設定ではコメントアウトされているので、コメントを外す
Dir[Rails.root.join('spec', 'support', '**', '*.rb')].each { |f| require f }

🔴capybaraの設定ファイル作成

  • すでに作成してある方は、スキップ
mkdir spec/support
touch spec/support/capybara.rb

🔴「capybara.rb」の修正

spec/support/capybara.rb
RSpec.configure do |config|
  config.before(:each, type: :system) 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

  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

# Chrome
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メモ

🔴Deviceのユーザ認証をテストする場合

spec/rails_helper.rb
<中略>

RSpec.configure do |config|

#追記
config.include Devise::Test::IntegrationHelpers, type: :system

end

<中略>

🔴SYSTEMスペックテストまでの流れ

  • テストファイル作成
mkdir spec/system
touch spec/system/tops_spec.rb
  • テストファイル修正
spec/system/tops_spec.rb
require 'rails_helper'

RSpec.describe 'Top', type: :system do
  it 'shows greeting' do
    # root_pathへアクセス
    visit root_path
    # ページ内に'Hello World!'が含まれているかを検証
    expect(page).to have_content 'このページはトプページです'
  end
end
  • Rspecテスト実行
bundle exec rspec

🔴便利な設定

  • 出力結果で「成功」時も出力する設定
--require spec_helper
--format documentation #追記
  • specファイルの自動生成機能OFF
config/application.rb
equire_relative 'boot'
require 'rails/all'
Bundler.require(*Rails.groups)

module Myapp
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.

    ### 追記 ######################################
    config.generators do |g|
      g.test_framework :rspec,
                       view_specs: false,
                       helper_specs: false,
                       controller_specs: false,
                       routing_specs: false,
                       request_specs: false
    end
    ##############################################
  end
end
  • Rails初期設定のtestフォルダを削除
rm -rf test
  • スクリーンショット保存機能
tmp/screenshots

✅エラー参考資料

Discussion