Canva utilizes automated visual testing for confidence in every product update

Industry
SaaS
Size
5,000 employees
Location
Australia
Products Used
Products Used
Ready to try BrowserStack?
Join over 6M developers & 50K teams across 135 countries.

Introduction

Canva, the revolutionary online design platform, faced challenges maintaining the visual integrity of their rapidly growing application across browsers and devices. Manual testing was time-consuming, costly, and unsustainable at scale. By implementing Percy’s automated visual testing, integrated seamlessly with their CI/CD pipeline, Canva now detects visual changes instantly in pull requests. This has drastically reduced manual QA efforts, ensured cross-browser consistency, and empowered engineers to maintain a flawless UI with confidence—making every code change seamless and reliable.

The challenge

Manual visual testing was unsustainable

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.

Some things can’t be easily tested with unit tests and integration tests, and we didn’t want to maintain a visual regression testing solution ourselves. Percy has given us more confidence when making sweeping changes across UI components and helps us avoid those changes when they are not meant to happen.
Joscha Feth
Joscha Feth, Engineer, Canva
The solution

Augment 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.

The impact

Scalable automated visual testing solution

The main criterion for choosing a testing tool was the capability to test on real devices. Joscha narrates, “Over the years, I have seen that many times when we test on an emulator, we get positive feedback. But when we release the product into the market, customer feedback is the opposite – they would say ‘this doesn’t work on my phone’.”

Additionally, service delivery teams wanted to test on multiple real browser-device combinations remotely with minimum latency between setting up the test environment, starting the tests, and getting back the results of the tests.

To fulfill these critical criteria, they embarked upon their quest to find the perfect testing solution with ten different vendors; one of these candidates was BrowserStack. They then performed the same set of testing and setups for all the vendors and chose BrowserStack as it best suited all their criteria. “BrowserStack was the fastest one in the performance checks we did,” says Joscha.

 

Try BrowserStack for your team

Join over 6M developers & 50K teams across 135 countries.

View pricing