3 MAY 2023VISUAL REGRESSION TESTING

Visual regression testingApache learning session 02/02/2016

• Some tips for this, don’t make the title too long

• If you have a single word wrapping around add your own returns to make it look right

• There is a secondary title to use if you need it

2VISUAL REGRESSION TESTING

What?

3 MAY 2023VISUAL REGRESSION TESTING 3

“Automating visual regression testing takes away the pain of having to manually check every page or component after modifying CSS that could globally affect a website, catching errors quickly.”

- ME, 2016

4VISUAL REGRESSION TESTING

Why?

3 MAY 2023VISUAL REGRESSION TESTING 5

3 MAY 2023VISUAL REGRESSION TESTING 9

Why use it

• Test at a component level• See global changes quickly• Automate monotonous task• Reduce human erorr

10VISUAL REGRESSION TESTING

How?

11VISUAL REGRESSION TESTING 11

BackstopJS

3 MAY 2023VISUAL REGRESSION TESTING 12

How to use it

• npm install backstopjs --save-dev

• cd node_modules/backstopjs

• npm install

• gulp genConfig

3 MAY 2023VISUAL REGRESSION TESTING 13

How to use it

• Modify backstop.json config file• Add the task(s) to gulpfile.js• Generate base screenshots• Make changes• Test(!)

14VISUAL REGRESSION TESTING

Live demo FTW!

Page level test

Component level test

17VISUAL REGRESSION TESTING

Caveats

3 MAY 2023VISUAL REGRESSION TESTING 18

Caveats

• Currently working on how to script page interaction

• Fail threshold may be unreliable• CMS-entered content can change• Need a robust styleguide• Human erorr(!)

19VISUAL REGRESSION TESTING

When?[discuss with audience]

3 MAY 2023VISUAL REGRESSION TESTING 20

When to use it

• During automated build process?• Whilst developing?• Pre-commit hook?• Be vigilant!

21VISUAL REGRESSION TESTING

Who?[argue with audience]

3 MAY 2023VISUAL REGRESSION TESTING 22

Who should use it

• Front-end developers?• All developers?• Internal test team?• Client test team? Maybe…

23VISUAL REGRESSION TESTING 23

ALL OF US!

3 MAY 2023VISUAL REGRESSION TESTING

Merci.