【2019年7月版・動画付き】Cloud9上でEveryday Railsの`js: true`付きのフィーチャスペックを実行する手順


はじめに

先ほど、こちらの記事を拝見しました。

【Everyday Rails 6章 JavaScriptテスト】AWS Cloud9でChromeエラーが出たときの対処法 - Qiita

詳しくは上記の記事を読んでいただきたいのですが、簡単にまとめると、


  • Everyday Rails - RSpecによるRailsテスト入門」(僕が翻訳した電子書籍。以下Everyday Rails)の第6章に書いてあるjs: true付きのテストコードをCloud9で動かそうとしたらエラーが起きた


  • 参考記事を読んで対応しようとしたが、それでもダメだった

  • Chromeを使うのはあきらめてPhantomjs + poltergeistを使うようにしたらテストが動いた

というものです。

たしかに、本の中では第2の選択肢としてPhantomjs + poltergeistを紹介しています。

ですが、こちらはすでに開発が止まっているため、できることならChromeを使って実行したいところです。

そこで、この記事ではCloud9上でサンプルコードを動かしながらEveryday Railsを勉強しようとしている読者さんのために、Cloud9上でjs: true付きのフィーチャスペックを実行する手順(Phantomjs + poltergeistではなく、Chromeを使う手順)を紹介します。


実行環境

この記事は以下の環境で動作確認しています。

また、サンプルコードを動かすために参照しているEveryday Railsの版は、最新の変更履歴が2019/04/08の版(chromedriver-helperではなく、webdriversを使っている版)です。


手順


1. tasks_spec.rb を準備する

今回はspec/features/tasks_spec.rbをCloud9上で動かせるようにしていきます。

第6章にある以下の説明文まで、本書の説明通りにサンプルコードを準備してください。


さあ、これで準備が整いました。実際にやってみましょう。新しく作ったスペックを実行してみてください。

$ bin/rspec spec/features/tasks_spec.rb


Cloud9上でこのコマンドを実行すると以下のようなエラーが発生するはずです。

 Failures:

1) Tasks user toggles a task
Failure/Error: visit root_path

Webdrivers::VersionError:
Failed to find Chrome binary or its version.
# /home/ec2-user/.rvm/gems/ruby-2.6.3/gems/webdrivers-4.0.1/lib/webdrivers/chrome_finder.rb:10:in `version'
# 以下省略...

もしくは次のようなエラーになっているかもしれません。

(webdrivers 4.1.0でのみ発生? - 参考

Failures:

1) Tasks user toggles a task
Failure/Error: visit root_path

ArgumentError:
wrong first argument
# /home/ec2-user/.rvm/gems/ruby-2.6.3/gems/webdrivers-4.1.0/lib/webdrivers/system.rb:150:in `popen'
# 以下省略...


2. Chromeブラウザをインストールする

js: true付きのフィーチャスペックを実行するにはChromeブラウザが必要ですが、初期状態のAmazon LinuxにはChromeがインストールされていません。

そこで、ターミナルから以下のコマンドを実行し、Chromeをインストールしてください。

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

この記事の執筆時点ではChrome 75がインストールされました。

Successfully installed google-chrome-stable, Google Chrome 75.0.3770.100 .


3. ヘッドレスモードでChromeを起動できるようにする

Cloud9上ではGUIモードのChromeを起動することはできません。

ですので、代わりにヘッドレスモード(GUIを起動しないモード)でテストを実行するようにします。

spec/support/capybara.rbにあるselenium_chromeselenium_chrome_headlessに変更してください。


spec/support/capybara.rb

-Capybara.javascript_driver = :selenium_chrome

+Capybara.javascript_driver = :selenium_chrome_headless


4. selenium-webdriverとcapybaraを最新版にする

最新のChromeを正常に操作できるよう、selenium-webdriverとcapybaraを最新版にします。

まず、Gemfileを編集してcapybaraのバージョン制限を外します。


Gemfile

 group :test do 

- gem 'capybara', '~> 2.15.2'
+ gem 'capybara'
gem 'webdrivers'
end

続いて以下のコマンドを実行し、selenium-webdriverとcapybaraをアップデートします。

$ bundle update selenium-webdriver capybara

この記事の執筆時点では以下のバージョンにアップデートされました。

$ bundle list | grep 'selenium\|capybara'

* capybara (3.25.0)
* selenium-webdriver (3.142.3)


5. テストが正常に実行できることを確認する

これで準備完了です。

うまくいけば次のようにtasks_spec.rbが正常に実行できるはずです。

$ bin/rspec spec/features/tasks_spec.rb 

Running via Spring preloader in process 18989

Tasks
Capybara starting Puma...
* Version 3.8.2 , codename: Sassy Salamander
* Min threads: 0, max threads: 4
* Listening on tcp://127.0.0.1:35495
user toggles a task

Finished in 2.13 seconds (files took 0.28209 seconds to load)
1 example, 0 failures

ちなみに、上の実行例では.rspecファイルから--warningsを外して、不要な警告が表示されないようにしています。


.rspec

--require spec_helper

--format documentation


動画を使った、より詳しい説明

この記事の内容をもっと詳しく説明した動画をYouTubeにアップしています。

こちらもぜひご覧ください。

https://www.youtube.com/watch?v=wIKW3mIPrdcimage


参考文献