Automated Layout Detection for Overlapping Web Elements

Resolve Bottlenecks,
Find Innovative Solutions
Generate 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

VSEngineering 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

Engineering Contradiction:
Improvelayout corruption detection capabilityVSAvoidtesting time
Core Design Contradiction:
ReliabilityVSLoss of time

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.

Inventive Principle:
Principle #25Self-service

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.

Inventive Principle:
Principle #28Mechanics substitution (Replace mechanical system)

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

Engineering Contradiction:
Improvedetection precisionVSAvoidtesting system complexity
Core Design Contradiction:
Measurement precisionVSDevice complexity

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.

Inventive Principle:
Principle #1Segmentation

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.

Inventive Principle:
Principle #6Universality (Multi-functionality)

3Productivity

If automated layout detection is implemented, then productivity is improved, but implementation complexity increases

Engineering Contradiction:
Improvetesting efficiencyVSAvoidsystem implementation complexity
Core Design Contradiction:
ProductivityVSDevice complexity

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.

Inventive Principle:
Principle #24Intermediary (Mediator)

Data Source

PatentUS10127202B2Detecting overlapping web elements in a graphical user interface
Publication Date: 2018.11.13 CA TECH INC
  • US10127202B2 patent drawing
  • US10127202B2 patent drawing
  • US10127202B2 patent drawing

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.