Automated Layout Failure Detection for Responsive Web Pages Without an Explicit Oracle

As the number and variety of devices being used to access the World Wide Web grows exponentially, ensuring the correct presentation of a web page, regardless of the device used to browse it, is an important and challenging task. When developers adopt responsive web design (RWD) techniques, web pages modify their appearance to accommodate a device’s display constraints. However, a current lack of automated support means that presentation failures may go undetected in a page’s layout when rendered for different viewport sizes. A central problem is the difficulty in providing an automated “oracle” to validate RWD layouts against, meaning that checking for failures is largely a manual process in practice, which results in layout failures in many live responsive web sites. This paper presents an automated failure detection technique that checks the consistency of a responsive page’s layout across a range of viewport widths, obviating the need for an explicit oracle. In an empirical study, this method found failures in 16 of 26 real-world production pages studied, detecting 33 distinct failures in total

ReDeCheck: An Automatic Layout Failure Checking Tool for Responsively Designed Web Pages

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 often manual, time-consuming, and error-prone, this paper presents ReDeCheck, 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 ReDeCheck’s benefits, this paper explores two different usage scenarios for this tool that is publicly available on GitHub

Automatic Identification of Presentation Failures in Responsive Web Pages

With the increasing number and variety of devices being used to access the World Wide Web, providing a good browsing experience to all users, regardless of device, is a critical task. To do this, many web developers now use responsive web design (RWD) to build web pages that provide a bespoke layout tailored to the specific characteristics of the device in use, normally the viewport width. However, implementing responsive web pages is an error-prone task, as web page elements can behave in unpredictable ways as the viewport expands and contracts. This leads to presentation failures — errors in the visual appearance of the web page. As well-designed responsive web pages can have an array of benefits, identifying presentation failures quickly and accurately is an important task. Unfortunately, current approaches to detecting presentation failures in web pages are insufficient. The huge number of different viewport widths that require support makes thorough checking of the layout on all devices infeasible. Furthermore, the current range of developer tools only provide limited support for testing responsive web pages. This thesis tackles these problems by making the following contributions. First, it proposes the responsive layout graph (RLG), a model of the dynamic layout of modern responsive web pages. Then, it explores how the RLG can be used to automatically detect potentially unseen side-effects of small changes to the source code of a web page. Next, it investigates the detection of several common types of layout failures, leveraging implicit oracle information in place of an explicit oracle. Experiments showed both the approach for detecting potentially unseen side-effects and the approach for identifying common types of layout failure to be highly effective. The manual effort required by the user is further reduced by an approach that automatically grouped related failures together. Finally, a case study of 33 real-world responsive layout failures investigates how difficult such failures are to fix. These approaches have all been implemented into a software tool, ReDeCheck, which helps web developers create better responsive web pages

Testing web applications through layout constraints : tools and applications

With businesses trying to minimize cost, web applications are becoming increasingly useful by providing cross-platform applications that can be easily ported to desktop and mobile. However, testing these applications is much more arduous than testing desktop applications due to the lack of tools. In this thesis, we aim to describe a web application testing tool called Cornipickle which uses an expressive layout specification. The specification language for Cornipickle makes statements on applications’ layouts but we show that it can also test behaviours. With it, we effectively achieve to detect the bugs found with our survey of 35 real-world web applications. We also show Cornipickle’s versatility by using it in multiple applications and tools, notably pairing it with a crawler. Puisque les entreprises tentent de minimiser leurs coûts, les applications web deviennent de plus en plus utiles en fournissant des applications multiplateformes qui peuvent être facilement portées aux appareils mobiles et environnements de bureau. Par contre, tester ces applications est beaucoup plus ardu que de tester des applications de bureau en raison du manque d’outils. Dans ce mémoire, nous décrivons un outil de test d’applications web, Cornipickle, qui utilise une spécification expressive sur la mise en page. Le langage de spécification de Cornipickle fait des affirmations sur la mise en page des applications mais nous montrons qu’il permet aussi de tester des comportements. Grâce à lui, nous réussissons à détecter efficacement les bogues identifiés dans une étude de 35 applications webs. Nous montrons aussi la polyvalence de Cornipickle en l’utilisant dans une multitude d’applications et outils, notamment en l’associant à un robot d’indexation

Automated repair of mobile friendly problems in web pages

Mobile devices have become a primary means of accessing the Internet. Unfortunately, many websites are not designed to be mobile friendly. This results in problems such as unreadable text, cluttered navigation, and content overflowing a device's viewport; all of which can lead to a frustrating and poor user experience. Existing techniques are limited in helping developers repair these mobile friendly problems. To address this limitation of prior work, we designed a novel automated approach for repairing mobile friendly problems in web pages. Our empirical evaluation showed that our approach was able to successfully resolve mobile friendly problems in 95% of the evaluation subjects. In a user study, participants preferred our repaired versions of the subjects and also considered the repaired pages to be more readable than the originals

Automated repair of internationalization presentation failures in web pages using style similarity clustering and search-based techniques

Internationalization enables companies to reach a global audience by adapting their websites to locale specific language and content. However, such translations can often introduce Internationalization Presentation Failures (IPFs) - distortions in the intended appearance of a website. It is challenging for developers to design websites that can inherently adapt to varying lengths of text from different languages. Debugging and repairing IPFs is complicated by the large number of HTML elements and CSS properties that define a web page's appearance. Tool support is also limited as existing techniques can only detect IPFs, with the repair remaining a labor intensive manual task. To address this problem, we propose a search-based technique for automatically repairing IPFs in web applications. Our empirical evaluation showed that our approach was able to successfully resolve 98% of the reported IPFs for 23 real-world web pages. In a user study, participants rated the visual quality of our fixes significantly higher than the unfixed versions

Automatically identifying potential regressions in the layout of responsive web pages

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 (RWD), 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 a web page. As such, many unintended regressions in web page layout often go undetected and ultimately manifest in production web sites. 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

Testing Mobile Web Applications for W3C Best Practice Compliance

Adherence to best practices and standards when developing mobile web applications is important to achieving a quality outcome. As smartphones and tablet PCs continue to proliferate in the consumer electronics market, businesses and individuals are increasingly turning from the native application paradigm to HTML 5-based web applications as a means of software development and distribution. With an everincreasing reliance by users on the correct functioning of such applications, the requirement for stringent and comprehensive quality assurance measures is also brought sharply into focus. This research investigates the increasing trend towards mobile web application development in the mobile software domain, and assesses the requirement for an automated approach to best practice validation testing for mobile web applications. Contemporary approaches to automated web application testing are examined, with particular emphasis on issues relating to mobile web application tests. The individual guidelines proposed by the W3C Mobile Web Application Best Practices are analysed and where applicable automated conformance tests are implemented in a customised testing tool. A range of mobile web applications are tested using this tool in order to examine the extent to which implementation of the tested-for guidelines is detected. Automated tests were successfully implemented in respect of nearly 60% of the best practices