What is GreenOnion?

No one wants to cry over regression issues in views; does testing HTML and CSS have to be such a back and forth between designers and devs? Why is it that the rest of the stack can have TDD and BDD but not the presentation layer? Well, GreenOnion is here to help you get the same results on testing front-end styling that you've enjoyed in your unit and integration tests up to now.

GreenOnion records 'skins', which are snapshots of the current state of a view (or any page that a browser can navigate to). The first time that it is run on a view, it saves the skin; the second time that it is run, it will compare the first skin to the fresh (new) skin. You can either compare with a diff image that is automatically created, or by an outputted percentage of difference.

Getting Started

You will need to have Qt installed on your machine to build capybara-webkit. GreenOnion is available as a gem, to install it just install the gem:

gem install green_onion

If you're using Bundler, add the gem to Gemfile.

gem 'green_onion'

Command Line Interface

To just run a comparison between skins in your shell, you can use the command below:

green_onion skin [url] [options]

To generate a "skinner" file, which will test a Rails application; use the command below:

green_onion generate [options]

Adding GreenOnion to integration tests with RSpec

For adding GreenOnion to your integration tests in RSpec, add this to your spec_helper.rb file.

require 'green_onion'

GreenOnion.configure do |c|
  c.skins_dir = 'your/path/to/skins'
  c.threshold = 20
end

In a spec, you can place one of the following methods to compare:

GreenOnion.skin_visual("http://localhost")

GreenOnion.skin_percentage("http://localhost", 20)

GreenOnion.skin_visual_and_percentage("http://localhost", 20)

Created By: