Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PhantomCSS: Visual regression tesing

PhantomCSS: Visual regression tesing

Talk given at London Selenium meetup, March 2015.

https://www.youtube.com/watch?v=K7QVMTTo7eI

James Cryer

March 19, 2015
Tweet

More Decks by James Cryer

Other Decks in Technology

Transcript

  1. Visual regression testing London Selenium Meetup March 2015 by @jamescryer,

    UI developer at Huddle Automated testing of CSS, HTML & JS with PhantomCSS
  2. Visual regression testing? Implicit test coverage of CSS, HTML and

    JS Un-coupled to the implementation Verifiable contract of visual design Enable TDD-like practices to CSS component development
  3. Why is it important? Manual testing is a time consuming

    process The risk of regression is higher with responsive layouts and complex applications CSS refactoring is necessary for long life projects Visual regression identification can often be difficult and subjective
  4. PhantomCSS? CasperJS: Navigation scripting and testing framework PhantomCSS: Screenshot comparison

    library for CasperJS Resemble.js: Image comparison library with HTML5
  5. PhantomCSS? PhantomJS v1: Scriptable headless Webkit browser - Fast and

    stable Or SlimerJS: Scriptable headless Gecko browser - Better support for Webfonts and can load Flash content if the plugin is installed
  6. - More logs casperjs test demo/testsuite.js --verbose —log-level=debug - Use

    SlimerJS instead of PhantomJS casperjs test demo/testsuite.js --engine=slimerjs - Use debugger; statements with Webkit remote console casperjs test demo/testsuite.js —remote-debugger-port=9000
  7. :-( Pages with mutable content are not worth testing, unless

    you can control the content in the test Animations must be ignored Web fonts are problematic in PhantomJS <2 Cross browser design
  8. :-) Style guides and component libraries are perfect for visual

    testing Isolate-able UIs, with test-doubles Cheap, throw-away, release regression tests
  9. Visual testing with PhantomFlow Help manage visual test baselines Describe

    user interaction as decision trees Communicate UI complexity through D3.js visualisation Parallelise tests for faster feedback
  10. flow("My first responsive webpage", function(){ decision({ "View in 1500px": function(){

    step('Look at the page', look(1500)); }, "View in 990px": function(){ step('Look at the page', look(990)); }, "View in 440px": function(){ step('Look at the page', look(440)); } }); }); function look(w){ return function(){ casper.viewport(w, 768). thenOpen(url, function(){ casper.test.pass(w+'x768 page has loaded'); phantomCSS.screenshot('body'); }); }; }
  11. Example - fail and rebase Refactor CSS Run tests to

    check for failures Use PhantomFlow report to look at diff images Rebase visual tests and re-run