『Ruby on Rails 5 速習実践ガイド』：RailsのブラウザによるテストをCentOS7 + Capybara + Selenium で実行する

はじめに

『Ruby on Rails 5 速習実践ガイド』のChapter 5-8 でSystem Specを動かそうとしたら動かせずに詰まってしまいました。

動くようになるまでの手順をまとめます。

環境

• CentOS7（CUI）
• Ruby 2.5.5
• Rails 5.2.3

『Ruby on Rails 5 速習実践ガイド』の通りにやってみる

『Ruby on Rails 5 速習実践ガイド』のChapter 5-8までに書いてある通りの手順で準備してテストを行うと、以下のようにテストが落ちました。

$ bundle exec rspec spec/system/task_spec.rb
Capybara starting Puma...
* Version 3.12.1 , codename: Llamas in Pajamas
* Min threads: 0, max threads: 4
* Listening on tcp://127.0.0.1:36552
F

Failures:

  1) タスク管理機能 一覧機能 ユーザーAがログインしているとき ユーザーAが作成したタスクが表示される
     Got 0 failures and 2 other errors:

     1.1) Failure/Error: visit login_path

          Selenium::WebDriver::Error::UnknownError:
            unknown error: cannot find Chrome binary
              (Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 3.10.0-957.5.1.el7.x86_64 x86_64)



          # ./spec/system/task_spec.rb:12:in `block (4 levels) in <top (required)>'

     1.2) Failure/Error: e = error

          Selenium::WebDriver::Error::UnknownError:
            unknown error: cannot find Chrome binary
              (Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 3.10.0-957.5.1.el7.x86_64 x86_64)



          # /home/vagrant/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/selenium-webdriver-3.141.0/lib/selenium/webdriver/remote/response.rb:69:in `assert_ok'
          # /home/vagrant/.rbenv/versions/2.5.5/lib/ruby/gems/2.5.0/gems/selenium-webdriver-3.141.0/lib/selenium/webdriver/remote/response.rb:32:in `initialize'
        ...(略)

Finished in 3.08 seconds (files took 4.9 seconds to load)
1 example, 1 failure

Failed examples:

rspec ./spec/system/task_spec.rb:18 # タスク管理機能 一覧機能 ユーザーAがログインしているとき ユーザーAが作成したタスクが表示される

この原因は、CentOSにChromeが入っていないためでした。

CentOS7でFirefoxを使えるようにする

CentOSにChromeを入れても良かったのですが、色々調べているとFirefoxを入れる方がスムーズにいきそうに思えたので、Firefoxを入れることにしました。

Xvfbの導入

Seleniumをヘッドレス（GUIのない状態）で動かすためのツール、Xvfbを入れます。

$ sudo yum install xorg-x11-server-Xvfb

ImageMagickの導入

スクリーンショットを撮るために必要なツールです。

$ sudo yum install ImageMagick

Firefoxの導入

Firefoxを入れます。

$ sudo yum install firefox

Gemのインストール

必要なgemを入れます。

@Gemfile

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  gem 'chromedriver-helper'     # => chromeは使いませんが、これを消すと不具合が起きました。
  gem 'headless'
end

gemのインストール

$ bundle

Xvfbの準備

.bash_profileに以下を追加します。

export DISPLAY=:99

その後source ~/.bash_profileで上記の設定を反映してください。

続いて設定が上手くいっているか動作確認します。

$ Xvfb :99 -screen 0 1024x768x24 &
$ firefox &

これでエラーが出なければ問題ありません。

私は以下のようなエラーが出ました。

$ Xvfb :99 -screen 0 1024x768x24 &
[1] 7154
$ firefox &
[2] 7159
$ Failed to open connection to "session" message bus: /usr/bin/dbus-launch terminated abnormally without any error message
Running without a11y support!

Fix: /bin/dbus-launch terminated abnormally without any error message and solution - nixCraftを参考にdbus-x11を入れることで解決しました。

$ sudo yum install dbus-x11

RSpecの設定

CentOS上にてRSpec+Turnip+Capybara+Selenium Webdriver+Headlessでスクリーンショットを撮るまで - Qiitaを参考にRSpecの設定をしました。

@spec_helper.rb

require 'selenium-webdriver'
require 'headless'
require 'capybara/rspec'

...

RSpec.configure do |config|

