Enhancing the Unified Design System with automated visual testing

By Constantinos Evangelou, Interaction designer

Maintaining the quality and consistency of a design system is a continuous challenge, especially as it evolves to meet new requirements. At DSF, we use visual regression testing with Percy, a visual testing and review platform, to maintain the reliability and visual consistency of our design system’s developer assets during updates. In this post, we’ll explore how Percy fits into our workflow and the benefits it provides. 

What is visual regression testing?

Visual regression testing is a method of comparing visual snapshots of web pages or components to detect unintended changes in their appearance or functionality. It’s particularly useful for identifying discrepancies caused by CSS or design updates that might go unnoticed in traditional testing workflows, especially in a design system where interconnected elements share the same CSS base. 

For example, a change to the label of a text input can unintentionally affect the label of a select component since they share the same classes. Visual regression testing helps identify these cascading effects, making it an essential practice for maintaining overall consistency. 

Why is visual regression important

It offers numerous benefits, helping to maintain the consistency and reliability of our design system. Here’s why it matters:

• Ensure quality: Catch and fix visual bugs before they are released to the teams building services and websites, safeguarding the design system’s quality.
• Build trust: Strengthen confidence among implementing teams by identifying unintended changes early, minimising disruptions to the user experience.
• Preserve brand integrity: Guarantee consistent visuals presentation across the entire UI, reinforcing brand integrity and fostering user trust.
• Enhance end-user experience: Deliver a seamless and familiar experience for end users, improving usability and reinforcing brand identity.

Why we chose Percy

We needed a solution that seamlessly integrates into our workflow and provides comprehensive results. Percy stood out for several reasons:

1. Ease of integration: It fits well into our existing developing tools and CI/CD pipeline and tools.
2. Change recognition: Percy identifies changes in screenshots and automatically notifies the team through the CI/CD pipeline, ensuring swift detection and review. 
3. Collaboration-friendly: Its dashboard and integration with GitHub pipelines makes it easy for the team to review, approve or flag changes.
4. Detailed snapshots: Percy captures pixel-perfect screenshots and highlights differences with precision. 
5. Responsive and multi-browser testing: It ensures design consistency across various devices and browsers.

How we use Percy

For every update made to the Unified Design System, a new branch is created from the latest version. The team implements the required code changes in this branch, and once the updates are ready for review, the code is pushed to GitHub, and a pull request is created to merge it into the main branch. 

This is where Percy comes into play. Visual regression testing with Percy is one of the automated checks that runs on every pull request.

To facilitate this, we’ve created seven special-purpose HTML pages, that include all the components, patterns and their possible variations. Percy uses these pages to compare against the latest accepted baseline and a script which performs the actual test. When Percy detects a visual change, our team gets notified, the pull request indicates the issue on the automated checks and merging is blocked until the issue is addressed. 

Our team then reviews the issues detected and decides whether to update the code or accept if the change is intentional.  

Only after all issues are resolved or accepted will the pull request be allowed to merge into the main branch. Once merged, the Percy baseline is updated to reflect the latest version, ensuring future visual checks compare against the most current state.

Real example

Recently, our team made a minor update to improve code structure and maintainability, but Percy flagged an issue that we hadn’t noticed. Our change, which should not have a visual effect, caused the header’s vertical spacing to change. Thanks to Percy, we were able to catch the issue before it made it to production, ensuring a smoother user experience on all devices and preventing unnecessary fixes after deployment. 

Conclusion

Visual regression testing with Percy has become an integral part of our workflow at DSF. It allows our design system to evolve while maintaining consistency and reliability. By embedding this practice into our design system’s change process, we have improved our team’s efficiency and ensured a more reliable user experience.