Visual Regression Testing - from a tool to a process

Slide 1

Slide 1 text

VISUAL REGRESSION TESTING from a tool to a process Nikhil Verma

Slide 2

Slide 2 text

Nikhil Verma Team Lead / JS Developer MOBILE WEB TEAM @NikhilVerma

Slide 3

Slide 3 text

badoo.com team.badoo.com techblog.badoo.com

Slide 4

Slide 4 text

VISUAL REGRESSION TESTING

Slide 5

Slide 5 text

VISUAL

Slide 6

Slide 6 text

It’s all about change which can be obvious or subtle

Slide 7

Slide 7 text

Spot the difference in 15 seconds

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

How can we easily detect change?

Slide 11

Slide 11 text

Let the computer do it.

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

REGRESSION TESTING

Slide 14

Slide 14 text

Why do we need visual regression testing?

Slide 15

Slide 15 text

Swiss cheese model https://wikipedia.org/wiki/Swiss_cheese_model

Slide 16

Slide 16 text

Unit testing Automation testing Visual Regression testing Human testing Change

Slide 17

Slide 17 text

The process today

Slide 18

Slide 18 text

https://github.com/Huddle/PhantomCSS CasperJS PhantomJS = + ResembleJS +

Slide 19

Slide 19 text

Local • Used by developers • Choose the tests to run • Manage your own “baseline” • Develop/Refactor/Debug

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

• Feature/Staging branches • Runs the entire test suite • Baseline from production • Catch regressions and bugs Automated

Slide 22

Slide 22 text

1. Download baseline from server 2. Generate and compare screenshots 3. Upload results back to the server 4. Send notiﬁcations to developer/team How does it work?

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Some issues caught by VRT

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

How it started

Slide 31

Slide 31 text

didoo.net / @areaweb Cristiano Rastelli Front-End / CSS Developer MOBILE WEB TEAM

Slide 32

Slide 32 text

Tests were slow Can’t run individual tests No integration with our process

Slide 33

Slide 33 text

Let’s start improving it! one problem at a time

Slide 34

Slide 34 text

Tests were slow • Don’t know when the page will be ready • Wait for images to download

Slide 35

Slide 35 text

Don’t know when the content will be ready

Slide 36

Slide 36 text

// On the client, when a page is rendered $page.attr('data-vrt-ready', 'true'); Client adds an attribute when ready

Slide 37

Slide 37 text

// In the VRT test waitForSelector('[data-vrt-ready="true"]') .then(() => { // take screenshot }); Wait for selector

Slide 38

Slide 38 text

Wait for images to download

Slide 39

Slide 39 text

Inline all images with base64 const PLACEHOLDER_90x90 = ‘data:image/ png;base64,iVBORw0KGgo…’; $('img').attr('src', PLACEHOLDER_90x90);

Slide 40

Slide 40 text

Before: 6.8 mins After: 1.2 mins 5x faster!

Slide 41

Slide 41 text

Tests were slow Can’t run individual tests No integration with our process

Slide 42

Slide 42 text

Can’t run individual tests

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

casperjs -- --config=config/phantomjs.json —concise target=https://m.badoo.com test instructions/mobileweb/tests/ login.js instructions/mobileweb/tests/chat.js instructions/ mobileweb/tests/gifts.js instructions/mobileweb/tests/liked- you.js --pre=instructions/mobileweb/pre.js -- post=instructions/mobileweb/post.js

Slide 45

Slide 45 text

https://www.npmjs.com/package/inquirer

Slide 46

Slide 46 text

Convert an array of questions module.exports = [{ type: 'list', name: 'suite', message: 'What do you want to test?', choices: […], default: 'styleguide' }, { type: 'list', name: 'environment', message: 'Which environment do you want to use?', choices: function (answers) {…} }];

Slide 47

Slide 47 text

To an interactive questionnaire

Slide 48

Slide 48 text

Tests were slow Can’t run individual tests No integration with our process

Slide 49

Slide 49 text

How to integrate it into the process?

Slide 50

Slide 50 text

Local Feature Staging Production

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Hook • Git/Mercurial post-receive hooks • Deploy scripts • JIRA/Trello webhooks • No hook! wat?

Slide 53

Slide 53 text

Trigger • Run a bash script • Start a CI agent (TeamCity/Jenkins/CircleCI) • Boot a docker VM/Remote machine • Cron job (no hook needed!)

Slide 54

Slide 54 text

+ !

Slide 55

Slide 55 text

Notiﬁcation • Email • HipChat / Slack etc • Sound!

Slide 56

Slide 56 text

See the results • Email • Hosted website with results • Commit to repository • Hard Disk/Network Attached Storage

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

A hook in our deploy scripts which triggers VRT on a TeamCity agent which sends a notiﬁcation via HipChat and lets us see the results on a website

Slide 59

Slide 59 text

Tests were slow Can’t run individual tests No integration with our process

Slide 60

Slide 60 text

Is everything perfect?

Slide 61

Slide 61 text

• Stability of tests • Test for different conditions • User agents • Resolutions • Expand test coverage