Automated Web Page Visual Testing via Gold Image Comparison
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current automated tools inadequately manage the testing and debugging of visual or stylistic aspects of web-based user interfaces across multiple development teams in cloud-based, multi-tenant environments, leading to difficulties in maintaining a consistent user experience due to unintended consequences from changes in CSS or JavaScript code.
Innovation Solution
A suite of automated quality control tools compares actual web pages to 'gold images' on a pixel-by-pixel basis, generating difference files to identify and filter relevant changes, allowing developers to define which web elements are included or excluded from the comparison, reducing noise and false negatives, and enabling quick identification of acceptable or unacceptable differences.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Productivity
If automated tools are used to test web page rendering, then testing efficiency is improved, but the ability to accurately detect visual or stylistic differences deteriorates
Solution Approach 1:
The patent creates pixel-perfect reference images (gold images) that serve as exact visual copies of the expected web page rendering. These gold images are stored and used as the basis for comparison against actual renderings, enabling automated tools to detect even subtle visual differences that would otherwise be imperceptible to machine testing.
Solution Approach 2:
The patent employs color-coded difference images where specific colors represent different types of visual differences (e.g., red for text differences, green for image differences, blue for layout differences). This color-coding system transforms abstract visual comparison data into intuitive visual feedback, significantly improving the precision of visual difference detection while maintaining automated testing efficiency.
2Reliability
If all web elements are compared in the test suite, then comprehensive validation is improved, but false negatives and noise increase
Solution Approach 1:
The patent applies different levels of comparison strictness to different regions of the web page. Critical areas such as text content, buttons, and navigation elements are compared with strict pixel-perfect matching, while less critical areas like background images or decorative elements use more lenient comparison criteria. This localized quality approach maintains comprehensive validation while reducing false negatives from non-critical differences.
Solution Approach 2:
The patent divides the web page into multiple regions or zones, each with its own comparison rules and tolerance levels. By segmenting the page into header, navigation, content, sidebar, and footer regions, the system can apply targeted validation strategies to each segment, improving the signal-to-noise ratio by focusing attention on critical areas while tolerating minor variations in non-critical areas.
3Manufacturing precision
If pixel-by-pixel comparison is used, then visual consistency validation is improved, but processing time and complexity increase
Solution Approach 1:
The patent performs preliminary processing of web pages by generating gold images in advance and storing them for reference. During actual testing, the system only needs to compare against these pre-generated references rather than performing complex analysis from scratch. This preliminary action significantly reduces processing complexity while maintaining pixel-by-pixel validation accuracy.
Solution Approach 2:
The patent extracts and isolates specific visual elements for comparison, such as text regions, image regions, and layout structures, rather than processing the entire web page as a single complex unit. By extracting these key elements separately, the system reduces processing complexity while maintaining comprehensive visual consistency validation across all critical elements.
Data Source
AI summary
Methods and systems are provided for testing visual elements in a rendered web page. The method includes defining a gold image at a first point within a web application, taking a screen shot of an actual image at the first point during execution of the web application, and comparing the gold image to the actual image and generating a difference image based on the comparison. The difference image may include a first region highlighting a first difference between the gold image and the actual image within an area common to both images, and a second region highlighting a second difference between the gold image and the actual image which is not within an area common to both images.