Skip to content

Instantly share code, notes, and snippets.

@kellective

kellective/Visual-Regression-Testing.md

Last active November 1, 2017 18:00
Show Gist options
  • Save kellective/c3811637b64667ec5b3e to your computer and use it in GitHub Desktop.
Save kellective/c3811637b64667ec5b3e to your computer and use it in GitHub Desktop.
Download ZIP
Visual Regression Testing
Raw
Visual-Regression-Testing.md

Visual Regression Testing

  • add link to presentation

Why

  • UI tests are hard to write and are usually fragile.
  • Other automated testing can't tell you if something doesn't look right, so UI regressions may go undetected.
  • Testing that .red-button exists does not mean that the button is red
  • Refactoring CSS can lead to...the Unintended CSS Consequences Monster

Tools out there

These are basically diff tools for the visual layer of your web app. OMG awesome.

Instagram Huxley https://github.com/facebook/huxley

Node Huxley https://github.com/chenglou/node-huxley

Huddle PhantomCSS https://github.com/Huddle/PhantomCSS

BBC Wraith https://github.com/BBC-News/wraith/

Demo Time

Today i'll demo Node Huxley and PhantomCSS

Whats the difference?

Huxley uses Selenium to watch you browse and records your actions to create tests. Re-run your "manual" test plan for you automatically.

PhantomCSS

Phantom CSS uses a CasperJS module for automating visual regression testing with PhantomJS and Resemble.js. It takes screenshots captured by CasperJS and compares them to baseline images using Resemble.js to test for rgb pixel differences. PhantomCSS then generates image diffs to help you find the cause.

@mojoaxel
Copy link

mojoaxel commented Nov 1, 2017

see also https://github.com/mojoaxel/awesome-regression-testing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment