3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-04-17

✅当方の環境

  • 開発環境 : 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コンテナで使用する Rubyイメージには、システムスペックを実行する際に必要なブラウザ(Google Crome)がインストールされておらず、システムスペックを実行できません。
  • ローカル上のブラウザ(Google Crome)が起動しないのは、コンテナ環境とローカル環境は、あくまで別空間上で発生しているテストだから
  • Rubyイメージに、ブラウザをインストールする方法もありますが、システムスペックは開発環境で実行し、本番環境では実行しないため、イメージ容量が増えてしまう点など、不要なブラウザのインストールは避けたい。
  • そこで、ブラウザを別のコンテナとして起動することで、このエラーを解決しようと思います。

✅解決法

🔴「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

Docker上で、Chomeブラウザを起動させる方法は以上です。
「bundle exec rspec」コマンドで、SYSTEMスペックが正常に動作するか確認してみてください

✅Rspecメモ

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

controllerのテストを実行していく中で、sign_inなどのdeviseのヘルパーを使う機会が出てきます。
なぜRSpecのコードを書いていくときに、deviseのヘルパーが必要かというと、アクセス権限でログインしてないユーザーを許可していない場合があるからです。
ユーザーの編集ページはログインしてないときは、アクセスできないなど、「spec/rails_helper.rbにdevise」のヘルパーを使えるようにコードを追加します。

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

🔴便利な設定

  • 出力結果で「成功」時も出力する設定
.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

✅エラー参考資料

3
2
0

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
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?