Web Page Visual Break Detection via Masked Image Comparison
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Automatically determining whether a web page is visually broken after modifications, such as those intended for security or functionality improvements, is challenging due to the difficulty in distinguishing intended changes from unintended visual alterations, leading to potential false errors.
Innovation Solution
A method involving the generation and application of masks to rendered images of web pages, where masks identify and remove intended-to-change regions, allowing for the comparison of stenciled images to determine visual equivalence and detect visual breaks.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Productivity
If simple image comparison is used to detect visual breaks, then detection speed is improved, but false error rate increases due to inability to distinguish intended changes from unintended visual alterations
Solution Approach 1:
The patent segments the web page image into multiple regions using masks, where each mask identifies specific areas that are expected to change (such as ad regions, dynamic content areas). By dividing the image comparison task into region-specific comparisons, the system can ignore intended changes in masked regions while focusing on unmasked regions for break detection, thereby reducing false errors while maintaining efficient comparison operations.
2Measurement precision
If comprehensive image comparison is performed to accurately detect all visual changes, then detection accuracy is improved, but processing time increases
Solution Approach 1:
The patent extracts and removes the masking operation from the overall image comparison process. By pre-identifying and masking out regions that are expected to change (such as advertisements, dynamic news content, and other intentionally variable elements), the system reduces the effective comparison area. This extraction of problematic regions allows for faster comparison of only the relevant unmasked areas, improving processing speed while maintaining accurate detection of actual visual breaks in the unmasked regions.
Data Source
AI summary
In an embodiment, a method comprises rendering a first image of a first user interface based on a first set of instructions; rendering a second image of a second user interface based on a second set of instructions; generating a first mask comprising a plurality of points, wherein each point in the first mask indicates whether a first point in the first image and a second point in the second image are different; rendering a third image of a third user interface based on a third set of instructions, wherein the first set of instructions are different than the third set of instructions and the first image is different than the third image; determining that the first image is equivalent to the third image based on the first image, the first mask, and the third image.