Battlefy Accelerates UI Modernization with Sauce Labs Using Visual Testing

Battlefy is a fast-growing startup in the esports industry that serves customers including Blizzard Entertainment, Riot Games, Electronic Arts, PUBG Corp, id Software, Nintendo, and a global market of millions of active players localized in 11 different languages. They help gamers and non-gamers alike find and organize esports tournaments. With the rapid growth of online gaming, Battlefy was consistently pushing out new features to their web application to keep up with ever-changing demand. Leveraging the Sauce Labs visual testing solution, Sauce Visual, was critical to the team’s success, migrating to React from Angular and validating the impact of code changes across their User Interface (UI).

The Challenge

Battlefy’s technology powers e-sports experiences for world-class brands and global game studios. Brands and publishers trust Battlefy to provide an exciting, competitive experience for players around the world. Hundreds of their components are put to the test daily to enable visitors to search and join upcoming esports tournaments. Their user experience is everything to them and if it’s broken for their end-users, it’s game over.

Back in 2013, the latest go-to technology stack was MEAN (Mongo, Express, Angular, Node). As advances in JavaScript emerged, the team was faced with the challenge of migrating their large UI application built in Angular over to React.

With a large scale legacy code migration looming, the Battlefy team was worried about testing all the code they were moving over. Their main goal was to ensure things continued to both look and function correctly.

On top of that, the Battlefy team was moving fast. They were constantly building and shipping new features and components. It got to a point where creating and maintaining tests became a huge bottleneck, slowing down their release cycle. It became more and more important to get automated test coverage quickly and easily to ensure confidence, without spending a lot of time writing tests.

In order to successfully ensure their web app was visually flawless and functioned properly, they needed an automated visual testing solution.

The Solution

Battlefy selected Sauce Labs to help them with their visual testing needs for several reasons. Sauce Visual integrates with Storybook, a user interface development environment that runs outside of the main app and integrates directly with React, allowing them to quickly get visual component testing across their Storybook library in seconds. It integrates directly into their Continuous Integration pipeline with CircleCI build tool and GitHub pull requests, with automated commit status update. As a result, visual test runs are triggered automatically as part of their build process.

Even though the team moves fast, Sauce Visual has always been there to notify us when visual regressions would occur as it is seamlessly connected into our Continuous Integration pipeline
Jaime Bueza
Chief Evangelist

With Sauce Visual, Battlefy is easily able to detect and prevent visual regressions on production, scale out the engineering QA process, and accelerate UI modernization. Designers and engineers at Battlefy work closely to build engaging experiences for players around the world. Sauce Visual’s approval workflow has been critical to ensuring that what gets shipped to production continues to be high quality and in-line with the design team’s vision.

“Even though the team moves fast, Sauce Visual has always been there to notify us when visual regressions would occur as it is seamlessly connected into our Continuous Integration pipeline,” said Jaime Bueza, Chief Evangelist at Battlefy. Throughout the years, the team has managed to identify, plan, and execute UI migrations on different parts of the platform with minimal risk.

The Results

Battlefy engineering has been able to leverage Sauce Visual as a solution for reducing risks and increasing developer productivity. They reduced the time spent manually testing their UIs and writing component unit tests. This saved them over 40 hours a week, equivalent to having another full-time employee.

As newer software engineers on-board and begin to ship code to production, they can do so more quickly because they are able to test hundreds of components in minutes and verify their changes right away. It has enabled new and existing engineers to catch visual regressions faster and earlier on in the development cycle.

“Build times are amazing right now considering we have almost 400 UI states,” reports Jaime. The team runs more than 100,000 visual test cases a month.

After using Sauce Visual for over a year now, it has consistently performed with fast build times and continues to test a number of screen resolutions and browsers, ensuring everything appears to the users as it was intended.

Industry

Internet

Company Size

51-100

Even though the team moves fast, Sauce Visual has always been there to notify us when visual regressions would occur as it is seamlessly connected into our Continuous Integration pipeline.

Jaime Bueza
Chief Evangelist

Topics

Visual TestingCI/CDAutomated testing