This is a repository copy of Automated Repair of Layout Cross Browser Issues Using Search-Based Techniques. White Rose Research Online URL for this paper: http://eprints.whiterose.ac.uk/116990/ Version: Accepted Version Proceedings Paper: Mahajan, S., Alameer, A., McMinn, P.S. orcid.org/0000-0001-9137-7433 et al. (1 more author) (2017) Automated Repair of Layout Cross Browser Issues Using Search-Based Techniques. In: ISSTA 2017 Proceedings of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis. International Symposium on Software Testing and Analysis (ISSTA 2017), 10 - 14 July 2017, Santa Barbara, California. ACM , pp. 249-260. ISBN 978-1-4503-5076-1 https://doi.org/10.1145/3092703.3092726 Reuse Unless indicated otherwise, fulltext items are protected by copyright with all rights reserved. The copyright exception in section 29 of the Copyright, Designs and Patents Act 1988 allows the making of a single copy solely for the purpose of non-commercial research or private study within the limits of fair dealing. The publisher or other rights-holder may allow further reproduction and re-use of this version - refer to the White Rose Research Online record for this item. Where records identify the publisher as the copyright holder, users can verify any specific terms of use on the publisher’s website. Takedown If you consider content in White Rose Research Online to be in breach of UK law, please notify us by emailing [email protected] including the URL of the record and the reason for the withdrawal request. [email protected] https://eprints.whiterose.ac.uk/ Automated Repair of Layout Cross Browser Issues Using Search-Based Techniques Sonal Mahajan Abdulmajeed Alameer University of Southern California, USA University of Southern California, USA Phil McMinn William G. J. Halfond University of Sheeld, UK University of Southern California, USA ABSTRACT the appearance or functionality of a website, the vast majority — A consistent cross-browser user experience is crucial for the suc- over 90% — result in appearance related problems [42]. is makes cess of a website. Layout Cross Browser Issues (XBIs) can severely XBIs a signicant challenge in ensuring the correct and consistent undermine a website’s success by causing web pages to render in- appearance of a website’s UI. correctly in certain browsers, thereby negatively impacting users’ Despite the importance of XBIs, their detection and repair poses impression of the quality and services that the web page delivers. numerous challenges for developers. First, the sheer number of Existing Cross Browser Testing (XBT) techniques can only detect browsers available to end users is large — an informal listing re- XBIs in websites. Repairing them is, hitherto, a manual task that is ports that there are over 115 actively maintained and currently labor intensive and requires signicant expertise. Addressing this available [59]. Developers must verify that their websites render concern, our paper proposes a technique for automatically repair- and function consistently across as many of these dierent browsers ing layout XBIs in websites using guided search-based techniques. and platforms as possible. Second, the complex layouts and styles Our empirical evaluation showed that our approach was able to of modern web applications make it dicult to identify the UI el- successfully x 86% of layout XBIs reported for 15 dierent web ements responsible for the observed XBI. ird, developers lack pages studied, thereby improving their cross-browser consistency. a standardized way to address XBIs and generally have to resolve XBIs on a case by case basis. Fourth, for a repair, developers must CCS CONCEPTS modify the problematic UI elements without introducing new XBIs. Predictably, these challenges have made XBIs an ongoing topic of •So ware and its engineering →So ware testing and debug- concern for developers. A simple search on StackOverow — a ging; Search-based so ware engineering; popular technical forum — with the search term “cross browser” KEYWORDS results in over 23,000 posts discussing ways to resolve XBIs, of which approximately 7,000 are currently active questions [49]. Cross-browser issues; automated search-based repair; web apps. Tool support to help developers debug XBIs is limited in terms of ACM Reference format: capabilities. Although tools such as Firebug [15] can provide useful Sonal Mahajan, Abdulmajeed Alameer, Phil McMinn, and William G. J. information, developers still require expertise to manually analyze Halfond. 2017. Automated Repair of Layout Cross Browser Issues Using the XBIs (which involves determining which HTML elements to Search-Based Techniques. In Proceedings of 26th International Symposium on inspect, and understanding the eects of the various CSS properties Soware Testing and Analysis , Santa Barbara, CA, USA, July 2017 (ISSTA’17), dened for them), and then repair them by performing the necessary 12 pages. modications so that the page renders correctly. XBI-oriented DOI: 10.1145/3092703.3092726 techniques from the research community (e.g., X-PERT [8, 42, 44] 1 INTRODUCTION and Browserbite [47]) are only able to detect and localize XBIs (i.e., they address the rst two of the four previously listed challenges), e appearance of a web application’s User Interface (UI) plays an but are incapable of repairing XBIs so that a web page can be “xed” important part in its success. Studies have shown that users form to provide a consistent appearance across dierent browsers. judgments about the trustworthiness and reliability of a company To address these limitations, we propose a novel search-based based on the visual appearance of its web pages [21, 22, 51, 52], approach that enables the automated repair of a signicant class and that issues degrading the visual consistency and aesthetics of of appearance related XBIs. e XBIs targeted by our approach a web page have a negative impact on an end user’s perception of are known as layout XBIs (also referred to as “structure XBIs” by the website and the quality of the services that it delivers. Choudhary et al. [42]), which collectively refer to any XBI that e constantly increasing number of web browsers with which relates to an inconsistent layout of HTML elements in a web page users can access a website has introduced new challenges in prevent- when viewed in dierent browsers. Layout XBIs appear in over ing appearance related issues. Dierences in how various browsers 56% of the websites manifesting XBIs [42]. Our key insight is that interpret HTML and CSS standards can result in Cross Browser the impact of layout XBIs can be quantied by a tness function Issues (XBIs) — inconsistencies in the appearance or behavior of capable of guiding a search to a repair that minimizes the number of a website across dierent browsers. Although XBIs can impact XBIs present in a page. To the best of our knowledge, our approach ISSTA’17, Santa Barbara, CA, USA is the rst automated technique for generating XBI repairs, and 2017. 978-1-4503-5076-1/17/07...$15.00 the rst to apply search-based repair techniques to web pages. We DOI: 10.1145/3092703.3092726 ISSTA’17, July 2017, Santa Barbara, CA, USA Sonal Mahajan, Abdulmajeed Alameer, Phil McMinn, and William G. J. Halfond (a) Correct rendering of the page with Internet Explorer 11.0.33 (b) e same page displaying an XBI when rendered with Mozilla Firefox 46.0.1 Figure 1: Screenshots of the navigation bar of the IncredibleIndia homepage (http://incredibleindia.org), which has an XBI. When viewed with Firefox the text of the navigation menu bar is unreadable. implemented our approach as a tool, XFix, and evaluated it on 15 ese inconsistencies tend to arise from dierent interpretations real world web pages containing layout XBIs. XFix was able to of the HTML and CSS specications, and are not per se, faults in resolve 86% of the XBIs reported by X-PERT [42], a well-known the browsers themselves [1]. Additionally, some browsers may XBI detection tool, and 99% of the XBIs observed by humans. Our implement new CSS properties or existing properties dierently in results therefore demonstrate that our approach is potentially of an aempt to gain an advantage over competing browsers [30]. high use to developers by providing automated xes for problematic web pages involving layout XBIs. Fixing Layout XBIs. When a layout XBI has been detected, de- e main contributions of this paper are as follows: velopers may employ several strategies to adjust its appearance. For example, changing the HTML structure, replacing unsupported (1) A novel approach for automatically nding potential xes for HTML tags, or adjusting the page’s CSS. Our approach targets XBIs layout XBIs using guided search-based techniques. that can be resolved by nding alternate values for a page’s CSS (2) An extensive evaluation on a set of 15 real-world web pages, properties. ere are two signicant challenges to carrying out this in which our approach resolved 86% of automatically detected type of repair. First, the appearance (e.g., size, color, font style) of XBIs and 99% observed by human subjects. any given set of HTML elements in a browser is controlled by a (3) A human study to assess the web pages’ cross-browser consis- series of complex interactions between the page’s HTML elements tency aer repair by our approach. and CSS properties, which means that identifying the HTML el- (4) A study to compare the size similarity of our repair patches to ements responsible for the XBI is challenging. Second, assuming XBI-addressing code in real-world web pages. that the right set of elements can be identied, each element may e rest of this paper is organized as follows: In Section 2, we give have dozens of CSS properties that control its appearance, position, background information about web page rendering and introduce and layout.