1. WebSee: A Tool for Debugging HTML Presentation Failures Sonal Mahajan and William G. J. Halfond Department of Computer Science University of Southern California

2. Web Applications Online shopping service It takes users only 50 ms to form opinion about your website (Google research - 2012) 2

3. Motivation Presentation of a website –Crucial to make first impression –Capture users’ interest What is a presentation failure? –Web page rendering ≠ expected appearance Impact of presentation failures –Gives negative impression of your business Affects branding efforts –Reduces usability and trustworthiness End user – no penalty to move to another website Business – loses out on valuable customers 3

4. WebSee Underlying technique [ICST ‘15] Goal – Automatically detect and localize presentation failures Detection – Computer vision Localization – Rendering maps 4

5. Process Overview (1. Detection) 5 Test web page screenshot Oracle Visual comparison using PID Apply clustering (DBSCAN) A B C

6. 6 Process Overview (2. Localization)

7. R1 Sub-tree of R-tree 7 R2 R3 R4 R5 Process Overview (2. Localization)

8. (100, 400) 8 R2R2 R1R1 tr[2 ] R3R3 tdtd tabl e trtr tdtd Result Set: /html/body/…/tr[2] /html/body/…/tr[2]/td[1] /html/body/…/tr[2]/td[1]/table[1] /html/body/…/tr[2]/td[1]/table[1]/tr[1] /html/body/…/tr[2]/td[1]/table[1]/td[1] Map pixel visual differences to HTML elements Process Overview (2. Localization)

9. /html /html/body /html/body/table... /html/body/table/…/img 1. /html/body/table/…/img... 5. /html/body/table 6. /html/body 7. /html Process Overview (3. Result Set Processing) 9 A B C Report Cluster B Cluster C /html /html/body /html/body/table. /html/body/table/…/img Cluster A

10. Empirical Evaluation 10 7 sec 3 min Detection accuracy = 100% Localization accuracy = 93% Result set size = 23 (10%) Time = 87 sec Running time 1. <>… 2. <>…. 23. <>… Rank of faulty element Rank = 4.8 (2%)

11. Demo 1.Regression Debugging –Current version of the web app is modified Refactor HTML (e.g. convert to layout) –Seed two presentation failures 2.Mockup Driven Development –Front-end developers convert high-fidelity mockups to HTML pages –Use real-world mockup 11

12. Thank you 12 WebSee: A Tool for Debugging HTML Presentation Failures Sonal Mahajan and William G. J. Halfond spmahaja@usc.edu halfond@usc.edu https://github.com/sonalmahajan/websee