Abstract
SummaryProviding 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.
Highlights
Before the advent of smart mobile devices being used to access the web, the main problem facing front-end web developers was the time-consuming task of ensuring that their web pages displayed correctly on different browsers [1]the explosion and continuing proliferation of mobile devices has since drastically exacerbated this problem, as developers sought to support the myriad of different screen sizes associated with each unique device.As mobile devices continue to integrate further into the daily lives of many people
While the number of ‘used’ blocks reflects a smaller subset of the overall Cascading Style Sheets (CSS) needed to style a particular page, a developer will still need to understand, use and navigate through all of the CSS rules defined for the website when modifying a particular page. As seen from these summary values, our selection of web pages represents a range of Hypertext Markup Language (HTML) and CSS style sheet sizes, with the number of Document Object Model (DOM) nodes ranging from 106 to 472 and the number of CSS blocks ranging from as few as 166 to a maximum of 5958, of which we found that a range of 31 to 158 blocks are explicitly used by our subjects
While the results of our experiments show that REDECHECK-RM failed to detect a small proportion of the injected layout changes, manual analysis of some of these false-negative results revealed that the vast majority of them were due to the changes in the underlying DOM representation of the web pages being too small to produce a difference in the extracted attribute sets
Summary
Before the advent of smart mobile devices being used to access the web, the main problem facing front-end web developers was the time-consuming task of ensuring that their web pages displayed correctly on different browsers [1]the explosion and continuing proliferation of mobile devices has since drastically exacerbated this problem, as developers sought to support the myriad of different screen sizes associated with each unique device.As mobile devices continue to integrate further into the daily lives of many people Before the advent of smart mobile devices being used to access the web, the main problem facing front-end web developers was the time-consuming task of ensuring that their web pages displayed correctly on different browsers [1]. The explosion and continuing proliferation of mobile devices has since drastically exacerbated this problem, as developers sought to support the myriad of different screen sizes associated with each unique device. To tackle the problem of device proliferation, responsive web design (RWD) is a widely used design approach that allows developers to build websites with the aim of providing an optimal user experience regardless of individual device constraints, including screen size [4].
Sign-in/Register to view highlights & summary Sign-in/Register to access full text options 
Free) 
Talk to us
Join us for a 30 min session where you can share your feedback and ask us any queries you have
Schedule a call
