Browserbite: Cross-Browser Testing via Image Processing

TL;DR

Browserbite introduces a novel image processing-based approach for cross-browser testing, effectively identifying rendering differences with high accuracy, surpassing traditional DOM-based methods.

Contribution

The paper proposes a new cross-browser testing method using image segmentation and machine learning, addressing limitations of DOM analysis.

Findings

Achieves an F-score exceeding 0.9 in testing accuracy.

Outperforms existing DOM-based cross-browser testing tools.

Effective in detecting rendering incompatibilities across browsers.

Abstract

Cross-browser compatibility testing is concerned with identifying perceptible differences in the way a Web page is rendered across different browsers or configurations thereof. Existing automated cross-browser compatibility testing methods are generally based on Document Object Model (DOM) analysis, or in some cases, a combination of DOM analysis with screenshot capture and image processing. DOM analysis however may miss incompatibilities that arise not during DOM construction, but rather during rendering. Conversely, DOM analysis produces false alarms because different DOMs may lead to identical or sufficiently similar renderings. This paper presents a novel method for cross-browser testing based purely on image processing. The method relies on image segmentation to extract regions from a Web page and computer vision techniques to extract a set of characteristic features from each region. Regions extracted from a screenshot taken on a baseline browser are compared against regions extracted from the browser under test based on characteristic features. A machine learning classifier is used to determine if differences between two matched regions should be classified as an incompatibility. An evaluation involving 140 pages shows that the proposed method achieves an F-score exceeding 0.9, outperforming a state-of-the-art cross-browser testing tool based on DOM analysis.