Skip to main content

CodeXero

Redefining Transformation
in the Age of AI

Brief and project description

Integrating neural network models into existing systems or software applications, enabling businesses to leverage AI capabilities seamlessly.
In today’s fast-paced and data-driven world, businesses are constantly seeking innovative ways to gain a competitive edge, make smarter decisions, and deliver exceptional customer experiences.

We start by understanding your business – its systems, challenges, and opportunities. Through deep process audits and maturity mapping, we identify exactly where AI and automation can deliver meaningful impact. From there, we craft a tailored transformation strategy aligned with your goals. 

Industry

Location

The challenge

A Deep Integration of AI-Powered Visual Testing

Integrating neural network models into existing systems or software applications, enabling businesses to leverage AI capabilities seamlessly.
In today’s fast-paced and data-driven world, businesses are constantly seeking innovative ways to gain a competitive edge, make smarter decisions, and deliver exceptional customer experiences.

We start by understanding your business – its systems, challenges, and opportunities. Through deep process audits and maturity mapping, we identify exactly where AI and automation can deliver meaningful impact.

The solution

A Deep Integration of AI-Powered Visual Testing

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.

The impact

Increased Velocity, Confidence, and 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.

~9 Hrs
Saved per iteration by automating
6+
Visual bugs detected per iteration
15 Min
To generate UI comparison report

Conclusion

A New Standard for Quality at Scale

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.