Visual Regression Testing with PhantomCSS [Front Porch 2016]

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

@jonbellah - jonbellah.com/talks/frontporch DISCLAIMER

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

@jonbellah - jonbellah.com/talks/frontporch selenium wraith succss siteeffect huxley dpxdt css critic shoov snap and compare cactus hardy applitools specter needle

Slide 6

Slide 6 text

@jonbellah - jonbellah.com/talks/frontporch ? What the heck is Visual Regression Testing

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 9

Slide 9 text

@jonbellah - jonbellah.com/talks/frontporch “But I change CSS because I want things to look different…”

Slide 10

Slide 10 text

@jonbellah - jonbellah.com/talks/frontporch ? important So why is this

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

@jonbellah - jonbellah.com/talks/frontporch A perceptual phenomenon that occurs when changes in a visual stimulus are made without the observer noticing Source: Wikipedia

Slide 26

Slide 26 text

@jonbellah - jonbellah.com/talks/frontporch 20% of an image can change without the observer noticing

Slide 27

Slide 27 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

@jonbellah - jonbellah.com/talks/frontporch PhantomJS or SlimerJS - A headless browser. CasperJS - Navigation scripting and testing utility. ResembleJS - A library for making image comparisons.

Slide 33

Slide 33 text

@jonbellah - jonbellah.com/talks/frontporch GruntJS

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

@jonbellah - jonbellah.com/talks/frontporch options: { screenshots: 'baselines/desktop', results: 'results/desktop', viewportSize: [1280, 800], mismatchTolerance: 0.05, rootUrl: 'http://localhost:3000/' // Optional }

Slide 40

Slide 40 text

@jonbellah - jonbellah.com/talks/frontporch Testing Different Breakpoints

Slide 41

Slide 41 text

@jonbellah - jonbellah.com/talks/frontporch $mq-breakpoints: ( mobile: 320px, tablet: 740px, desktop: 980px, wide: 1300px ); Sass MQ

Slide 42

Slide 42 text

@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] } } }

Slide 43

Slide 43 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

@jonbellah - jonbellah.com/talks/frontporch phantom.casperTest = true; casper.start(); start.js src: [ 'test/visual/start.js', 'test/visual/*-test.js' ] Gruntfile.js

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

@jonbellah - jonbellah.com/talks/frontporch CasperJS

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

@jonbellah - jonbellah.com/talks/frontporch Running Your Tests

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 59

Slide 59 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 60

Slide 60 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 61

Slide 61 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 64

Slide 64 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 65

Slide 65 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 66

Slide 66 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

@jonbellah - jonbellah.com/talks/frontporch Challenges

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

@jonbellah - jonbellah.com/talks/frontporch guides style

Slide 74

Slide 74 text

@jonbellah - jonbellah.com/talks/frontporch mdcss

Slide 75

Slide 75 text

@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 `` or an `` element: ```example:html Click Some Page ``` */ .btn { background-color: black; color: white; }

Slide 76

Slide 76 text

@jonbellah - jonbellah.com/talks/frontporch

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

@jonbellah - jonbellah.com/talks/frontporch OPERATING SYSTEM not everyone uses the same