Configure Goggles with a block passed to the
Goggles.configure method, which will yield a config object to your block for manipulation. The
directory setting must be configured for Goggles to work. You'll also need to provide
sizes that you'd like to compare, but those can be configured with the script.
color attributes default to "blue" and "20%" respectively.
. do |config| config.directory = "/path/to/my/results" config.browsers = [:chrome, :firefox, :phantomjs] config.sizes = [1080, 600] config.color = "red" end
Your Scripts are passed to
Goggles.each as blocks. Goggles will iterate over the block with each combination of browser/browser size configured, and the method will yield a browser object to your script block.
. do |browser| browser.goto "http://www.google.com" browser.text_field(id: "lst-ib").value = "Google" end
Browsers and sizes
You can pass additional browsers or browser sizes to
Goggles.each as arrays. These arguments extend your configuration for this instance's script block only.
. do |c| c.directory = "/some/directory" c.browsers = [:chrome, :firefox] c.sizes =  end .(:phantomjs, 500) do |browser| # Script to be executed with Chrome, Firefox, # and PhantomJS at widths of 1080 and 500. end . do |browser| # Script to be executed with Chrome and # Firefox at a width of 1080. end
Your script blocks should include the
Watir::Browser#grab_screenshot method, which has been patched onto the browser objects yielded to your blocks. Simply give the method a description argument and the screenshot will be saved to your configured directory.
. do |browser| browser.goto "http://www.google.com" browser.grab_screenshot "homepage" end
Closing the browser
There's no need to explicitly close the browser objects in your script blocks. Goggles will handle that.
Screenshots are saved to your configured directory. Screenshot comparison results are saved to a sub-folder based on the screenshot description and browser size. Results include a diff image and data file.
. do |c| c.directory = "/goggles/results" c.browsers = [:chrome, :firefox, :phantomjs] c.sizes = [1080, 600] end . do |browser| browser.goto "http://www.google.com" browser.grab_screenshot "google" end
/goggles/results |- google_1080_chrome.png |- google_1080_firefox.png |- google_1080_phantomjs.png |- google_600_chrome.png |- google_600_firefox.png |- google_600_phantomjs.png |- /google_1080 |- chrome_firefox_data.txt |- chrome_firefox_diff.png |- chrome_phantomjs_data.txt |- chrome_phantomjs_diff.png |- firefox_phantomjs_data.txt |- firefox_phantomjs_diff.png |- /google_600 |- chrome_firefox_data.txt |- chrome_firefox_diff.png |- chrome_phantomjs_data.txt |- chrome_phantomjs_diff.png |- firefox_phantomjs_data.txt |- firefox_phantomjs_diff.png
Road to 1.0.0
I've made a lot of changes recently and bumped the version up to 0.9.1. Check the CHANGELOG for more information about those changes.
- TravisCI integration for specs (but not features)
$ brew install imagemagick
$ sudo apt-get install imagemagick
- Windows: Download installer and add to your PATH.
Add this line to your application's Gemfile:
And then execute:
Or install it yourself with:
$ gem install goggles
- Fork it ( http://github.com/jdenen/goggles/fork )
- Create your feature branch (
git checkout -b my-new-feature)
- Commit your changes (
git commit -am 'Add some feature')
- Push to the branch (
git push origin my-new-feature)
- Create new Pull Request
Questions, Comments, Concerns
Find me on Twitter (@jpdenen) or write up an issue.