Visual Regression Testing with PhantomCSS

Presented at JavaScript Summit 2016, see: https://jonbellah.com/talks/js-summit

Transcript

1. @jonbellah - jonbellah.com/talks/js-summit Regression Testing with PhantomCSS Visual
2. @jonbellah - jonbellah.com/talks/js-summit Lead Front End Engineer @jonbellah
3. @jonbellah - jonbellah.com/talks/js-summit DISCLAIMER
4. @jonbellah - jonbellah.com/talks/js-summit Regression Testing with my personal favorite tool Visual
5. @jonbellah - jonbellah.com/talks/js-summit selenium wraith succss siteeffect huxley dpxdt css critic shoov snap and compare cactus hardy applitools specter needle
6. @jonbellah - jonbellah.com/talks/js-summit ? What the heck is Visual Regression Testing
7. @jonbellah - jonbellah.com/talks/js-summit visual changes Automated testing of
8. @jonbellah - jonbellah.com/talks/js-summit
9. @jonbellah - jonbellah.com/talks/js-summit “But I change CSS because I want things to look different…”
10. @jonbellah - jonbellah.com/talks/js-summit ? important So why is this
11. @jonbellah - jonbellah.com/talks/js-summit projects refactoring
12. @jonbellah - jonbellah.com/talks/js-summit projects distributed
13. @jonbellah - jonbellah.com/talks/js-summit projects open source
14. @jonbellah - jonbellah.com/talks/js-summit helps prevent unintended changes
15. @jonbellah - jonbellah.com/talks/js-summit automate your workflow
16. @jonbellah - jonbellah.com/talks/js-summit Manual testing is expensive
17. @jonbellah - jonbellah.com/talks/js-summit is imperfect Manual testing
18. @jonbellah - jonbellah.com/talks/js-summit attention to detail” “but I have excellent
19. @jonbellah - jonbellah.com/talks/js-summit Actually…
20. @jonbellah - jonbellah.com/talks/js-summit TERRIBLE Humans are at spotting changes
21. @jonbellah - jonbellah.com/talks/js-summit Whodunnit? (video)
22. @jonbellah - jonbellah.com/talks/js-summit & McConkie Currie 1996
23. @jonbellah - jonbellah.com/talks/js-summit Change Blindness
24. @jonbellah - jonbellah.com/talks/js-summit A perceptual phenomenon that occurs when changes in a visual stimulus is made without the observer noticing Source: Wikipedia
25. @jonbellah - jonbellah.com/talks/js-summit 20% of an image can change without the observer noticing
26. @jonbellah - jonbellah.com/talks/js-summit
27. @jonbellah - jonbellah.com/talks/js-summit The Tools
28. @jonbellah - jonbellah.com/talks/js-summit PhantomCSS https://github.com/Huddle/PhantomCSS
29. @jonbellah - jonbellah.com/talks/js-summit PhantomJS or SlimerJS - A headless browser.
30. @jonbellah - jonbellah.com/talks/js-summit PhantomJS or SlimerJS - A headless browser. CasperJS - Navigation scripting and testing utility.
31. @jonbellah - jonbellah.com/talks/js-summit PhantomJS or SlimerJS - A headless browser. CasperJS - Navigation scripting and testing utility. ResembleJS - A library for making image comparisons.
32. @jonbellah - jonbellah.com/talks/js-summit GruntJS
33. @jonbellah - jonbellah.com/talks/js-summit The Implementation
34. @jonbellah - jonbellah.com/talks/js-summit Grunt setting up
35. @jonbellah - jonbellah.com/talks/js-summit $ cd path/to/your-project
36. @jonbellah - jonbellah.com/talks/js-summit $ npm install @micahgodbolt/grunt-phantomcss --save-dev
37. @jonbellah - jonbellah.com/talks/js-summit grunt.loadNpmTasks('@micahgodbolt/grunt-phantomcss'); grunt.initConfig({ phantomcss: { desktop: { options: { screenshots: 'baselines/desktop', results: 'results/desktop', viewportSize: [1280, 800] }, src: [ 'test/visual/start.js', 'test/visual/*-test.js' ] } } });
38. @jonbellah - jonbellah.com/talks/js-summit options: { screenshots: 'baselines/desktop', results: 'results/desktop', viewportSize: [1280, 800], mismatchTolerance: 0.05, rootUrl: 'http://localhost:3000/' // Optional }
39. @jonbellah - jonbellah.com/talks/js-summit Testing Different Breakpoints
40. @jonbellah - jonbellah.com/talks/js-summit $mq-breakpoints: ( mobile: 320px, tablet: 740px, desktop: 980px, wide: 1300px ); Sass MQ
41. @jonbellah - jonbellah.com/talks/js-summit phantomcss: { desktop: { options: { screenshots: 'baselines/desktop', results: 'results/desktop', viewportSize: [1024, 768] } }, mobile: { options: { screenshots: 'baselines/mobile', results: 'results/mobile', viewportSize: [320, 480] } } }
42. @jonbellah - jonbellah.com/talks/js-summit
43. @jonbellah - jonbellah.com/talks/js-summit Writing Your First Tests
44. @jonbellah - jonbellah.com/talks/js-summit phantom.casperTest = true; casper.start(); start.js
45. @jonbellah - jonbellah.com/talks/js-summit phantom.casperTest = true; casper.start(); start.js src: [ 'test/visual/start.js', 'test/visual/*-test.js' ] Gruntfile.js
46. @jonbellah - jonbellah.com/talks/js-summit casper.thenOpen('http://mysite.dev/') .then(function() { phantomcss.screenshot('.site-header', 'site-header'); }); header-test.js
47. @jonbellah - jonbellah.com/talks/js-summit Test Suite Structure
48. @jonbellah - jonbellah.com/talks/js-summit focus on components
49. @jonbellah - jonbellah.com/talks/js-summit
50. @jonbellah - jonbellah.com/talks/js-summit Scripting Interactions
51. @jonbellah - jonbellah.com/talks/js-summit CasperJS
52. @jonbellah - jonbellah.com/talks/js-summit casper.click(); casper.download(); casper.fill(); casper.scrollTo(); casper.reload(); casper.mouseEvent(); docs.casperjs.org
53. @jonbellah - jonbellah.com/talks/js-summit casper.then(function() { this.mouse.move('.button'); phantomcss.screenshot('.button'); });
54. @jonbellah - jonbellah.com/talks/js-summit casper.start('http://mysite.dev/wp-admin/', function() { this.fill('form#loginform', { 'log': 'admin', 'pwd': 'password' }, true); this.click('#wp-submit'); });
55. @jonbellah - jonbellah.com/talks/js-summit Running Your Tests
56. @jonbellah - jonbellah.com/talks/js-summit $ grunt phantomcss
57. @jonbellah - jonbellah.com/talks/js-summit
58. @jonbellah - jonbellah.com/talks/js-summit
59. @jonbellah - jonbellah.com/talks/js-summit Failing Tests
60. @jonbellah - jonbellah.com/talks/js-summit
61. @jonbellah - jonbellah.com/talks/js-summit
62. @jonbellah - jonbellah.com/talks/js-summit
63. @jonbellah - jonbellah.com/talks/js-summit
64. @jonbellah - jonbellah.com/talks/js-summit visual regression testing tools ARE NOT PERFECT
65. @jonbellah - jonbellah.com/talks/js-summit Challenges
66. @jonbellah - jonbellah.com/talks/js-summit 1 content dynamic
67. @jonbellah - jonbellah.com/talks/js-summit replacement dynamic
68. @jonbellah - jonbellah.com/talks/js-summit Faker.prototype.home = function( posts ) { var $ = jQuery, post = posts[5]; var title = post.title, author = post.author.name, date = post.date, excerpt = post.excerpt; // Hero var $hero = $('#hero'); $hero.find('.-text .entry-title').html( title ); $hero.find('.-text .author > a').html( author ); $hero.find('.-text .entry-content p').html( excerpt ); }
69. @jonbellah - jonbellah.com/talks/js-summit var core = require( './core.js' ), Faker = require( ‘./faker.js’), posts = core.getData(), faker = new Faker(); casper.thenOpen( core.getSiteURL() ) .thenEvaluate( faker.home, posts ) .then( function() { phantomcss.screenshot( '#hero .-text', 'hero- post' ); });
70. @jonbellah - jonbellah.com/talks/js-summit guides style
71. @jonbellah - jonbellah.com/talks/js-summit mdcss
72. @jonbellah - jonbellah.com/talks/js-summit /*--- title: Buttons section: Base CSS --- Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element: ```example:html <button class="btn">Click</button> <a class="btn" href="/some-page">Some Page</a> ``` */ .btn { background-color: black; color: white; }
73. @jonbellah - jonbellah.com/talks/js-summit
74. @jonbellah - jonbellah.com/talks/js-summit 2animations & web fonts
75. @jonbellah - jonbellah.com/talks/js-summit 3 distribution
76. @jonbellah - jonbellah.com/talks/js-summit LOCAL URL not everyone uses the same
77. @jonbellah - jonbellah.com/talks/js-summit var localURL = grunt.option( 'url' ); grunt.registerTask( 'test', function() { if ( localURL ) { grunt.log.writeln( 'Local URL: ' + localURL ); grunt.file.write( 'test/visual/.local_url', localURL ); } grunt.task.run(['phantomcss']); });
78. @jonbellah - jonbellah.com/talks/js-summit var fs = require('fs'), siteURL; try { siteURL = fs.read( 'test/visual/.local_url' ); } catch(err) { siteURL = (typeof siteURL === 'undefined') ? 'http://local.wordpress.dev' : siteURL; } casper.thenOpen(siteURL + '/path/to/template');
79. @jonbellah - jonbellah.com/talks/js-summit OPERATING SYSTEM not everyone uses the same
80. @jonbellah - jonbellah.com/talks/js-summit
81. @jonbellah - jonbellah.com/talks/js-summit
82. @jonbellah - jonbellah.com/talks/js-summit CAUTION WORK IN PROGRESS
83. @jonbellah - jonbellah.com/talks/js-summit Questions?