Automated layout failure detection for responsive web pages without an explicit oracle

Proceedings of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis

2017

Self Cite

Since people frequently access websites with a wide variety of devices (e.g., mobile phones, laptops, and desktops), developers need frameworks and tools for creating layouts that are useful at many viewport widths. While responsive web design (RWD) principles and frameworks facilitate the development of such sites, there is a lack of tools supporting the detection of failures in their layout. Since the quality assurance process for responsively designed websites is o en manual, time-consuming, and error-prone, this paper presents R D C , an automated layout checking tool that alerts developers to both potential unintended regressions in responsive layout and common types of layout failure. In addition to summarizing R D C 's bene ts, this paper explores two di erent usage scenarios for this tool that is publicly available on GitHub. CCS CONCEPTS•So ware and its engineering → So ware defect analysis; KEYWORDSResponsive web design, presentation failures, layout failures.

Section: Experimental Studiesmentioning

confidence: 76%

Section: Introductionmentioning

confidence: 89%

Section: The Redecheck Tool R D Cmentioning

confidence: 99%

Section: Experimental Studiesmentioning

confidence: 99%

Section: Introductionmentioning

confidence: 99%

See 3 more Smart Citations

ReDeCheck: an automatic layout failure checking tool for responsively designed web pages

Walsh

Kapfhammer

Proceedings of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis

2017

Self Cite

Effective automated repair of internationalization presentation failures in web applications using style similarity clustering and search‐based techniques

Mahajan

Alameer

Software Testing Verif & Rel

et al. 2020

Self Cite

Summary Companies often employ (i18n) frameworks to provide translated text and localized media content on their websites in order to effectively communicate with a global audience. However, the varying lengths of text from different languages can cause undesired distortions in the layout of a web page. Such distortions, called Internationalization Presentation Failures (IPFs), can negatively affect the aesthetics or usability of the website. Most of the existing automated techniques developed for assisting repair of IPFs either produce fixes that are likely to significantly reduce the legibility and attractiveness of the pages or are limited to only detecting IPFs, with the actual repair itself remaining a labour intensive manual task. To address this problem, we propose a search‐based technique for automatically repairing IPFs in web applications, while ensuring a legible and attractive page. The empirical evaluation of our approach reported that our approach was able to successfully resolve 94% of the detected IPFs for 46 real‐world web pages. In a user study, participants rated the visual quality of our fixes significantly higher than the unfixed versions and also considered the repairs generated by our approach to be notably more legible and visually appealing than the repairs generated by existing techniques.

Automatically identifying potential regressions in the layout of responsive web pages

Walsh

Kapfhammer

Software Testing Verif & Rel

2020

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.