Feature Test with Headless Chrome and Capybara
Capybara is one of the most popular feature testing framework in the Ruby on Rails community. I’ve been pretty happy using it with headless browser like PhantomJS.
However, Google recently released Headless Chrome with their 59 version of it’s Chrome browser and it’s performance is really impressive. I decided switch to it on my current project and updated my Capybara configuration to supports it and have been really satisfied with the performance improvement.
ChromeDriver installation
Running your feature specs requires you to install Chrome (v59 and above) and ChromeDriver (v2.30 and above). For MacOs user, you can easily install/update your ChromeDriver via Homebrew by running one of these command in your Terminal:
# install the latest version
brew install chromedriver# update existing chrome driver
brew upgrade chromedriver
You can validate your installation by running:
chromedriver -v# It should display the latest/specify version like so
#=> ChromeDriver 2.33.506106 (8a06c39c4582fbfbab6966dbb1c38a9173bfb1a2)
Capybara Configuration
I normally put my spec configuration in spec/supports/ and import them in spec_helper so that the configuration file could be named properly and my Capybara configuration is not an exception.
This configuration sets Capybara to use headless_chrome as the default JavaScript driver and opens Chrome browser when the DEBUG is export to your ENV. This also enables you to write feature test for pages that is rendered by React.js which is slick!
Update 4/10/17
RSpec has just released 3.7 version last month and the configuration for integration test is a lot cleaner. Here’s the snippet:
Thanks Michael Kohl who updated me with this. ❤
CI configuration
If you have the right version of Chrome and ChromeDriver installed on your CI, you should be able to run your tests normally.
For CircleCI users, like me, the current CircleCI machine uses older version of Chrome and ChromeDriver which does not support Headless Chrome.
To fix this, you need to add a script to remove and reinstall newer Chrome and ChromeDriver. (At least until they update the version)
Wrapping Up
As I told you before, Headless Chrome performance is really satisfying and debugging it with this configuration is a breeze. I really recommend you to try it with your feature spec.
Thank you for reading
My name is Tino Thamjarat. Technical Lead at BASE and Software Engineer at Oozou . I love discussing everything. Business ideas, philosophy, physics, religion, tech, gaming, you name it. I also play League of Legend and a little bit of music once in a while. If you need a website, want to give some advice/comments or just need some guy to talk to, feel free to contact me on my Twitter or Instagram.
