Page Segmentation using Visual Adjacency Analysis

Abstract

Page segmentation is a web page analysis process that divides a page into cohesive segments, such as sidebars, headers, and footers. Current page segmentation approaches use either the DOM, textual content, or rendering style information of the page. However, these approaches have a number of drawbacks, such as a large number of parameters and rigid assumptions about the page, which negatively impact their segmentation accuracy. We propose a novel page segmentation approach based on visual analysis of localized adjacency regions. It combines DOM attributes and visual analysis to build features of a given page and guide an unsupervised clustering. We evaluate our approach, implemented in a tool called Cortex, on 35 real-world web pages, and examine the effectiveness and efficiency of segmentation. The results show that, compared with state-ofthe-art, Cortex achieves an average of 156% increase in precision and 249% improvement in F-measure.

Automatically Detecting Visual Bugs in HTML5 Games

“…Bajammal and Mesbah [3] automatically inferred the semantic role of regions in a web page and automated the testing of web accessibility requirements. In another work by Bajammal and Mesbah [2], they combined visual analysis with DOM attributes to improve automated web page segmentation, which can assist with bug localization. These works focus on segmenting and testing the structure of web pages, i.e., what is represented in the DOM, but as previously explained, the contents of the <canvas> are not represented in the DOM, meaning these approaches cannot be used to automatically catch visual bugs in <canvas> games.…”

“…To evaluate our approach, we created a custom <canvas> game using the PixiJS 1 library and a freely available asset pack 2 . PixiJS is a popular free and open-source <canvas> rendering library for creating 2D animations with the <canvas>.…”