Doing nothing for visual regression testing

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

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

Missing icon font

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

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

> gulp test:visual

open gemini-report/index.html

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

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

Test particular component

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

Test all

> gulp test:visual

Update one component reference

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

Update all from production

> gulp test:visual:update

The practises you did not dare to use

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

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