PhantomCSS: Visual regression tesing

Talk given at London Selenium meetup, March 2015.

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

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? Testing visual changes
3. 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
4. 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
5. PhantomCSS? CasperJS: Navigation scripting and testing framework PhantomCSS: Screenshot comparison library for CasperJS Resemble.js: Image comparison library with HTML5
6. 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
7. casper.start( url ).then(function(){ casper.click(‘button’); phantomCSS.screenshot( ‘.modal’, ‘Modal dialog’ ); });
8. - 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
9. :-( 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
10. :-) Style guides and component libraries are perfect for visual testing Isolate-able UIs, with test-doubles Cheap, throw-away, release regression tests
11. 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
12. 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'); }); }; }
13. 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
16. More info https://github.com/Huddle/PhantomCSS https://github.com/Huddle/Resemble.js https://github.com/Huddle/PhantomFlow
17. Thank you! Any questions?