Developer Tutorials and Guides
Introduction to Diffy for Visual Regression Testing
Catch visual and functional issues before they reach production.
Visual regression testing is a simple way to create end-to-end test coverage
Imagine spending weeks polishing the design of a new feature, only to find out that a seemingly unrelated section of your website broke in the process. It's a frustratingly common problem that developers and designers face when making updates to a user interface (UI). Even small tweaks can inadvertently cause unexpected issues, which can go unnoticed until it's too late. This is where visual regression testing (VRT) comes in, saving teams from the nightmare of invisible bugs.
Visual regression testing tools, like Diffy and BackstopJS, help developers ensure that UI changes don't accidentally affect other parts of the website.
Example interactive Visual Regression Testing report
What is Visual Regression Testing?
In web development, even a minor change to a CSS file or JavaScript behavior can cause unintended shifts in how a website looks. These unintended changes are called visual regressions.
Visual regression testing helps detect these problems by comparing screenshots of web pages before and after a change. If there’s a significant difference between the two screenshots, the test flags it, allowing developers to address the issue before it goes live.
Why Use Diffy for Visual Regression Testing?
Diffy is a lightweight and easy-to-use tool designed to simplify the visual regression testing process. It automates the process of comparing multiple versions of a website, highlighting any changes that could potentially cause issues. Diffy is particularly useful for:
- Continuous Integration (CI) environments, where it automatically runs tests after each deployment.
- Projects with frequent design or layout changes, ensuring that updates don’t introduce new bugs.
- Cross-browser testing, helping teams ensure that their site looks consistent across different browsers and devices.
Additionally, Diffy has Drupal integrations, such as authenticating with a user account, making it easier to test websites that require login functionality.
Diffy also offers a web interface that allows easy access for all stakeholders of the project. This is a key feature that makes it stand out compared to alternatives like BackstopJS, which lacks a comprehensive web interface for stakeholder collaboration.
At CodeLift, we use Diffy extensively for all our clients because it is a simple and cost-effective way to add a significant amount of test coverage to any project. This approach ensures that we can confidently release updates without worrying about visual inconsistencies or errors.
Real-World Example: Drupal Migration
Let’s look at a real-world scenario where visual regression testing (VRT) can be a game changer. Imagine you’re a developer working on migrating a large Drupal 7 site to Drupal 11. In this migration, one of the key challenges is ensuring that the visual integrity and behavior of the site remain consistent across both versions. You may have the added cost of redeveloping the theme to fit the newer version, but the value of running VRT during this process is immense.
With VRT, you can run visual tests to compare the old Drupal 7 site against the newly migrated Drupal 11 version. This simple test ensures that, aside from necessary theme adjustments, the site behaves the same way, and no visual elements have broken during the upgrade. Additionally, because data migration is a critical part of the process, VRT can help verify that the data is being displayed correctly—by simply printing the data to the screen and comparing it between versions.
By identifying any discrepancies in both the visuals and the data migration early, VRT saves both time and resources, allowing your team to confidently move forward with the migration.
Conclusion: Why You Should Care
No matter how small the update, there’s always the risk of something going wrong. VRT not only catches visual and functional issues before they reach production, but it also provides a simple and effective way to automatically test a significant percentage of your site's functionality.
