Slide 1

Slide 1 text

Visual regression testing London Selenium Meetup March 2015 by @jamescryer, UI developer at Huddle Automated testing of CSS, HTML & JS with PhantomCSS

Slide 2

Slide 2 text

Visual regression testing? Testing visual changes

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

PhantomCSS? CasperJS: Navigation scripting and testing framework PhantomCSS: Screenshot comparison library for CasperJS Resemble.js: Image comparison library with HTML5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

casper.start( url ).then(function(){ casper.click(‘button’); phantomCSS.screenshot( ‘.modal’, ‘Modal dialog’ ); });

Slide 8

Slide 8 text

- 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

Slide 9

Slide 9 text

:-( 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

Slide 10

Slide 10 text

:-) Style guides and component libraries are perfect for visual testing Isolate-able UIs, with test-doubles Cheap, throw-away, release regression tests

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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'); }); }; }

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

More info https://github.com/Huddle/PhantomCSS https://github.com/Huddle/Resemble.js https://github.com/Huddle/PhantomFlow

Slide 17

Slide 17 text

Thank you! Any questions?