Automatic detection of potential layout faults following changes to responsive web pages

Due to the exponential increase in the number of mobile devices being used to access the World Wide Web, it is crucial that web sites are functional and user-friendly across a wide range of web-enabled devices. This necessity has resulted in the introduction of responsive web design (RWD), which uses complex cascading style sheets (CSS) to fluidly modify a web site’s appearance depending on the viewport width of the device in use. Although existing tools may support the testing of responsive web sites, they are time consuming and error-prone to use because they require manual screenshot inspection at specified viewport widths. Addressing these concerns, this paper presents a method that can automatically detect potential layout faults in responsively designed web sites. To experimentally evaluate this approach, we implemented it as a tool, called ReDeCheck, and applied it to 5 real-world web sites that vary in both their approach to responsive design and their complexity. The experiments reveal that ReDeCheck finds 91% of the inserted layout faults.