Visual Regression Testing: Don’t Let a CSS Change Break Your Site

andrewsuth

Have you ever made a simple CSS change to fix one issue only to realise that it breaks the layout elsewhere on your project? This session will discuss the idea of Visual Regression Testing (also known as CSS Regression Testing) to quickly identify issues caused by CSS or HTML changes before going into production.

In this session you'll learn about the BBC's open source tool Wraith which creates screen-shots of web pages on different environments and then creates a diff of the two images, highlighting the visual differences.

Quickly compare web pages on your development environment against production (in various responsive widths) before making that git push. Never let a simple CSS change break your site again.

This session will be moderately technical and assumes familiarity with the command-line.

Session Track

Front end

Experience Level

Intermediate

Drupal Version