...

  # selenium-webdriver
  # 名前は任意。今回は selenium_firefox とします。
  Capybara.register_driver :selenium_firefox do |app|
    Capybara::Selenium::Driver.new(app, browser: :firefox)
  end
  Capybara.javascript_driver = :selenium_firefox
  # 常時使用の場合は Capybara.default_driver = :selenium_firefox

  # headless
  config.before(:all) do
    # デフォルトだとウインドウサイズが心もとないので大きくしときます。
    @headless = Headless.new(dimensions: "1920x1080x24")
    @headless.start
  end

  config.after(:all) do
    @headless.destroy
  end
end

Chromeを入れる

準備が完了したので、最初のテストを実行してみます。

すると再びテストが落ちました。

$ bundle exec rspec spec/system/task_spec.rb
F

Failures:

  1) タスク管理機能 一覧機能 ユーザーAがログインしているとき ユーザーAが作成したタスクが表示される
     Got 0 failures and 2 other errors:

     1.1) Failure/Error: visit login_path

          Selenium::WebDriver::Error::UnknownError:
            unknown error: cannot find Chrome binary
              (Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 3.10.0-957.5.1.el7.x86_64 x86_64)



          # ./spec/system/task_spec.rb:12:in `block (4 levels) in <top (required)>'

     1.2) Failure/Error: e = error

          Selenium::WebDriver::Error::UnknownError:
            unknown error: cannot find Chrome binary
              (Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 3.10.0-957.5.1.el7.x86_64 x86_64)

解決のためにChromeを入れるとテストが通るようになりました。Firefoxを使っているはずなのにChromeが必要になる理由はよく分かっていません。

以下のコマンドで入れることができます。

$ curl https://intoli.com/install-google-chrome.sh | bash

ブラウザの文字化けに対応する

ここまでの設定で、テストは正しく通るようになりました。

正しくテストできる状態でテストに失敗すると、失敗した時点でのスクリーンショットを撮ってくれます。

試しにテストを必ず落ちるように書き換えて、テストを再実行してみます。

$ bundle exec rspec spec/system/task_spec.rb
Capybara starting Puma...
* Version 3.12.1 , codename: Llamas in Pajamas
* Min threads: 0, max threads: 4
* Listening on tcp://127.0.0.1:38232
F

Failures:

  1) タスク管理機能 一覧機能 ユーザーAがログインしているとき ユーザーAが作成したタスクが表示される
     Failure/Error: expect(page).to have_content '最初のタスクです'
       expected to find text "最初のタスクです" in "Taskleaf\nタスク一覧\nログアウト\nログインしました。\nタスク一覧\n新規登録\n名称 登録日時\n最初のタスク 2019-04-30 13:54:16 UTC 編集削除"

     [Screenshot]: tmp/screenshots/failures_r_spec_example_groups_nested_nested_a_ユーザーaが作成したタスクが表示される_878.png


     # ./spec/system/task_spec.rb:19:in `block (4 levels) in <top (required)>'

Finished in 24.69 seconds (files took 5.05 seconds to load)
1 example, 1 failure

Failed examples:

rspec ./spec/system/task_spec.rb:18 # タスク管理機能 一覧機能 ユーザーAがログインしているとき ユーザーAが作成したタスクが表示される

これによって以下のようなスクリーンショットが撮影されました。

日本語が文字化けしています。

文字化けしないようにするため、CentOSの「日本語サポート」とは | 敗走王のブログを参考にフォントをインスト―ルします。

$ sudo yum install ipa-gothic-fonts

ちなみに、調べていると日本語対応のために$ sudo yum groupinstall "Japanese Support"をする、と書かれている記事も多いですが、CentOS7ではこれができないので注意してください。

フォントをインストールしてから再度テストを実行すると、文字化けしなくなりました。

※ 撮影されたスクリーンショットはCentOS上に保存されますが、確認はGUIのホストマシンでないと見られません。仮想マシンからホストマシンへのファイルの転送は以下を参考にしてください。

ryotatake.hatenablog.com

さいごに

結局Chromeを入れたので、最初からChromeを使うようにしていたらもっとエラーに出会わなかったのかもしれません。

ブラウザでテストが出来るようにするだけで6時間近くかかってしまったので、この記事がどなたかの役に立てば幸いです。

参考

• CentOS上にてRSpec+Turnip+Capybara+Selenium Webdriver+Headlessでスクリーンショットを撮るまで - Qiita
• CentOSの「日本語サポート」とは | 敗走王のブログ