Regression Testing CSS – – Compare Screenshots

View Github Repository Open presentation in a new window

frob

See all presentation from frob

Regression Testing CSS – – Compare Screenshots

0 0

drupal-pdx-frontend-drupal7-modules

On Github frob / drupal-pdx-frontend-drupal7-modules

Regression Testing CSS

Created by Frank Anderson / @frobdfas

Who am I?

Frank Robert Anderson

frob on Drupal.org, Github, and IRC.

What is Front-End Regression Testing?

Visual Diffs from screenshots that are generated from controlled sources.

Compare Screenshots

Taking a sequence of screenshots and diffing them with a tool such as ImageMagick Compare.

Take This

Compare to this

To get this

Tools

  • PhanotomJS
  • SlimerJS
  • Selenium
  • CasperJS
  • WebdriverCSS
  • PhantomCSS
  • Wraith

Developed in Ruby by BBC, uses PhantomJS, (or SlimerJS), optionally with CasperJS, to provide a website that houses your diffs and settings to help you manage them.

Benifit of Wraith

Simple to run, easy to setup (after installation), very powerfull.

Minimal Configuration

Run wraith setup or setup_casper

Configuration happens in two files.

  • configs/config.yaml
  • javascript/snaps.js

Config.yaml

domains: github: "http://frob.github.io" selfhosted: "https://www.frobiovox.com" List of environments to compare screen_widths: - 320 - 768 - 1024 Screen resolutions that Wraith will generate diffs from. paths: home: / tutorials: /tutorials.html rants: /rants.html everything: /river.html The URL paths that Wraith will generate diffs from. fuzz: '20%' Amount of fuzz ImageMagick will use

shots.js

Javascript that wraith uses with phantom and casper to generate the screenshots.

Wraith Problems

Installation and documentation

Documented Installation

  • gem install wraith

It's ruby so it just works, right?

Actual Installation on OSX

  • brew tap homebrew/versions
  • brew install phantomjs198
  • Do not attempt to install a gem with sudo on OSX!
  • install rbenv if not installed
  • brew install rbenv ruby-build
  • eval "$(rbenv init -)"
  • rbenv install 2.1.2
  • rbenv shell 2.1.2
  • gem install wraith

How did I know what to install if Documentation is such a problem?

Orignal note: Wholy crap they have a dockerfile.

Pitfalls & Tips

THE END

Any Questions?

Regression Testing CSS Created by Frank Anderson / @frobdfas