AI Eliminates Visual Drift and Streamlines Development

A software leader faced visual UI inconsistencies due to hidden dependencies and outdated browser support. Implementing an AI solution using computer vision eliminated these issues, saving development time and streamlining processes for faster delivery with reduced risk.

Client:

Sonatype leads the way in software supply chain automation technology. Trusted by over 10 million developers, Sonatype’s Nexus platform empowers seamless security integration. Empowering developers with real-time insights and guidance, Sonatype streamlines software development, allowing DevOps teams and developers to automatically safeguard their software at every stage of the modern development pipeline.

Problem Statement:

● Unforeseen Visual Defects: Small code changes caused unexpected visual changes in the application due to unaccounted UI dependencies. Traditional functional tests weren’t catching these issues.

● Manual Detection Bottleneck: Developers had to spend time manually identifying these visual defects, slowing down the development process.

● Cross-Browser Compatibility Challenges: Sonatype needed to ensure the application looked consistent across various browsers, including outdated versions like Internet Explorer 8.

● Limited Open Source Options: Open source solutions weren’t viable due to the need for additional engineering resources to develop and maintain them.

Results:

☑️ Eliminated Visual Drift: AI solution achieved complete elimination of visual inconsistencies (drift) in their applications.

☑️ Early Change Detection: AI identifies all code changes, including unintended ones, during the development stage, saving time spent debugging later.

☑️ Improved Development Efficiency: Features like Auto-Maintenance in the AI tool streamline visual validation, freeing developers to focus on core functionality.

☑️ Reduced Risk & Faster Delivery: By catching visual issues early and ensuring consistent UI, AI minimizes risk and accelerates product launch timelines.

AI Solution:

Sonatype implemented Applitools, an AI-powered visual testing platform that uses computer vision to detect and compare visual elements on the screen automatically.

Here’s how it works:

AI-powered element comparison: Instead of comparing individual pixels like traditional tools, this solution uses AI to identify and compare visual elements on the screen. This eliminates false positives caused by minor pixel differences.

○ Automated visual validation: The solution automates the process of capturing and highlighting visual differences, freeing up developer time and effort.

○ Accuracy – element-level and selective: It provides high accuracy by focusing on element-level comparisons rather than pixel-by-pixel analysis. Additionally, it allows ignoring unimportant pixel-level variations.

○ Integration with existing tests: This AI solution seamlessly integrates with Sonatype’s existing testing framework, minimizing disruption to their workflow.

○ Comprehensiveness: It offers a complete solution without requiring additional development work from Sonatype’s team. This ensures faster implementation and avoids diverting resources.

○ Supported solution: Sonatype receives dedicated support from the solution provider, eliminating the need to allocate their own engineers for maintenance.

In summary, this AI solution utilizes computer vision and machine learning to automate visual testing, ensuring consistency in the application’s UI while saving development time and resources.

References:

1. Applitools Trusted by Sonatype to Ensure App Quality in Nexus Lifecycle

Industry: Software Development
Vendor: Applitools

Client: Sonatype