bbc/wraith

Wraith — A responsive screenshot comparison tool

Wraith is a screenshot comparison tool, created by developers at BBC News.

Documentation • Source • Responsive News Website

What is it?

Wraith uses a headless browser to create screenshots of webpages on different environments (or at different moments in time) and then creates a diff of the two images; the affected areas are highlighted in blue.

Documentation

For instructions on how to install, set up and use Wraith and all of its features, visit the Wraith documentation.

A brief overview of how Wraith works is provided below.

Wraith modes

There are several ways in which Wraith can be used:

1. Comparison of 2 domains (wraith capture). There are also some specialist options within this mode:
   • Spidering 2 domains for changes (wraith capture when no paths property is provided in the configuration file)
   • Running several comparisons at once (wraith multi_capture)
2. Comparing the same domain over time (wraith history, then wraith latest)

Whichever mode you decide to run Wraith in, the process it follows is generally the same:

• takes screenshots of your webpages
• runs a comparison task across them
• outputs a diff PNG file comparing the two images, and a data.txt file which contains the percentage of pixels that have changed
• packages all of this up into a gallery.html, ready for you to view
• if any screenshot's diff is above the threshold you specified in your configuration file, the task exits with a system error code (useful for CI)
• the failed screenshot will also be highlighted in the gallery

Requirements

ImageMagick is required to compare the screenshots and crop images.

Wraith also requires at least one of these headless browsers:

• PhantomJS
• CasperJS (which can be used to target specific selectors)
• SlimerJS
• Chrome (Currently using Selenium WebDriver + Chromedriver for Chrome; Can target specific selectors)

Contributing

Please read how to contribute to Wraith.

License

Wraith is available to everyone under the terms of the Apache 2.0 open source license. Take a look at Wraith's LICENSE file.

Credits

• Dave Blooman
• John Cleveley
• Simon Thulbourn
• Chris Ashton

Selenium-Wraith

Anyone interested in integrating selenium capability with Wraith should check out Selenium-Wraith (maintained by Mathew Hall), which was forked from BBC's Wraith on 16/04/14 and adds the following capabilities:

1. Selenium integration, both running locally on a desktop or on a selenium grid
2. Browser to browser screenshot comparison
3. Page component-based comparison

wraith's Issues

Enhancement: Render specific resolutions only

Awesome tool. Here is my suggestion:

I would like to render a website without having to make a comparison. Just running the script which generates all the pages for one domain only and thus no comparison (adding one parameter when invoking script?)

My use case is simple; when I create a website I would like to have a preview of all the specified sizes. In that way I don't have to manually re-size the browser.

What do you reckon?

Does it exists headless browser using Trident compatible with Wraith?

I understood that I can switch PhantomJS for SlimerJS and thus use Gecko instead of Webkit. My question is, what about IE? If it exists such headless browser, can we have a compatibility with Wraith?

(I didn't find any other headless browser using Trident on Google).

Proxy Error

Thanks for the awesome tool.
However I was testing it behind the firewall with a local site, but I am getting proxy error

Has anyone come across such a problem ?

Thanks in advance
Subbu

Installation errors: mavericks / nokogiri

I've had a couple errors on Mac's new Mavericks OS.

First off, I ran into trouble with my Ruby version, which is 2.0+ in Mavericks. I solved this by deleting .ruby-version and gemfile.lock. Now I can't get past the nokogiri part. This is what happens:

$ bundle install
Fetching gem metadata from https://rubygems.org/..........
Fetching gem metadata from https://rubygems.org/..
Resolving dependencies...
Enter your password to install the bundled RubyGems to your system:
Using rake (10.1.0)
Using mini_portile (0.5.2)
Installing nokogiri (1.6.0)
Gem::InstallError: nokogiri requires Ruby version >= 1.9.2.
An error occurred while installing nokogiri (1.6.0), and Bundler cannot continue.
Make sure that `gem install nokogiri -v '1.6.0'` succeeds before bundling.

So, I install nokogiri:

$ sudo gem install nokogiri
Building native extensions.  This could take a while...
Successfully installed nokogiri-1.6.0
Parsing documentation for nokogiri-1.6.0
unable to convert "\xCF" from ASCII-8BIT to UTF-8 for lib/nokogiri/nokogiri.bundle, skipping
1 gem installed

I tried to find a fix for that "unable to convert...", but couldn't find one. nokogiri is definitely installed though:

$ which nokogiri
/usr/bin/nokogiri
5TS206100581AMD:wraith scottnath$ nokogiri --version
# Nokogiri (1.6.0)
    ---
    warnings: []
    nokogiri: 1.6.0
    ruby:
      version: 2.0.0
      platform: universal.x86_64-darwin13
      description: ruby 2.0.0p247 (2013-06-27 revision 41674) [universal.x86_64-darwin13]
      engine: ruby
    libxml:
      binding: extension
      source: packaged
      libxml2_path: /Library/Ruby/Gems/2.0.0/gems/nokogiri-1.6.0/ports/x86_64-apple-darwin13.0.0/libxml2/2.8.0
      libxslt_path: /Library/Ruby/Gems/2.0.0/gems/nokogiri-1.6.0/ports/x86_64-apple-darwin13.0.0/libxslt/1.1.26
      compiled: 2.8.0
      loaded: 2.8.0

Regardless, tried to bundle install again:

$ sudo bundle install
Password:
Fetching gem metadata from https://rubygems.org/..........
Fetching gem metadata from https://rubygems.org/..
Resolving dependencies...
Using rake (10.1.0)
Using mini_portile (0.5.2)
Installing nokogiri (1.6.0)
Gem::InstallError: nokogiri requires Ruby version >= 1.9.2.
An error occurred while installing nokogiri (1.6.0), and Bundler cannot continue.
Make sure that `gem install nokogiri -v '1.6.0'` succeeds before bundling.

Any help for this possibly?

thanks,
Scott

`wraith setup` fails

$ wraith setup
WARN: Unresolved specs during Gem::Specification.reset:
      rake (>= 0)
      nokogiri (>= 1.3.0)
WARN: Clearing out unresolved specs.
Please report a bug if this causes problems.
/Users/jasonkarns/.rbenv/versions/2.0.0-p195/lib/ruby/gems/2.0.0/gems/wraith-1.1.4/bin/wraith:6:in `require': cannot load such file -- wraith/cli (LoadError)
        from /Users/jasonkarns/.rbenv/versions/2.0.0-p195/lib/ruby/gems/2.0.0/gems/wraith-1.1.4/bin/wraith:6:in `<top (required)>'
        from /Users/jasonkarns/.rbenv/versions/2.0.0-p195/bin/wraith:23:in `load'
        from /Users/jasonkarns/.rbenv/versions/2.0.0-p195/bin/wraith:23:in `<main>'

On ruby 2.0.0-p195

FYI: Wraith + PhantomJS issue on machines w/ Nvidia Optimus drivers

All -

Just an FYI that you may encounter an issue running Wraith + PhantomJS if you have Nvidia Optimus drivers installed on your machine. Took me a bit of time to narrow down the issue yesterday before I found this thread (https://code.google.com/p/phantomjs/issues/detail?id=845#c26) that describes the root cause and resolution.

Not a Wraith issue, but it will cause PhantomJS to hang, thus rendering Wraith unusable. Is this something we could add in to a FAQ/Known Issues section in the docs?

Doesn't work with sites behind a login

For instance, a private dev site.

Wraith needs a cool icon!

I don't think I'm qualified to make it (barely graduated above stick-figure art), but it would definitely help make the case for Wraith when convincing my client of the need to incorporate testing.

Add Xvfb option in

To enable the use of slimerJS to run 'headlessly' Xvfb needs to be installed and the method capture_page_image in wraith.rb needs to have xvfb-run prepended to the shell command. I think we should have an option in the config.yaml along the lines of.

xvfb:
  on: true
  location: "/usr/bin/"

What do you think @DaveBlooman ? (I use this on the CentOS 6 sandbox)

processing 'home' '/' undefined method `+' for nil:NilClass

PS C:\wraith-master> rake --trace
** Invoke default (first_time)
** Invoke reset_shots_folder (first_time)
** Execute reset_shots_folder
** Invoke save_images (first_time)
** Execute save_images
processing 'home' '/'
rake aborted!
undefined method +' for nil:NilClass C:/wraith-master/lib/wraith_manager.rb:46:inblock in save_images'
C:/wraith-master/lib/wraith_manager.rb:36:in each' C:/wraith-master/lib/wraith_manager.rb:36:insave_images'
C:/wraith-master/Rakefile:20:in block in <top (required)>' C:/Ruby193/lib/ruby/1.9.1/rake/task.rb:205:incall'
C:/Ruby193/lib/ruby/1.9.1/rake/task.rb:205:in block in execute' C:/Ruby193/lib/ruby/1.9.1/rake/task.rb:200:ineach'
C:/Ruby193/lib/ruby/1.9.1/rake/task.rb:200:in execute' C:/Ruby193/lib/ruby/1.9.1/rake/task.rb:158:inblock in invoke_with_call_chain'
C:/Ruby193/lib/ruby/1.9.1/monitor.rb:211:in mon_synchronize' C:/Ruby193/lib/ruby/1.9.1/rake/task.rb:151:ininvoke_with_call_chain'
C:/Ruby193/lib/ruby/1.9.1/rake/task.rb:176:in block in invoke_prerequisites' C:/Ruby193/lib/ruby/1.9.1/rake/task.rb:174:ineach'
C:/Ruby193/lib/ruby/1.9.1/rake/task.rb:174:in invoke_prerequisites' C:/Ruby193/lib/ruby/1.9.1/rake/task.rb:157:inblock in invoke_with_call_chain'
C:/Ruby193/lib/ruby/1.9.1/monitor.rb:211:in mon_synchronize' C:/Ruby193/lib/ruby/1.9.1/rake/task.rb:151:ininvoke_with_call_chain'
C:/Ruby193/lib/ruby/1.9.1/rake/task.rb:144:in invoke' C:/Ruby193/lib/ruby/1.9.1/rake/application.rb:116:ininvoke_task'
C:/Ruby193/lib/ruby/1.9.1/rake/application.rb:94:in block (2 levels) in top_level' C:/Ruby193/lib/ruby/1.9.1/rake/application.rb:94:ineach'
C:/Ruby193/lib/ruby/1.9.1/rake/application.rb:94:in block in top_level' C:/Ruby193/lib/ruby/1.9.1/rake/application.rb:133:instandard_exception_handling'
C:/Ruby193/lib/ruby/1.9.1/rake/application.rb:88:in top_level' C:/Ruby193/lib/ruby/1.9.1/rake/application.rb:66:inblock in run'
C:/Ruby193/lib/ruby/1.9.1/rake/application.rb:133:in standard_exception_handling' C:/Ruby193/lib/ruby/1.9.1/rake/application.rb:63:inrun'
C:/Ruby193/bin/rake:32:in `

'
Tasks: TOP => default => save_images

PS C:\wraith-master> ruby -v
ruby 1.9.3p194 (2012-04-20) [i386-mingw32]

*** LOCAL GEMS ***

bigdecimal (1.1.0)
blankslate (2.1.2.4)
chunky_png (1.2.6)
colorize (0.5.8)
compass (0.12.2)
csscss (1.0.0)
fssm (0.2.9)
image_size (1.1.3)
imagesize (0.1.1)
io-console (0.3)
json (1.5.4)
minitest (2.5.1)
parslet (1.5.0)
rake (0.9.2.2)
rdoc (3.9.4)
rubygems-update (1.8.24
sass (3.2.1)
PS C:\wraith-master>

the percentage difference?

Hi there,

Is there any way to get the difference of percentages of the images? Like how huddle works?
Huddle : http://huddle.github.io/Resemble.js/

Cropping fails with TypeError

Running wraith capture config, I get the following after it goes through a bunch of "cropping images" messages:

/Users/trodrigues/.rbenv/versions/1.9.3-p429/lib/ruby/gems/1.9.1/gems/wraith-1.1.4/lib/wraith/crop.rb:45:in `initialize': can't convert nil into String (TypeError)
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/lib/ruby/gems/1.9.1/gems/wraith-1.1.4/lib/wraith/crop.rb:45:in `open'
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/lib/ruby/gems/1.9.1/gems/wraith-1.1.4/lib/wraith/crop.rb:45:in `find_heights'
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/lib/ruby/gems/1.9.1/gems/wraith-1.1.4/lib/wraith/crop.rb:24:in `compare_height'
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/lib/ruby/gems/1.9.1/gems/wraith-1.1.4/lib/wraith/crop.rb:12:in `crop'
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/lib/ruby/gems/1.9.1/gems/wraith-1.1.4/lib/wraith/crop.rb:32:in `crop_images'
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/lib/ruby/gems/1.9.1/gems/wraith-1.1.4/lib/wraith/cli.rb:60:in `crop_images'
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/lib/ruby/gems/1.9.1/gems/wraith-1.1.4/lib/wraith/cli.rb:89:in `capture'
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/lib/ruby/gems/1.9.1/gems/thor-0.18.1/lib/thor/command.rb:27:in `run'
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/lib/ruby/gems/1.9.1/gems/thor-0.18.1/lib/thor/invocation.rb:120:in `invoke_command'
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/lib/ruby/gems/1.9.1/gems/thor-0.18.1/lib/thor.rb:363:in `dispatch'
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/lib/ruby/gems/1.9.1/gems/thor-0.18.1/lib/thor/base.rb:439:in `start'
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/lib/ruby/gems/1.9.1/gems/wraith-1.1.4/bin/wraith:7:in `<top (required)>'
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/bin/wraith:23:in `load'
        from /Users/trodrigues/.rbenv/versions/1.9.3-p429/bin/wraith:23:in `<main>'

My config looks like this:

#Headless browser option
browser:
  webkit: "phantomjs"
  # gecko: "slimerjs"

#If you want to have multiple snapping files, set the file name here
snap_file: "javascript/snap.js"

# Type the name of the directory that shots will be stored in
directory:
  - 'shots'

# Add only 2 domains, key will act as a label
domains:
  production: "https://www.contentful.com"
  development: "http://www.localdevelopmentdomain.com:8888"

#Type screen widths below, here are a couple of examples
screen_widths:
  - 320
  - 600
  - 768
  - 1024
  - 1280

#Type page URL paths below, here are a couple of examples
paths:
  home: /
  tour: /tour
  plans: /plans
  blog: /blog
  team: /team
  jobs: /jobs
  contact: /contact
  terms: /terms
  privacy: /privacy

# If you don't want to name the paths explicitly you can use a yaml
# collection as follows, and names will be derived by replacing / with _
#
# paths:
#  - /imghp
#  - /maps

#Amount of fuzz ImageMagick will use
fuzz: '20%'

#Set the number of days to keep the site spider file
spider_days:
  - 10

Run wraith on a list of images?!

Hey, I wanted to see if there is any other way to create a diff image, other than writing a new config file for each and every image that I want to compare.

Thanks

Image dimensions differ --> error. Add config option for threshold

Sometimes the snapshot image dimensions differ with few pixel, mainly in y direction.
This results in a failure to compute the third image for diff.

Would it be possible to add a parameter in the config.yml for setting a threshold before the dimension difference is considered an error?

The value would default to 0, requiring dimensions to match. It could be defined as percentage when suffixed %, or as pixels by default.

What about modules screenshots ?

Hi,

Thanks for this tool, it seems great and really simpler than things like PhantomCSS.

Anyway, I am trying to patch Poltergeist to allow screenshot of a given page module (by its css selector), because I would like for example to test a living styleguide, and user interaction with Capybara.

I have a very little experience with visual regression testing, I'm wondering what do you think about that ?

Thanks

Gerrit / Jenkins intergration

More of a question here.

Currently using Jenkins and Gerrit for CI and if any one could share an overview of there process on integrating it with a system like this. Is any one using wraith like this running on individual patches or is this best suited to nightly builds ?

Crop images command fails

Running ruby-2.0.0-p247 and PhantomJS 1.9.2

Error occurs when running full capture task or crop command individually.

Full stack trace below:

cropping images
 /Users/matt/Code/wraith/lib/wraith/wraith.rb:72:in ``': No such file or directory - convert (Errno::ENOENT)
    from /Users/matt/Code/wraith/lib/wraith/wraith.rb:72:in `crop_images'
    from /Users/matt/Code/wraith/lib/wraith/crop.rb:32:in `crop_images'
    from /Users/matt/Code/wraith/lib/wraith/cli.rb:61:in `crop_images'
    from /Users/matt/Code/wraith/lib/wraith/cli.rb:90:in `capture'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/thor-0.18.1/lib/thor/command.rb:27:in `run'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/thor-0.18.1/lib/thor/invocation.rb:120:in `invoke_command'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/thor-0.18.1/lib/thor.rb:363:in `dispatch'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/thor-0.18.1/lib/thor/base.rb:439:in `start'
    from /Users/matt/Code/wraith/bin/wraith:7:in `<top (required)>'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/bin/wraith:23:in `load'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/bin/wraith:23:in `<main>'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/bin/ruby_executable_hooks:15:in `eval'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/bin/ruby_executable_hooks:15:in `<main>'

I'll have a look into it but I thought I'd drop the error in here first for reference.

`config_path` would be more useful than `config_name` in CLI

I think running wraith [task] [config_name] is a little too opinionated. It is unclear that running wraith capture my-config will attempt to load the configuration file at configs/my-config.yml. It may be more flexible (and arguably user friendly) if the option could be more explicit so the user would run wraith capture configs/my-config.yml instead.

No such file to load

Im newbie on rake, any idea how to solve that?

~/lab/wraith ᐅ rake --trace
rake aborted!
no such file to load -- image_size
/home/rafael/lab/wraith/lib/wraith_manager.rb:2:in require' /home/rafael/lab/wraith/lib/wraith_manager.rb:2 /home/rafael/lab/wraith/Rakefile:3:inrequire'
/home/rafael/lab/wraith/Rakefile:3
/usr/lib/ruby/vendor_ruby/rake/rake_module.rb:25:in load' /usr/lib/ruby/vendor_ruby/rake/rake_module.rb:25:inload_rakefile'
/usr/lib/ruby/vendor_ruby/rake/application.rb:501:in raw_load_rakefile' /usr/lib/ruby/vendor_ruby/rake/application.rb:82:inload_rakefile'
/usr/lib/ruby/vendor_ruby/rake/application.rb:133:in standard_exception_handling' /usr/lib/ruby/vendor_ruby/rake/application.rb:81:inload_rakefile'
/usr/lib/ruby/vendor_ruby/rake/application.rb:65:in run' /usr/lib/ruby/vendor_ruby/rake/application.rb:133:instandard_exception_handling'
/usr/lib/ruby/vendor_ruby/rake/application.rb:63:in `run'
/usr/bin/rake:27

Images for first domain failing to be created

I'm running on OS X 10.9 with the latest Phantom JS and ImageMagick installed through Homebrew (I reinstalled these after installing 10.9).

Upon running the screenshots for the first domain seem to be failing, but those for the second domain work?

Console output

wraith:master$ rake
processing '/' ''
2013-11-19 12:48:53.185 phantomjs[28161:d07] *** WARNING: Method userSpaceScaleFactor in class NSView is deprecated on 10.7 and later. It should not be used in new applications. Use convertRectToBacking: instead. 
Snapping http://domain1.dev/ at width 1280
2013-11-19 12:49:01.184 phantomjs[28164:d07] *** WARNING: Method userSpaceScaleFactor in class NSView is deprecated on 10.7 and later. It should not be used in new applications. Use convertRectToBacking: instead. 
Snapping http://domain2.dev/ at width 1280
cropping images


Saved diff
convert: improper image header `shots/_/1280_phantomjs_domain1.png' @ error/png.c/ReadPNGImage/4002.
convert: no images defined `shots/thumbnails/_/1280_phantomjs_domain1.png' @ error/convert.c/ConvertImageCommand/3127.
ruby create_gallery.rb shots
Done!

config.yaml

#Headless browser option
browser:
  webkit: "phantomjs"
  # gecko: "./slimerjs"

#If you want to have multiple snapping files, set the file name here
snap_file: "snap.js"

# Type the name of the directory that shots will be stored in
directory:
  - 'shots'

# Add only 2 domains, key will act as a label
domains:
  domain1: "http://domain1.dev"
  domain2: "http://domain2.dev"

#Type screen widths below, here are a couple of examples
screen_widths:
  - 1280

#Type page URL paths below, here are a couple of examples
paths:
  - /

# If you don't want to name the paths explicitly you can use a yaml
# collection as follows, and names will be derived by replacing / with _
#
# paths:
#  - /imghp
#  - /maps

#Set the number of days to keep the site spider file
spider_days:
  - 10

shots/_/1280_phantomjs_domain1.png

compare: improper image header `shots/_/1280_phantomjs_domain1.png' @ error/png.c/ReadPNGImage/4002.

shots/_/1280_phantomjs_domain2.png

The screenshot, as expected

Exclude area from diff ?

Hello,
I have many captcha in my website and i would specify an area to be excluded from diff.
Maybe by adding a css class like ".captcha" in the config.yaml file ?

exclude_from_diff:

• .captcha
• . date

Thank you in advance for your response.

Feature : compare webkit and geeko

I'm thinking making it possible to compare Webkit and Geeko screenshots to get a broader overview of the differences, running phantom and slimerjs together. The way I think this could work would be to do a regular compare job, outputting to /geekoshots & /webkitshots then the final compare shots would be in /browsershots.

I'm looking at this from a BBC point of view, as we could benefit from more Geeko testing. The main reason for raising a question for this feature is that Slimerjs isn't headless, or at least, not out of the box headless on newer versions of OSX.

What are peoples thoughts on mixing headless testing with non headless testing?

undefined method `>' for nil:NilClass in crop_images task

OS: Debian Wheezy
Ruby: 2.0.0-p247 (from rbenv)
Rake: 10.1.0
libicu-dev: 4.8.1.1-12
imagemagick: 8:6.7.7.10-5
imagesize: 0.1.1

$ rake crop_images --trace
** Invoke crop_images (first_time)
** Execute crop_images
rake aborted!
undefined method `>' for nil:NilClass
/home/jviotti/wraith/Rakefile:88:in `block (3 levels) in '
/home/jviotti/wraith/Rakefile:84:in `open'
/home/jviotti/wraith/Rakefile:84:in `block (2 levels) in '
/home/jviotti/wraith/Rakefile:81:in `open'
/home/jviotti/wraith/Rakefile:81:in `block in '
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/task.rb:236:in `call'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/task.rb:236:in `block in execute'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/task.rb:231:in `each'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/task.rb:231:in `execute'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/task.rb:175:in `block in invoke_with_call_chain'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/2.0.0/monitor.rb:211:in `mon_synchronize'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/task.rb:168:in `invoke_with_call_chain'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/task.rb:161:in `invoke'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/application.rb:149:in `invoke_task'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/application.rb:106:in `block (2 levels) in top_level'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/application.rb:106:in `each'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/application.rb:106:in `block in top_level'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/application.rb:115:in `run_with_threads'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/application.rb:100:in `top_level'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/application.rb:78:in `block in run'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/application.rb:165:in `standard_exception_handling'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/lib/rake/application.rb:75:in `run'
/home/jviotti/.rbenv/versions/2.0.0-p247/lib/ruby/gems/2.0.0/gems/rake-10.1.0/bin/rake:33:in `'
/home/jviotti/.rbenv/versions/2.0.0-p247/bin/rake:23:in `load'
/home/jviotti/.rbenv/versions/2.0.0-p247/bin/rake:23:in `'
Tasks: TOP => crop_images

According to the errors, the undefined method comes from this comparison:

88 if base_height > compare_height

I'm not very familiar with Ruby buy maybe some operator overloading error?

ignores REM, works with PX for @media

My default grid setup uses REM for mediaQueries based on a mobile first approach with the smallest size not inside a mediaQuery.

All the screen shots render at the smallest size and ignore all the larger increments. If I switch to PX sizes it works fine.

Is this a wraith issue or SlimerJS, works fine in firefox manually?

Example of Gem Usage

Could we have an example of usage as a gem documented in the readme?

At the moment if I:

Gemfile:

source 'https://rubygems.org'
gem 'wraith'

app.rb

require 'wraith/manager'

I get:

LoadError: no such file to load -- wraith/manager

Does this work with Windows directories?

Wondering about "/" versus "" when cropping and generating thumbnails on a Windows machine. I haven't been able to solve the "Invalid Parameters" errors I get at runtime. Here's an example with your sample config values:

$ rake --trace
** Invoke default (first_time)
** Invoke config (first_time)
** Execute config
** Invoke default
** Invoke reset_shots_folder (first_time)
** Execute reset_shots_folder
** Invoke save_images (first_time)
** Execute save_images
processing 'home' '/'
Snapping http://www.live.bbc.co.uk/russian/ at width 1024
Snapping http://www.live.bbc.co.uk/news/ at width 1024
processing 'uk_index' '/uk'
Snapping http://www.live.bbc.co.uk/russian/uk at width 1024
Snapping http://www.live.bbc.co.uk/news/uk at width 1024
** Invoke crop_images (first_time)
** Execute crop_images
cropping images
Invalid Parameter - /home

cropping images
Invalid Parameter - /uk_index

** Invoke compare_images (first_time)
** Execute compare_images
** Invoke generate_thumbnails (first_time)
** Execute generate_thumbnails
Invalid Parameter - /home
Invalid Parameter - /home
Invalid Parameter - /uk_index
Invalid Parameter - /uk_index
** Invoke generate_gallery (first_time)
** Execute generate_gallery
ruby create_gallery.rb shots
** Execute default
Done!

Compare against different folders

Add the ability to use different folder locations in comparison

port to node with grunt support?

This seems to be primarily a front-end tool. As such, it might make more sense as a node utility (especially with grunt integration). This would make wraith useful outside of the ruby world.

Would a node port be welcomed?

Proper process for adding content to Wraith Wiki?

Wanted to see if there was a specific process in place that should be followed for adding content to the Wraith wiki on github. I have several notes that I'd be more than happy to add (questions that I found answers to while working through the code).

Wraith is not loading the browser completely

Hi,

I am trying to take screen shot of our style guides and compare the changes. But due to lazy loading wraith takes screenshots even before the page completely loads. I want to synchronize this issue. How can I scroll down the page to load the complete page and then take screenshot. Please help me. And should I do the changes in Snap.js?

Gallery.html only had one of 2 things on left and only "0px" instead of 5 choices

I followed your instructions (I think) and have 2 web pages (local,
sandbox); 5 default resolutions, and 1 path ('/') and I get:

• "home" on the left side instead of "local" and "sandbox"
• Only "0px" instead of 5 diff px's for each resolution.

Config.yaml file gist; https://gist.github.com/jasnow/7347941
Gist of run: https://gist.github.com/anonymous/7347467
Gallery.html gist: https://gist.github.com/jasnow/7347956

Thanks.

installation problem

I have read the article about wraith and came here to have a try. But all the files I have downloaded are something I don't understand except a 'snap.js' and the installation description is too simple to follow. I even don't know where this tool works, linux or windows? If linux and if my linux machine doesn't have a dns parser, how should I install this tool? Would you offer a more detailed instruction? Thanks a lot.

undefined method `each' for nil:NilClass

Hi,

Any ideas why I would get this when running rake?

This is part of the trace.

(in /Users/steve/Sites/wraith)
** Invoke default (first_time)
** Invoke reset_shots_folder (first_time)
** Execute reset_shots_folder
** Invoke save_images (first_time)
** Execute save_images
rake aborted!
undefined method `each' for nil:NilClass
/Users/steve/Sites/wraith/Rakefile:89

Thanks,

"compare" fails with missing diff

I'm trying to get the examples running locally, and stuck at the "compare" stage. The screenshots are being generated, but it appears the diff files are not being generated.

Imagemagick is installed, as is PhantomJS, both using Brew on OSX. The error I'm seeing is:

wraith compare config    
/blah/.../ruby-2.0.0-p247/lib/ruby/2.0.0/open-uri.rb:36:in `initialize': No such file or directory - shots/home/1024_phantomjs_diff.png (Errno::ENOENT)

Problems with .ruby-version

firehouse:wraith frodsan$ cat .ruby-version
1.9.3
firehouse:wraith frodsan$ ruby -v
rbenv: version `1.9.3' is not installed

I need to specify the patch version for rbenv. Are you using rvm?

https://github.com/sstephenson/rbenv/wiki#what-is-allowed-in-a-ruby-version-file

Missing robotex gem dependency

When I ran:

bundle install
rake

I received a error about the missing gem 'robotex'.

I added it to the gemfile and ran bundle install again and it worked fine.

Readme suggestion

In the readme, you list required software you need to run wraith. I didn't know that some of it (at least ImageMagick) is installed via your curl script if you don't have it. Can you note that (and which programs it installs if they're missing)? Saves having to run around and install on your own beforehand.

Files used by tests don't exist

I get these errors when I run rspec:

Failures:

  1) Wraith When capturing an image 
     Failure/Error: When(:image_size) { ImageSize.path(test_image1).size }
     Errno::ENOENT:
       No such file or directory - shots/test/test1.png
     # ./spec/wraith_spec.rb:35:in `block (3 levels) in <top (required)>'

  2) Wraith When comparing images 
     Failure/Error: ImageSize.path(diff_image).size
     Errno::ENOENT:
       No such file or directory - shots/test/test_diff.png
     # ./spec/wraith_spec.rb:45:in `block (3 levels) in <top (required)>'

Doesn't work with Webfonts

This is really cool, thanks for releasing it.

However, it doesn't work with webfonts. I've pointed it at sites using Google Fonts and Typekit, and it consistently degrades to the fallbacks.

Capture fails when paths are specified as a list

When specifying paths as a YAML list (as indicated in the generated config file, https://github.com/BBC-News/wraith/blob/master/templates/configs/config.yaml#L31) the capture fails. The folders are created successfully.

Workaround is to simply specify paths as an associative array.

Stack trace:

Creating Folders
/Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/wraith-1.1.3/lib/wraith/save_images.rb:42:in `+': no implicit conversion of nil into String (TypeError)
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/wraith-1.1.3/lib/wraith/save_images.rb:42:in `base_urls'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/wraith-1.1.3/lib/wraith/save_images.rb:55:in `block in save_images'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/wraith-1.1.3/lib/wraith/save_images.rb:54:in `each'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/wraith-1.1.3/lib/wraith/save_images.rb:54:in `save_images'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/wraith-1.1.3/lib/wraith/cli.rb:55:in `save_images'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/wraith-1.1.3/lib/wraith/cli.rb:88:in `capture'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/thor-0.18.1/lib/thor/command.rb:27:in `run'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/thor-0.18.1/lib/thor/invocation.rb:120:in `invoke_command'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/thor-0.18.1/lib/thor.rb:363:in `dispatch'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/thor-0.18.1/lib/thor/base.rb:439:in `start'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/gems/wraith-1.1.3/bin/wraith:7:in `<top (required)>'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/bin/wraith:23:in `load'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/bin/wraith:23:in `<main>'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/bin/ruby_executable_hooks:15:in `eval'
    from /Users/matt/.rvm/gems/ruby-2.0.0-p247/bin/ruby_executable_hooks:15:in `<main>'

Comparing git commits/branches

The wiki states (on the 'detailed instructions' page) that the rakefile cleans up the shots folder on each run. As is stated, wraith is intended to compare two simultaneously-running sites. (local dev with production, for instance) This makes sense as shots do get stale over time.

However, another likely scenario (well, likely enough, considering it's my situation. 😄), is wanting to compare git commits or git branches. In this scenario, you can only have a single instance running at once, so the screenshots from the first run have to stay around long enough to switch commits/branches, spin up the server and take the second set of screenshots which can then be compared to the first.

Is there currently any way to accomplish this? (without cloning the entire repo a second time?) Maybe a config options to disable the cleanup somehow?

Absolute config path

It would help hosting multiple configs for multiple projects outside the wraith run directory if there were a way to specify an absolute path for a config file.

That way, you could host the configs in a separate repository/filesystem/etc

--config /path/to/project.yaml for example

Failing to run one test case stops the whole process

So in some cases, if for some reason one step does not succeed, wraiths quits leaving a message like this:

/usr/local/rvm/rubies/ruby-1.9.3-p545/lib/ruby/1.9.1/open-uri.rb:35:in `initialize': No such file or directory - shots/xxxxxxxx/320_phantomjs_diff.png (Errno                        ::ENOENT)
        from /usr/local/rvm/rubies/ruby-1.9.3-p545/lib/ruby/1.9.1/open-uri.rb:35:in `open'

Ideally, all other tests should be able to finish, as an 'incomplete' result is more useful than nothing.

[Question] Usage of SlimerJs

Hello all, first of all, thank you for offering this tool.
I have a little question, i installed wraith and am able to make it work on PhantomJS.
As far as i know, there's no specifical need to use snap.js (for example) ?

Then, i installed SlimerJS, and am able to make it work, it doesn't return any errors, but in shots folder, there's no screenshots of any pages i want...
Do I miss something ? Do i have to code something like snap.js ?
(Sorry for my being a noob, and for my poor english)

Thanks !

Question : How can we compare two screenshots or images instead of domains?

Is there a way we can compare two images instead of Domains?

What I am trying to do it first run wraith and generate reports. Which will be my bench mark and then if there are any functionality changes I want to compare the previous taken screenshot with the current update rather than the domains.

Curl install script broken

when I run: curl -fsSL https://raw.github.com/bbc-news/wraith/go | bash as stated in the readme.MD
I now just get:
bash: line 1: .DS_Store: command not found bash: line 2: gallery: command not found bash: line 3: shots: command not found
see: https://raw.github.com/bbc-news/wraith/go

image not found

Seems my screenshots are generating fine but the gallery isn't.

When the rake is complete, terminal tells me:

dyld: Library not loaded: /Users/steven/.rvm/lib/libltdl.7.dylib
Referenced from: /Users/steven/.rvm/bin/convert
Reason: image not found

Any ideas?

Check for even number of images

When phantom fails to capture an image, it means there are an odd number of images in the folder which causes cropping issues such as #99. The intention is to check for an even number of images in each folder, then add a standard image to ensure cropping doesn't fail.

rspec fails on Windows "File exists - shots"

Hi,

An error occured when executing test with rspec command. I put below the full trace of the test executed:

$ rspec
.........Snapping http://www.live.bbc.co.uk/news at width 320
.F

Failures:

  1) Wraith When comparing images
     Failure/Error: Given { WraithManager.reset_shots_folder }
     Errno::EEXIST:
       File exists - shots
     # ./lib/wraith_manager.rb:27:in `reset_shots_folder'
     # ./spec/wraith_spec.rb:7:in `block (2 levels) in <top (required)>'

Finished in 10.9 seconds
11 examples, 1 failure

Failed examples:

rspec ./spec/wraith_spec.rb:47 # Wraith When comparing images

Strangly, no error occurs when running rake:

$ rake
processing 'home' '/'
Snapping http://www.live.bbc.co.uk/russian/ at width 320
Snapping http://www.live.bbc.co.uk/news/ at width 320
Snapping http://www.live.bbc.co.uk/russian/ at width 600
Snapping http://www.live.bbc.co.uk/news/ at width 600
Snapping http://www.live.bbc.co.uk/russian/ at width 768
Snapping http://www.live.bbc.co.uk/news/ at width 768
Snapping http://www.live.bbc.co.uk/russian/ at width 1024
Snapping http://www.live.bbc.co.uk/news/ at width 1024
Snapping http://www.live.bbc.co.uk/russian/ at width 1280
Snapping http://www.live.bbc.co.uk/news/ at width 1280
processing 'uk_index' '/uk'
Snapping http://www.live.bbc.co.uk/russian/uk at width 320
Snapping http://www.live.bbc.co.uk/news/uk at width 320
Snapping http://www.live.bbc.co.uk/russian/uk at width 600
Snapping http://www.live.bbc.co.uk/news/uk at width 600
Snapping http://www.live.bbc.co.uk/russian/uk at width 768
Snapping http://www.live.bbc.co.uk/news/uk at width 768
Snapping http://www.live.bbc.co.uk/russian/uk at width 1024
Snapping http://www.live.bbc.co.uk/news/uk at width 1024
Snapping http://www.live.bbc.co.uk/russian/uk at width 1280
Snapping http://www.live.bbc.co.uk/news/uk at width 1280
cropping images

cropping images

cropping images

cropping images

cropping images

cropping images

cropping images

cropping images

cropping images

cropping images


Saved diff

Saved diff

Saved diff

Saved diff

Saved diff

Saved diff

Saved diff

Saved diff

Saved diff

Saved diff
ruby create_gallery.rb shots
Done!

I ran this test within a recently cloned repo, and with recent versions of Ruby, PhantomJS and ImageMagick (I ran tests through Git Bash):

$ git log -2 --oneline
4bf2920 updated changelog
075d513 Merge pull request #34 from malengrin/master

$ ruby --version
ruby 1.9.3p448 (2013-06-27) [i386-mingw32]

$ phantomjs.exe --version
1.9.0

$ identify --version
Version: ImageMagick 6.8.6-8 2013-08-04 Q16 http://www.imagemagick.org
Copyright: Copyright (C) 1999-2013 ImageMagick Studio LLC
Features: DPC OpenMP
Delegates: bzlib djvu fftw fontconfig freetype jng jp2 jpeg lcms lzma openexr pango png ps tiff webp x xml zlib

When trying to fix this problem, I found two things:

• using FileUtils.rm_rf and FileUtils.mkdir on Windows may have unexpected results (those functions are used in wraith_manager.reset_shots_folder method), and that's why I've submitted the pull request #35
• removing the Given { WraithManager.reset_shots_folder } line in spec/wraith_spec.rb fixed this issue, but I don't know why.

Do you have any idea why unit tests can't pass under Windows ?

Permission denied?

Hi,

I'm struggling to get Wraith up and running: "Permission denied" message.
I think I'm missing something really obvious in my set-up but can't think what it is (not used phantom before). I've set folder permissions to allow full control, and my config file is really basic:

# Add only 2 domains, key will act as a label
domains:
  local: "http://test2.local:8180/"
  demo: "http://test1.local:8180/"

#Type screen widths below, here are a couple of examples
screen_widths:
#  - 320
#  - 600
  - 768
  - 1024
  - 1280

#Type page URL paths below, here are a couple of examples
paths:
![wraith-error](https://f.cloud.github.com/assets/1876163/1041373/34e1bd8a-0fd0-11e3-92a9-31077c97d086.png)
  home: index.shtml
#  uk_index: /uk

# If you don't want to name the paths explicitly you can use a yaml
# collection as follows, and names will be derived by replacing / with _
#
# paths:
#  - /imghp
#  - /maps

--trace attached.