Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

【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

参考文献

jnchito
SIer、社内SEを経て、ソニックガーデンに合流したプログラマ。 「プロを目指す人のためのRuby入門」の著者。 http://gihyo.jp/book/2017/978-4-7741-9397-7 および「Everyday Rails - RSpecによるRailsテスト入門」の翻訳者。 https://leanpub.com/everydayrailsrspec-jp
https://blog.jnito.com/
sonicgarden
「お客様に無駄遣いをさせない受託開発」と「習慣を変えるソフトウェアのサービス」に取り組んでいるソフトウェア企業
http://www.sonicgarden.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした