AI-Powered Visual Testing Made Easy
Compare the Live Screen with the Design You Approved.
Make visual testing easy to set up, fast to run, and simple to review. Capture a baseline from Figma, Chrome, or an Android device. AI Studio compares screenshots and selected element properties, highlights differences, and generates HTML reports you can open directly in Studio.
Start a Comparison | Book a Demo
– Baselines from Figma, live web, and live Android applications
– Screenshot comparison alongside element-level checks
– Configurable rules for text, colour, typography, state, and layout
– Individual screen reports and multi-screen summaries
Easy Visual Testing. Faster Reviews. Clearer Results.
AI Studio’s UI Comparison Tool combines automated visual comparison with AI-assisted analysis to help teams check application screens against approved designs and captured baselines. Its guided workspace brings baseline capture, comparison settings, execution, and reporting together, making visual testing easier to manage.
Compare a Figma design with a live application or check the latest screen against a previously captured reference. Review highlighted differences, investigate element changes, and confirm whether updates match your requirements.
Simplify Visual Testing
Capture a reference, choose your checks, and run a comparison through one workspace.
Accelerate Screen Reviews
Use automated screenshot and element comparisons to reduce repetitive manual inspection.
Identify UI Changes
Find missing elements, new elements, and changes to selected properties.
Keep Your Team in Control
Review comparison evidence before accepting application changes or updating approved baselines.
Our Approach
01.Choose Your Baseline
Select a Figma frame, capture a live web or Android screen, or reuse a local reference.
02.Review the Reference
Preview the screenshot and inspect captured elements before using them as the baseline.
03.Configure Your Checks
Choose a preset or select individual properties. Review dynamic-text warnings and save the policy.
04.Run the Comparison
Open the corresponding application screen and compare it through the connected web or mobile session.
05.Review the Results
Inspect highlighted screenshots, element changes, and comparison counts in the HTML report.
06.Maintain Approved Baselines
Confirm intended changes with your team and update references as approved designs evolve.
Understand What Changed
Each comparison reports three types of element difference.
| Difference | What It Means |
|---|---|
| Missing | An element exists in the baseline but is absent from the application screen. |
| New | An element appears in the application but was not present in the baseline. |
| Changed | An existing element differs in one or more selected properties, such as text, colour, size, or state. |
AI Studio also aligns the baseline and application screenshots and highlights regions that differ. When screen dimensions vary, the report notes any scaling used to place both images on a common canvas.
Choose Your Baseline Source
Figma Design Baselines
Compare implemented screens with approved Figma designs. Pull a specific frame using its node ID, preview the downloaded image, and select the screens you want to compare.
Use an active Chrome session for Figma-to-web comparison, or an Android session for Figma-to-mobile comparison. File details and access tokens can come from your environment configuration or be entered when needed.
Live Web Baselines
Capture a reference directly from a Chrome session started through Web Record. AI Studio saves the screenshot, element details, comparison policy, and element crops for review.
Use the captured baseline to compare later versions of the same page and investigate visual or property changes.
Live Mobile Baselines
Capture an Android application screen through an active mobile session. AI Studio saves the screenshot and element details, providing a reference for subsequent comparisons with the live device.
Offline Baseline Comparison
Reuse baseline PNG and JSON files already stored in your project. Offline mode does not call the Figma API, allowing teams to compare against previously captured references.
Choose What Each Element Checks
After capturing a web baseline, open Baseline Elements to inspect individual elements. Rename them, review their cropped images, and choose the properties to validate.
Apply a preset across the screen or configure individual checks, then save the policy for future comparisons.
| Property | What It Checks |
|---|---|
| Text Value | Visible text |
| Accessible Name | Accessible name or content description |
| Text Colour | Foreground colour |
| Font Size | Text size |
| Font Family | Typeface |
| Background | Background colour |
| Border | Border colour |
| Enabled | Enabled state |
| Clickable | Clickable state |
| Selected | Selected state |
| Bounds / Size | Position and dimensions |
Available properties depend on the element type, including buttons, inputs, labels, badges, images, and containers.
Start Quickly with Comparison Presets
Choose a preset to configure your review without selecting every property individually.
| Preset | What It Includes |
|---|---|
| Strict | Default property checks for each element type, plus screenshot comparison |
| Style Only | Colours, typography, enabled and clickable states, plus screenshot comparison |
| Content Only | Text and accessible names |
| Visual Only | Screenshot comparison |
Handle Changing Content with Clear Policies
Balances, amounts, and other live values can change between runs. AI Studio warns when an input appears to contain dynamic text and initially disables its text check for your review.
Default policies also omit selected checks that commonly vary between environments, including bounds for labels, buttons, and badges, and background or border checks for labels. Your team can adjust these settings before comparing.
Clear Reports for Faster Investigation
Each comparison generates an HTML report that opens from Reports in Studio.
Review:
- Baseline and application screenshots
- Highlighted visual differences
- Missing and new elements
- Changes to selected element properties
- An accompanying AI/ML report
The comparison log displays counts for missing elements, new elements, and property changes when the run finishes. Use the evidence to investigate differences and decide whether the application or baseline needs updating.
Compare Multiple Screens in One Batch
Review complete journeys, such as welcome, login, and home, through batch comparison.
Begin a batch, capture or compare each screen, and generate a multi-screen HTML summary. A sidebar lists the screens and links to their individual reports.
Each tester maintains a separate batch on a shared Studio server, supporting independent reviews across the team.
Why UI Comparison Tool
Multiple Baseline Sources
Capture references from Figma, live web applications, and live Android screens.
Targeted Figma Capture
Download an individual frame by node ID and preview it before comparison.
Automated Screenshot Comparison
Align screenshots and highlight visual differences for review.
Element-Level Validation
Identify missing, new, and changed elements using selected property checks.
Easy Comparison Presets
Start with Strict, Style Only, Content Only, or Visual Only settings.
Configurable Review Policies
Save individual element checks and reuse them across comparisons.
Dynamic-Text Warnings
Review checks for values that may change between runs.
Offline Comparison
Use local baseline files without additional Figma API calls.
Multi-Screen Batch Reviews
Bring individual screen reports together in one navigable summary.
Visual and AI/ML Reports
Open comparison evidence directly within Studio.
Maven Execution
Run configured comparisons outside the live Studio recording session.
Separate Tester Batches
Keep concurrent batch reviews independent on a shared deployment.
USA