Doing nothing for visual regression testing

Spot the difference

Perceptual diffs

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

Atomic approach

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

Button sizes

Icons

Unlinked icon font

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

Features

• Out-of-box solution
• One embedded test suitable for all the components
• Optional custom tests with interactions and logic

Custom tests

• Different screen sizes
• Ignore dynamic parts
• Wait for element to appear
• Make interactions (e.g. clicks)
• Run custom JavaScript

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 reference

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

Update all from production

> gulp test:visual:update

Apply for

The practises you did not dare to use

• Continuous integration
• Continuous deployment
• Removing code
• Intensive refactoring

Making money out of it

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