Automated Layout Detection for Overlapping Web Elements
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
GUI testing is impractical due to the multitude of browsers and operating systems, leading to a risk of layout corruption issues like overlapping web elements, as it is impractical to test every possible combination, resulting in potential rendering problems.
Innovation Solution
An automated layout detection system that iteratively analyzes web elements in a GUI page by identifying parent and child elements, comparing their areas to detect overlapping elements, using a browser object model and document object model to interact with and control browsers, and generating a web element list to identify and report overlapping issues.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If manual GUI testing is performed across multiple browsers and operating systems, then layout corruption detection capability is improved, but testing time and resource consumption increase significantly
Solution Approach 1:
The system performs self-testing by automatically analyzing its own GUI layout without requiring external manual testing. The automated detection mechanism iterates through web elements, calculates their areas, and identifies overlapping issues independently, eliminating the need for time-consuming manual testing across multiple browser and operating system combinations.
Solution Approach 2:
The patent replaces manual mechanical testing processes with an automated computational system. Instead of human testers manually checking layouts across different environments, the system uses automated scripts that interact with browsers through object models, programmatically detect overlapping elements by comparing area calculations, and generate reports without human intervention.
2Measurement precision
If comprehensive GUI testing across all browser and operating system combinations is performed, then detection precision is improved, but device complexity and resource requirements increase
Solution Approach 1:
The testing system is segmented into independent, modular components: a layout detection system that iterates through elements, an element identification module that parses HTML structures, an area calculation module that computes dimensions, and a report generation module. Each component performs a specific function and can operate independently, reducing overall system complexity while maintaining comprehensive testing capabilities across multiple browsers and operating systems.
Solution Approach 2:
The automated detection system is designed with universal functionality that works across all browser and operating system combinations through standardized interfaces. The system uses browser object models and document object models that are broadly compatible, allowing a single testing framework to detect overlapping elements regardless of the underlying platform, eliminating the need for separate complex testing systems for each combination.
3Productivity
If automated layout detection is implemented, then productivity is improved, but implementation complexity increases
Solution Approach 1:
The system introduces intermediary components that simplify the automation process: browser object models that provide standardized access to browser functionality, document object models that represent HTML structures in a uniform way, and an intermediary area calculation mechanism that translates diverse element types into comparable geometric representations. These intermediaries shield the core detection logic from platform-specific complexities, enabling high productivity without proportionally increasing implementation complexity.
Data Source
AI summary
A method and apparatus is provided for automatically detecting layout corruption in graphical user interface (GUI). A layout detection system iteratively analyzes web elements contained in a GUI page. The layout detection system identifies a parent web element and its child web elements. Overlapping web elements are detected by comparing an area of the parent web element to the total area of child web elements contained within the parent web element.


