Mastercard accelerates releases, saving 9 hours per iteration with AI-powered Percy

Mastercard is a global technology leader with a vast and complex digital ecosystem. The company manages over 150 digital products and platforms and more than 1,000 documentation and content pages, with UI updates being pushed daily by teams across the world. Ensuring brand consistency and a flawless user experience at this scale presents a significant quality assurance challenge.

For the quality engineering team at Mastercard, maintaining visual integrity across a sprawling digital portfolio was a critical priority. The high velocity of daily code changes from global teams created a significant risk of introducing unintended visual bugs. A single CSS modification could have a cascading impact, altering the appearance of hundreds of screens unexpectedly.

The core challenge lay in a gap that traditional testing methodologies could not fill. Functional automation frameworks are designed to verify application logic—does the login button authenticate a user?—but are fundamentally blind to visual correctness. A test could pass while the button itself was rendered in the wrong color, misaligned, or overlapping another element. This created a significant risk of brand dilution and a degraded user experience.

“Manually validating is just not a feasible solution,” explained Harit Narke, a Lead Software Engineer on the team. “It’s slow, it’s prone to error, and we needed a smarter automation solution.” The difficulty of manual checks was clear; in demonstrations, teams often struggled to spot even a fraction of the dozens of subtle changes on a single page. At Mastercard’s scale, this manual approach was unsustainable, creating a major bottleneck and leaving the brand vulnerable to visual regressions.

To address this, Harit and his team championed the adoption of Percy by BrowserStack, integrating it directly into their Jenkins CI/CD pipeline to automate visual testing on every pull request. The solution went far beyond simple screenshot comparisons, leveraging Percy’s advanced architecture to provide stable, accurate, and actionable feedback.

The technical implementation is centered around DOM Snapshotting. Instead of capturing a simple image, which can be inconsistent, Percy captures the page’s Document Object Model (DOM) and all its assets (CSS, images, fonts). This package is then rendered in Percy’s specialized cloud infrastructure, which is rendered across multiple browsers and resolutions which creates a deterministic, pixel-perfect snapshot in a controlled environment. This approach eliminates flakiness caused by local machine differences or browser rendering quirks. To further ensure stability, Percy’s platform automatically freezes animations and handles dynamic data, preventing false positives that would otherwise waste the team’s time.

To combat the challenge of review fatigue at scale, the team leveraged Percy’s AI-powered features:

• Visual Review Agent: This AI engine analyzes the visual diffs, intelligently filtering out “noise” from dynamic content like ad carousels or changing timestamps. It allows the team to focus exclusively on meaningful visual changes that are likely to be regressions caused by code updates.
• Layout-Aware Testing: Moving beyond simple pixel-to-pixel comparison, this capability allows the AI to understand the structural layout of a page. It can flag a critical layout break while ignoring a harmless, minor cosmetic shift, dramatically increasing the signal-to-noise ratio of the test results.

This powerful combination of deterministic rendering and AI analysis, fully integrated into their CI/CD workflow, provided the team with a scalable and reliable system for enforcing visual quality.

The implementation of Percy yielded immediate and transformative results, allowing the team to catch critical bugs, accelerate their workflow, and release with greater confidence.

1. Superior Defect Detection
The automated system began catching subtle but critical bugs that were impossible to detect with functional tests and easily missed by the human eye. In a single iteration, the team detected over 6 significant regression defects. These included:

• A 0.5px padding error, a classic example of a regression that is functionally invisible but visually impactful, which Percy’s pixel-level comparison caught instantly.
• A subtle font change that violated brand guidelines, demonstrating Percy’s role as an automated guardian of brand consistency.
• A missing video link element, which Percy flagged as a structural DOM change from the baseline, preventing a broken user experience from reaching production.

2. Radical Efficiency Gains
By automating the entire visual review process, the team reclaimed approximately 9 hours of engineering effort per iteration. This efficiency was most evident during high-risk events, such as a major Bootstrap UI library update. A change of this magnitude could affect thousands of elements across the platform. Manually auditing these changes would have taken days. With Percy, the team had a comprehensive visual report in just 15 minutes, allowing them to quickly validate intended changes and fix regressions.

3. Enhanced Release Confidence
With visual tests running on every pull request within Jenkins, the feedback loop was dramatically shortened. Visual regressions were caught and fixed before code was merged, “shifting left” the quality process. The Percy build status became a clear go/no-go signal for UI sign-off.

“The confidence factor when we sign off on any particular release is so important,” Harit emphasized. “Percy has been a game-changer for us.” This newfound confidence allows the team to move faster, deploying changes with the assurance that the visual integrity of the user experience remains intact.

By strategically integrating Percy’s AI-powered visual testing into their CI/CD pipeline, the quality engineering team at Mastercard has successfully addressed the critical challenge of maintaining UI integrity across its vast digital portfolio. The initiative, championed by team members like Harit Narke, has proven that automated visual testing is not just a tool for catching bugs, but a foundational component of modern quality assurance. The measurable gains in efficiency, superior defect detection, and enhanced release confidence demonstrate a clear return on investment. This shift from time-consuming manual checks to intelligent, automated validation has allowed Mastercard to protect its brand, ensure a consistent user experience, and empower its teams to innovate with speed and accuracy. As Harit noted, this approach has been a “game-changer,” setting a new standard for how large enterprises can scale quality without compromise.