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

追記(2019/07/12)

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

以下の記事を投稿した翌日、翻訳者の伊藤さんより超迅速に対処方法の記事が公開されました!!

ありがとうございます:sob:


はじめに

『Everyday Rails -RSpecによるRailsテスト入門』の第6章「フィーチャスペックで UI をテストする」をCloud9を使って進めていたところ、「JavaScript を使った操作をテストする」付近からChrome周りのエラーが出てしまいテストが通らなくなった。


実行環境


  • Amazon Linux AMI release 2018.03

  • Ruby 2.6.3

  • Chrome 75

エラー内容としては以下の記事のものを一通り確認。

AWS Cloud9でCapybara+Selenium+Chrome設定時のエラーとその対処法について[ Everyday Rails 6章 ]

上記の対応を試すが、通らない。。。


PhantomJSを使うことにした

書籍を読み進めたら「Chrome使えなかったらPhantomJS使ってね」との記述があったので、その通りに追加。


Gemfile

group :test do

gem 'capybara', '~> 2.15.4'
gem 'poltergeist', '~> 1.15.0'
gem 'launchy', '~> 2.4.3'
end


spec/support/capybara.rb

require 'capybara/poltergeist'

Capybara.javascript_driver = :poltergeist

実行するとエラー。

Cliver::Dependency::NotFound:

Could not find an executable ["phantomjs"] on your path.


そもそもCloud9にPhantomjsをインストールする必要があった。。。

結論、以下の記事でインストールできました


Install PhantomJS on Amazon Linux

インストール手順

PhantomJSをインストールする(Amazon Linux)

上の記事を日本語で説明してくださっている記事がありました!


実際のターミナル

$ sudo yum install fontconfig freetype freetype-devel fontconfig-devel libstdc++

Loaded plugins: priorities, update-motd, upgrade-helper
amzn-main | 2.1 kB 00:00:00
amzn-updates | 2.5 kB 00:00:00
1063 packages excluded due to repository priority protections
Package fontconfig-2.8.0-5.8.amzn1.x86_64 already installed and latest version
Package freetype-2.3.11-15.14.amzn1.x86_64 already installed and latest version
Package libstdc++48-4.8.5-28.142.amzn1.x86_64 already installed and latest version
Resolving Dependencies
--> Running transaction check
---> Package fontconfig-devel.x86_64 0:2.8.0-5.8.amzn1 will be installed
---> Package freetype-devel.x86_64 0:2.3.11-15.14.amzn1 will be installed
--> Finished Dependency Resolution

Dependencies Resolved

============================================================================================================
Package Arch Version Repository Size
============================================================================================================
Installing:
fontconfig-devel x86_64 2.8.0-5.8.amzn1 amzn-main 210 k
freetype-devel x86_64 2.3.11-15.14.amzn1 amzn-main 411 k

Transaction Summary
============================================================================================================
Install 2 Packages

Total download size: 621 k
Installed size: 3.0 M
Is this ok [y/d/N]: y
Downloading packages:
(1/2): fontconfig-devel-2.8.0-5.8.amzn1.x86_64.rpm | 210 kB 00:00:00
(2/2): freetype-devel-2.3.11-15.14.amzn1.x86_64.rpm | 411 kB 00:00:00
------------------------------------------------------------------------------------------------------------
Total 1.1 MB/s | 621 kB 00:00:00
Running transaction check
Running transaction test
Transaction test succeeded
Running transaction
Installing : freetype-devel-2.3.11-15.14.amzn1.x86_64 1/2
Installing : fontconfig-devel-2.8.0-5.8.amzn1.x86_64 2/2
Verifying : fontconfig-devel-2.8.0-5.8.amzn1.x86_64 1/2
Verifying : freetype-devel-2.3.11-15.14.amzn1.x86_64 2/2

Installed:
fontconfig-devel.x86_64 0:2.8.0-5.8.amzn1 freetype-devel.x86_64 0:2.3.11-15.14.amzn1

Complete!

$ wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.8-linux-x86_64.tar.bz2

--2019-07-11 06:53:28-- https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.8-linux-x86_64.tar.bz2
Resolving bitbucket.org (bitbucket.org)... 18.205.93.2, 18.205.93.0, 18.205.93.1, ...
Connecting to bitbucket.org (bitbucket.org)|18.205.93.2|:443... connected.
HTTP request sent, awaiting response... 302 Found
Location: https://bbuseruploads.s3.amazonaws.com/ariya/phantomjs/downloads/phantomjs-1.9.8-linux-x86_64.tar.bz2?Signature=1RMK0UmboxwRxkZ2nr12vRCWvQU%3D&Expires=1562829028&AWSAccessKeyId=AKIAIQWXW6WLXMB5QZAQ&versionId=null&response-content-disposition=attachment%3B%20filename%3D%22phantomjs-1.9.8-linux-x86_64.tar.bz2%22 [following]
--2019-07-11 06:53:28-- https://bbuseruploads.s3.amazonaws.com/ariya/phantomjs/downloads/phantomjs-1.9.8-linux-x86_64.tar.bz2?Signature=1RMK0UmboxwRxkZ2nr12vRCWvQU%3D&Expires=1562829028&AWSAccessKeyId=AKIAIQWXW6WLXMB5QZAQ&versionId=null&response-content-disposition=attachment%3B%20filename%3D%22phantomjs-1.9.8-linux-x86_64.tar.bz2%22
Resolving bbuseruploads.s3.amazonaws.com (bbuseruploads.s3.amazonaws.com)... 52.216.82.32
Connecting to bbuseruploads.s3.amazonaws.com (bbuseruploads.s3.amazonaws.com)|52.216.82.32|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 13163325 (13M) [application/x-tar]
Saving to: ‘phantomjs-1.9.8-linux-x86_64.tar.bz2’

