Canva utilizes automated visual testing for confidence in every product update

THE CHALLENGE

Maintaining the visual integrity of the application remained a manual and unsustainable task

Canva was founded in 2012. Since then, it has grown rapidly to design and build a revolutionary online design and publishing platform. Their application empowers anyone and everyone “to design anything, and publish anywhere” and has taken the design and publishing industry by storm—making them one of just a few unicorns out of Australia.

Throughout Canva’s growth, their engineering teams have had to simultaneously optimize deployment efficiency while maintaining product quality. Test automation has been crucial to that balance, helping them write and deploy code that reliably functions as expected. Maintaining the visual integrity of their application, however, remained a manual and unsustainable task.

Canva knew that manually testing was not only expensive and time-consuming, but also would have failed to scale at the speed their team was growing. As they continued to build their core web application alongside their marketing website and mobile apps, it became increasingly difficult to foresee how each product update would visually impact their UI across browsers and screen widths.

THE SOLUTION

Percy has helped Canva augment their manual UI testing efforts with an automated visual testing solution

Canva and Percy worked together to implement automated visual testing across their React application and Storybook components, running tests in tandem with their Buildkite CI pipeline. With Percy’s two-way Github integration, Canva gets notified every time a visual change is detected in a pull request. Now every engineer can easily QA their own work with a single click to the Percy UI.

Canva has been able to reduce the time and resources they spend on manual UI testing with Percy’s cross-browser visual testing functionality. Seeing visual diffs in both Firefox and Chrome rendered and compared to their baseline gives Canva a task list of visual changes–both intended and unintended. Visual regressions caused by browser rendering subtleties that wouldn’t have been caught otherwise are also highlighted for review.

Canva’s entire engineering and product teams now have insight into how their UI is impacted every time their product is updated. Applying the same automation culture to the appearance of their UI helps them maintain consistency, especially as new developers join the team. With Percy, Canva has been able to add visual tests to their application, ensuring that both components and full pages are rendered correctly 100% of the time—ultimately giving their whole team visual confidence in every code change.