Automated Classification and Repair of Presentation Failures in Responsive Web Pages

Testing is an important part of software engineering that is employed while developing the layout of a responsively designed web page. This type of design produces a layout that aims to pleasantly responds to the available width within any browser window by rearranging the layout along the way. With a large number of possible screen sizes that a browser may conform to, from mobile phones to large desktop monitors, manually testing the layout for presentation failures can be a time-consuming and error-prone task. With help from the ReDeCheck tool or its re-implementation in Layout DR, the developer can automatically test the web page for five type of presentation failures known as Responsive Layout Failures. Even though ReDeCheck alleviates some of the burdens, the developer must still manually investigate the reported failures and classify them as either a real visible failure that will require a repair or as something that can be ignored. Since the detection phase of the tool uses the underlying structure of the page to infer failures, it can report failures in the structure that are not visible in the rendered page, known as Non-Observable Issues. Finally, after filtering out the real failures the developer must now investigate the root cause and manually repair the layout as fast as possible.

Since any successful software, especially a web page, is continuously updated and improved, there is a never-ending process of testing, investigating the findings of these tests, and finally repairing any issues that are found. In this thesis, I propose and evaluate new ways to further aid the developer, of a responsively designed web page, in this process. This is by (1) automating the classification of three failure types that are known to report non-observable issues, (2) extending it to classify all five type of failures and I reassess the approach on additional subjects, and (3) automating the patch generation process to quickly repair any of the five type of failures. The benefits of my research include a further reduction in the time dedicated to testing for presentation failures, reducing the time needed to repair the failures, and reducing the chance for human-made errors. Thus, increasing the adoption and retention of automated means for testing and repairing the web page.

The research that makes up this thesis concluded that my proposed classification
approach achieved a high agreement with the human-made alternative. The findings also showed that for any given failure, the layout can always be repaired automatically. In many cases, up to two alternative patches that successfully remove the failure can be generated using my automated repair technique. In addition, I identified multiple opportunities for future research in this domain.