phantomjs-1.9.8-linux-x86_ 100%[========================================>] 12.55M 55.2MB/s in 0.2s

2019-07-11 06:53:28 (55.2 MB/s) - ‘phantomjs-1.9.8-linux-x86_64.tar.bz2’ saved [13163325/13163325]

$ sudo mkdir -p /opt/phantomjs

$ bzip2 -d phantomjs-1.9.8-linux-x86_64.tar.bz2

$ sudo tar -xvf phantomjs-1.9.8-linux-x86_64.tar --directory /opt/phantomjs/ --strip-components 1

phantomjs-1.9.8-linux-x86_64/bin/
phantomjs-1.9.8-linux-x86_64/bin/phantomjs
phantomjs-1.9.8-linux-x86_64/examples/
phantomjs-1.9.8-linux-x86_64/examples/scandir.js
phantomjs-1.9.8-linux-x86_64/examples/technews.coffee
phantomjs-1.9.8-linux-x86_64/examples/tweets.js
phantomjs-1.9.8-linux-x86_64/examples/rasterize.coffee
phantomjs-1.9.8-linux-x86_64/examples/pagecallback.js
phantomjs-1.9.8-linux-x86_64/examples/printheaderfooter.js
phantomjs-1.9.8-linux-x86_64/examples/follow.js
phantomjs-1.9.8-linux-x86_64/examples/run-jasmine.coffee
phantomjs-1.9.8-linux-x86_64/examples/module.js
phantomjs-1.9.8-linux-x86_64/examples/waitfor.coffee
phantomjs-1.9.8-linux-x86_64/examples/stdin-stdout-stderr.coffee
phantomjs-1.9.8-linux-x86_64/examples/pizza.js
phantomjs-1.9.8-linux-x86_64/examples/seasonfood.coffee
phantomjs-1.9.8-linux-x86_64/examples/unrandomize.js
phantomjs-1.9.8-linux-x86_64/examples/modernizr.js
phantomjs-1.9.8-linux-x86_64/examples/waitfor.js
phantomjs-1.9.8-linux-x86_64/examples/direction.js
phantomjs-1.9.8-linux-x86_64/examples/arguments.coffee
phantomjs-1.9.8-linux-x86_64/examples/render_multi_url.js
phantomjs-1.9.8-linux-x86_64/examples/run-qunit.js
phantomjs-1.9.8-linux-x86_64/examples/printheaderfooter.coffee
phantomjs-1.9.8-linux-x86_64/examples/ipgeocode.js
phantomjs-1.9.8-linux-x86_64/examples/ipgeocode.coffee
phantomjs-1.9.8-linux-x86_64/examples/version.js
phantomjs-1.9.8-linux-x86_64/examples/movies.js
phantomjs-1.9.8-linux-x86_64/examples/child_process-examples.js
phantomjs-1.9.8-linux-x86_64/examples/loadurlwithoutcss.coffee
phantomjs-1.9.8-linux-x86_64/examples/version.coffee
phantomjs-1.9.8-linux-x86_64/examples/seasonfood.js
phantomjs-1.9.8-linux-x86_64/examples/server.js
phantomjs-1.9.8-linux-x86_64/examples/countdown.js
phantomjs-1.9.8-linux-x86_64/examples/rasterize.js
phantomjs-1.9.8-linux-x86_64/examples/injectme.js
phantomjs-1.9.8-linux-x86_64/examples/run-jasmine.js
phantomjs-1.9.8-linux-x86_64/examples/post.js
phantomjs-1.9.8-linux-x86_64/examples/imagebin.coffee
phantomjs-1.9.8-linux-x86_64/examples/pizza.coffee
phantomjs-1.9.8-linux-x86_64/examples/hello.coffee
phantomjs-1.9.8-linux-x86_64/examples/features.js
phantomjs-1.9.8-linux-x86_64/examples/movies.coffee
phantomjs-1.9.8-linux-x86_64/examples/tweets.coffee
phantomjs-1.9.8-linux-x86_64/examples/injectme.coffee
phantomjs-1.9.8-linux-x86_64/examples/features.coffee
phantomjs-1.9.8-linux-x86_64/examples/colorwheel.coffee
phantomjs-1.9.8-linux-x86_64/examples/walk_through_frames.js
phantomjs-1.9.8-linux-x86_64/examples/printmargins.coffee
phantomjs-1.9.8-linux-x86_64/examples/printmargins.js
phantomjs-1.9.8-linux-x86_64/examples/scandir.coffee
phantomjs-1.9.8-linux-x86_64/examples/loadspeed.coffee
phantomjs-1.9.8-linux-x86_64/examples/printenv.js
phantomjs-1.9.8-linux-x86_64/examples/serverkeepalive.coffee
phantomjs-1.9.8-linux-x86_64/examples/fibo.coffee
phantomjs-1.9.8-linux-x86_64/examples/echoToFile.coffee
phantomjs-1.9.8-linux-x86_64/examples/netlog.js
phantomjs-1.9.8-linux-x86_64/examples/useragent.coffee
phantomjs-1.9.8-linux-x86_64/examples/child_process-examples.coffee
phantomjs-1.9.8-linux-x86_64/examples/weather.coffee
phantomjs-1.9.8-linux-x86_64/examples/direction.coffee
phantomjs-1.9.8-linux-x86_64/examples/module.coffee
phantomjs-1.9.8-linux-x86_64/examples/printenv.coffee
phantomjs-1.9.8-linux-x86_64/examples/simpleserver.js
phantomjs-1.9.8-linux-x86_64/examples/fibo.js
phantomjs-1.9.8-linux-x86_64/examples/imagebin.js
phantomjs-1.9.8-linux-x86_64/examples/colorwheel.js
phantomjs-1.9.8-linux-x86_64/examples/technews.js
phantomjs-1.9.8-linux-x86_64/examples/hello.js
phantomjs-1.9.8-linux-x86_64/examples/echoToFile.js
phantomjs-1.9.8-linux-x86_64/examples/postserver.coffee
phantomjs-1.9.8-linux-x86_64/examples/page_events.coffee
phantomjs-1.9.8-linux-x86_64/examples/postserver.js
phantomjs-1.9.8-linux-x86_64/examples/weather.js
phantomjs-1.9.8-linux-x86_64/examples/countdown.coffee
phantomjs-1.9.8-linux-x86_64/examples/netsniff.coffee
phantomjs-1.9.8-linux-x86_64/examples/detectsniff.js
phantomjs-1.9.8-linux-x86_64/examples/render_multi_url.coffee
phantomjs-1.9.8-linux-x86_64/examples/useragent.js
phantomjs-1.9.8-linux-x86_64/examples/walk_through_frames.coffee
phantomjs-1.9.8-linux-x86_64/examples/post.coffee
phantomjs-1.9.8-linux-x86_64/examples/arguments.js
phantomjs-1.9.8-linux-x86_64/examples/simpleserver.coffee
phantomjs-1.9.8-linux-x86_64/examples/run-qunit.coffee
phantomjs-1.9.8-linux-x86_64/examples/outputEncoding.coffee
phantomjs-1.9.8-linux-x86_64/examples/phantomwebintro.js
phantomjs-1.9.8-linux-x86_64/examples/follow.coffee
phantomjs-1.9.8-linux-x86_64/examples/loadspeed.js
phantomjs-1.9.8-linux-x86_64/examples/page_events.js
phantomjs-1.9.8-linux-x86_64/examples/loadurlwithoutcss.js
phantomjs-1.9.8-linux-x86_64/examples/sleepsort.js
phantomjs-1.9.8-linux-x86_64/examples/sleepsort.coffee
phantomjs-1.9.8-linux-x86_64/examples/netlog.coffee
phantomjs-1.9.8-linux-x86_64/examples/outputEncoding.js
phantomjs-1.9.8-linux-x86_64/examples/serverkeepalive.js
phantomjs-1.9.8-linux-x86_64/examples/phantomwebintro.coffee
phantomjs-1.9.8-linux-x86_64/examples/server.coffee
phantomjs-1.9.8-linux-x86_64/examples/universe.js
phantomjs-1.9.8-linux-x86_64/examples/pagecallback.coffee
phantomjs-1.9.8-linux-x86_64/examples/stdin-stdout-stderr.js
phantomjs-1.9.8-linux-x86_64/examples/detectsniff.coffee
phantomjs-1.9.8-linux-x86_64/examples/unrandomize.coffee
phantomjs-1.9.8-linux-x86_64/examples/netsniff.js
phantomjs-1.9.8-linux-x86_64/ChangeLog
phantomjs-1.9.8-linux-x86_64/README.md
phantomjs-1.9.8-linux-x86_64/LICENSE.BSD
phantomjs-1.9.8-linux-x86_64/third-party.txt

$  sudo ln -s /opt/phantomjs/bin/phantomjs /usr/bin/phantomjs


いざテスト実行

:tada: 成功! :tada:


tasks_spec.rbの実行

$ bin/rspec spec/features/tasks_spec.rb

Running via Spring preloader in process 20323
/home/ec2-user/.rvm/gems/ruby-2.6.3/gems/activerecord-5.1.1/lib/active_record/connection_adapters/abstract_adapter.rb:81: warning: deprecated Object#=~ is called on Integer; it always returns nil

Tasks
You're running an old version of PhantomJS, update to >= 2.1.1 for a better experience.
user toggles a task

Finished in 1.99 seconds (files took 0.30678 seconds to load)
1 example, 0 failures