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

Visual Regression Testing with PhantomCSS [Front Porch 2016]

Visual Regression Testing with PhantomCSS [Front Porch 2016]

9c152b1584187e23aa5d9b1dc2f697b7?s=128

Jon Bellah

July 19, 2016
Tweet

Transcript

  1. @jonbellah - jonbellah.com/talks/frontporch Regression Testing with PhantomCSS Visual

  2. @jonbellah - jonbellah.com/talks/frontporch Lead Front-End Engineer @jonbellah

  3. @jonbellah - jonbellah.com/talks/frontporch DISCLAIMER

  4. @jonbellah - jonbellah.com/talks/frontporch Regression Testing with my personal favorite tool

    Visual
  5. @jonbellah - jonbellah.com/talks/frontporch selenium wraith succss siteeffect huxley dpxdt css

    critic shoov snap and compare cactus hardy applitools specter needle
  6. @jonbellah - jonbellah.com/talks/frontporch ? What the heck is Visual Regression

    Testing
  7. @jonbellah - jonbellah.com/talks/frontporch visual changes Automated testing of

  8. @jonbellah - jonbellah.com/talks/frontporch

  9. @jonbellah - jonbellah.com/talks/frontporch “But I change CSS because I want

    things to look different…”
  10. @jonbellah - jonbellah.com/talks/frontporch ? important So why is this

  11. @jonbellah - jonbellah.com/talks/frontporch projects iterating on

  12. @jonbellah - jonbellah.com/talks/frontporch projects refactoring

  13. @jonbellah - jonbellah.com/talks/frontporch projects distributed

  14. @jonbellah - jonbellah.com/talks/frontporch projects open source

  15. @jonbellah - jonbellah.com/talks/frontporch helps prevent unintended changes

  16. @jonbellah - jonbellah.com/talks/frontporch automate your workflow

  17. @jonbellah - jonbellah.com/talks/frontporch Manual testing is expensive

  18. @jonbellah - jonbellah.com/talks/frontporch is imperfect Manual testing

  19. @jonbellah - jonbellah.com/talks/frontporch attention to detail” “but I have excellent

  20. @jonbellah - jonbellah.com/talks/frontporch Actually…

  21. @jonbellah - jonbellah.com/talks/frontporch TERRIBLE Humans are at spotting changes

  22. @jonbellah - jonbellah.com/talks/frontporch

  23. @jonbellah - jonbellah.com/talks/frontporch & McConkie Currie 1996

  24. @jonbellah - jonbellah.com/talks/frontporch Change Blindness

  25. @jonbellah - jonbellah.com/talks/frontporch A perceptual phenomenon that occurs when changes

    in a visual stimulus are made without the observer noticing Source: Wikipedia
  26. @jonbellah - jonbellah.com/talks/frontporch 20% of an image can change without

    the observer noticing
  27. @jonbellah - jonbellah.com/talks/frontporch

  28. @jonbellah - jonbellah.com/talks/frontporch The Tools

  29. @jonbellah - jonbellah.com/talks/frontporch PhantomCSS https://github.com/Huddle/PhantomCSS

  30. @jonbellah - jonbellah.com/talks/frontporch PhantomJS or SlimerJS - A headless browser.

  31. @jonbellah - jonbellah.com/talks/frontporch PhantomJS or SlimerJS - A headless browser.

    CasperJS - Navigation scripting and testing utility.
  32. @jonbellah - jonbellah.com/talks/frontporch PhantomJS or SlimerJS - A headless browser.

    CasperJS - Navigation scripting and testing utility. ResembleJS - A library for making image comparisons.
  33. @jonbellah - jonbellah.com/talks/frontporch GruntJS

  34. @jonbellah - jonbellah.com/talks/frontporch The Implementation

  35. @jonbellah - jonbellah.com/talks/frontporch Grunt setting up

  36. @jonbellah - jonbellah.com/talks/frontporch $ cd path/to/your-project

  37. @jonbellah - jonbellah.com/talks/frontporch $ npm install @micahgodbolt/grunt-phantomcss --save-dev

  38. @jonbellah - jonbellah.com/talks/frontporch 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' ] } } });
  39. @jonbellah - jonbellah.com/talks/frontporch options: { screenshots: 'baselines/desktop', results: 'results/desktop', viewportSize:

    [1280, 800], mismatchTolerance: 0.05, rootUrl: 'http://localhost:3000/' // Optional }
  40. @jonbellah - jonbellah.com/talks/frontporch Testing Different Breakpoints

  41. @jonbellah - jonbellah.com/talks/frontporch $mq-breakpoints: ( mobile: 320px, tablet: 740px, desktop:

    980px, wide: 1300px ); Sass MQ
  42. @jonbellah - jonbellah.com/talks/frontporch phantomcss: { desktop: { options: { screenshots:

    'baselines/desktop', results: 'results/desktop', viewportSize: [1024, 768] } }, mobile: { options: { screenshots: 'baselines/mobile', results: 'results/mobile', viewportSize: [320, 480] } } }
  43. @jonbellah - jonbellah.com/talks/frontporch

  44. @jonbellah - jonbellah.com/talks/frontporch Writing Your First Tests

  45. @jonbellah - jonbellah.com/talks/frontporch phantom.casperTest = true; casper.start(); start.js

  46. @jonbellah - jonbellah.com/talks/frontporch phantom.casperTest = true; casper.start(); start.js src: [

    'test/visual/start.js', 'test/visual/*-test.js' ] Gruntfile.js
  47. @jonbellah - jonbellah.com/talks/frontporch casper.thenOpen('http://mysite.dev/') .then(function() { phantomcss.screenshot('.site-header', 'site-header'); }); header-test.js

  48. @jonbellah - jonbellah.com/talks/frontporch Test Suite Structure

  49. @jonbellah - jonbellah.com/talks/frontporch focus on components

  50. @jonbellah - jonbellah.com/talks/frontporch

  51. @jonbellah - jonbellah.com/talks/frontporch Scripting Interactions

  52. @jonbellah - jonbellah.com/talks/frontporch CasperJS

  53. @jonbellah - jonbellah.com/talks/frontporch casper.click(); casper.download(); casper.fill(); casper.scrollTo(); casper.reload(); casper.mouseEvent(); docs.casperjs.org

  54. @jonbellah - jonbellah.com/talks/frontporch casper.then(function() { this.mouse.move('.button'); phantomcss.screenshot('.button'); });

  55. @jonbellah - jonbellah.com/talks/frontporch casper.start('http://mysite.dev/wp-admin/', function() { this.fill('#loginform', { 'log': 'admin',

    'pwd': 'password' }, true); this.click('#wp-submit'); });
  56. @jonbellah - jonbellah.com/talks/frontporch Running Your Tests

  57. @jonbellah - jonbellah.com/talks/frontporch $ grunt phantomcss

  58. @jonbellah - jonbellah.com/talks/frontporch

  59. @jonbellah - jonbellah.com/talks/frontporch

  60. @jonbellah - jonbellah.com/talks/frontporch

  61. @jonbellah - jonbellah.com/talks/frontporch

  62. @jonbellah - jonbellah.com/talks/frontporch Failing Tests

  63. @jonbellah - jonbellah.com/talks/frontporch

  64. @jonbellah - jonbellah.com/talks/frontporch

  65. @jonbellah - jonbellah.com/talks/frontporch

  66. @jonbellah - jonbellah.com/talks/frontporch

  67. @jonbellah - jonbellah.com/talks/frontporch visual regression testing tools ARE NOT PERFECT

  68. @jonbellah - jonbellah.com/talks/frontporch Challenges

  69. @jonbellah - jonbellah.com/talks/frontporch 1 content dynamic

  70. @jonbellah - jonbellah.com/talks/frontporch replacement dynamic

  71. @jonbellah - jonbellah.com/talks/frontporch 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 ); }
  72. @jonbellah - jonbellah.com/talks/frontporch 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' ); });
  73. @jonbellah - jonbellah.com/talks/frontporch guides style

  74. @jonbellah - jonbellah.com/talks/frontporch mdcss

  75. @jonbellah - jonbellah.com/talks/frontporch /*--- 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; }
  76. @jonbellah - jonbellah.com/talks/frontporch

  77. @jonbellah - jonbellah.com/talks/frontporch 2animations & web fonts

  78. @jonbellah - jonbellah.com/talks/frontporch 3 distribution

  79. @jonbellah - jonbellah.com/talks/frontporch LOCAL URL not everyone uses the same

  80. @jonbellah - jonbellah.com/talks/frontporch 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']); });
  81. @jonbellah - jonbellah.com/talks/frontporch 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');
  82. @jonbellah - jonbellah.com/talks/frontporch OPERATING SYSTEM not everyone uses the same

  83. @jonbellah - jonbellah.com/talks/frontporch Continuous Integration

  84. @jonbellah - jonbellah.com/talks/frontporch

  85. @jonbellah - jonbellah.com/talks/frontporch CAUTION WORK IN PROGRESS

  86. @jonbellah - jonbellah.com/talks/frontporch Questions?