Automatically identifying potential regressions in the layout of responsive web pages
Persistent URL
Author(s)
Walsh, Thomas A.
Kapfhammer, Gregory M.
McMinn, Phil
Date Issued
August 3, 2020
Abstract
Providing a good user experience on the ever‐increasing number and variety of devices being used to browse the web is a difficult, yet critical, task. With responsive web design, front‐end web developers design web pages so that they dynamically resize and rearrange content to best fit the dimensions of a device's screen. However, when making code modifications to a responsive page, developers can easily introduce regressions from the correct layout that have detrimental effects at unpredictable screen sizes. For instance, the source code change that a developer makes to improve the layout at one screen size may obscure a page's content at other sizes. Current approaches to testing are often insufficient because they rely on limited tools and error‐prone manual inspections of web pages. As such, many unintended regressions in web page layout often go undetected and ultimately manifest in production websites. To address the challenge of detecting regressions in responsive web pages, this paper presents an automated approach that extracts the responsive layout of two versions of a page and compares them, alerting developers to the differences in layout that they may wish to investigate further. We implemented the approach and empirically evaluated it on 15 real‐world responsive web pages. Leveraging code mutations that a tool automatically injected into the pages as a systematic simulation of developer changes, the experiments show that the approach was highly effective. When compared with manual and automated baseline testing techniques, it detected 12.5% and 18.75% more injected changes, respectively. Along with identifying the best parameters for the method that extracts the responsive layout, the experiments show that the approach surpasses the baselines across changes that vary in their impact, but works particularly well for subtle, hard‐to‐detect mutants, showing the benefits of automatically identifying regressions in web page layout.
Journal
Software Testing, Verification and Reliability
Department
Computer Science
Citation
Walsh, T, Kapfhammer, G, McMinn, P. Automatically identifying potential regressions in the layout of responsive web pages. Softw. Test. Verif. Reliab. 2020;e1748. https://doi.org/10.1002/stvr.1748
Publisher
Wiley
Version of Article
Published article
DOI
10.1002/stvr.1748
ISSN
1099-1689
Rights
CC-BY 4.0
File(s)![Thumbnail Image]()
![Thumbnail Image]()
Name
2020-08-03_Kapfhammer_Automatically_Access_Instructions.pdf
Description
Access Instructions
Size
77.57 KB
Format
Adobe PDF
Checksum (MD5)
211a413a28c9ebef92b34e3d54d3468a
Name
2020-08-03_Kapfhammer_Automatically.pdf
Description
Published Article
Size
2.94 MB
Format
Adobe PDF
Checksum (MD5)
7eca184edbe27ca5af1be6056b5b8d89