UI Validation via DOM Screenshot Comparison
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional software testing tools are limited in verifying or validating the design or layout of a user interface (UI) of a software application, failing to identify unwanted changes or bugs introduced in the UI when the Document Object Model (DOM) is modified.
Innovation Solution
A system and method that involve making changes to the DOM of a software application, saving and rendering the updated UI, capturing a screenshot, and validating it by comparing the screenshot with a reference image using image matching techniques, while masking variable features to ensure privacy and effective comparison.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Measurement precision
If conventional software testing tools are used to verify UI, then the testing process is simple, but the ability to identify unwanted changes or bugs in UI is insufficient
Solution Approach 1:
The patent creates a visual copy (screenshot) of the rendered UI and compares it against a reference image to validate UI correctness. This copying approach enables precise visual validation without requiring complex manual inspection, directly resolving the contradiction between validation accuracy and system complexity.
Solution Approach 2:
The patent replaces manual UI inspection with automated image processing and comparison algorithms. By substituting mechanical/manual verification with computational image analysis, the system achieves high validation accuracy while maintaining automated operation, effectively resolving the contradiction between measurement precision and operational complexity.
2Adaptability or versatility
If DOM changes are made to update UI, then the UI can be improved or modified, but unwanted changes or bugs may be introduced
Solution Approach 1:
The patent implements a feedback mechanism where the rendered UI is captured as a screenshot and compared against the expected reference image. This feedback loop automatically detects deviations caused by DOM changes, enabling verification of UI correctness while maintaining the flexibility to modify UI through DOM updates.
Solution Approach 2:
The patent performs preliminary validation by comparing the rendered UI screenshot against a pre-established reference image before the UI is deployed or committed. This preliminary action ensures that unwanted changes are detected early, maintaining UI reliability while allowing flexible DOM-based modifications.
3Measurement precision
If screenshot comparison is performed for UI validation, then validation accuracy is improved, but processing time increases
Solution Approach 1:
The patent extracts and compares only the visually relevant portions of the UI by capturing screenshots and performing image comparison. This extraction approach focuses validation efforts on the actual rendered output rather than analyzing entire DOM structures, improving validation accuracy while reducing processing time through targeted comparison.
Data Source
AI summary
Provided are a system and a method for validating a user-interface (UI). The system is configured to cause to make a change to a document object model (DOM) of a software application. The DOM of the software application is associated with the UI of the software application. The systems is configured to save the change associated with the DOM, render an updated user interface based on the changed DOM, capture a screenshot of the updated user interface, and validate the updated user interface based on a comparison between the screenshot and a reference image associated with the updated user interface