Doing nothing for visual regression testing

Varya Stepanova, SC5 Online

Doing nothing for visual regression testing

Brought to you by Varya Stepanova and generated with Jekyller

Bug hunt

Testings

  • performance testing
  • stress testing
  • conformance testing
  • acceptane testing
  • smoke testing
  • regression testing
  • white box testing
  • functional testing
  • system testing
  • black box testing
  • load testing
  • compatibility testing
  • unit testing

Customer context

Does my website make sense for the customer right now?

Spot the difference

Visual regression

Perceptual diffs

  1. Take reference screenshots
  2. Provide changes to the local copy
  3. Take local copy screenshots
  4. Compare with image diff

Before and after

Diff

Right way to use

What a little margin can do

Big diff

Impressive & useless

Atomic approach

Visual regression testing not for whole pages but for isolated components gives better understanding of what actually happened.

Button sizes

Wrong margin

Wrong margin

Icons

Missing icon font

Affected colors

Typography before

before

Typography after

after

Typography difference

difference

Typography affection onto components

affection onto components

Pictorial pull request

SC5 Style Guide

Informative and easily navigable live style guide which renders every component separately.

Wonderful for perceptual diffs!

Add on

SC5 Style Guide addition

npm install sc5-styleguide-visualtest

Take reference pics

var visTest = require('sc5-styleguide-visualtest'); gulp.task("test:visual:update", function() {  gulp.src('path/to/styleguide', { read: false })    .pipe(visTest.gather({      // configuration params    }));});

Current state test

gulp.task("visual:test", function(done) {  gulp.src(styleGuidePath, { read: false })    .pipe(visTest.test({      // configuration params    }));});

Console report

> gulp test:visual

Human friendly report

open gemini-report/index.html

The dev flow

When refactoring

Test particular component

> gulp test:visual --section 7.3.4 --section 8.5

Test all

> gulp test:visual

When making new

Update one component refence

> gulp test:visual:update --section 8.5 --from local

Update all from production

> gulp test:visual:update

Real life stories

  • Missing icon font (sad but true)
  • Changing font linking
  • Typograhy affection
  • Refactoring of atom components

Apply for

The practises you did not dare to use

  • Continious intergration
  • Continious deployment
  • Removing code
  • Intensive refactoring

Psycology

Insurance

Devs must be accurate but nothing checks the result.
No, code reviews don’t.

Business

Making money out of it

  • Sell style guide approach and tool
  • Provide very stable UI
  • Work faster and do more

The way to go

Future plans and so on

  • Trying out different diff comparing tools
  • Different window sizes
    • desktop, tablet, mobile
  • Post in SC5 blog
  • Open source

THANK YOU!

Varya Stepanova, SC5 Online

github://sc5/sc5-styleguide-visualtest