WebSee: A Tool for Debugging HTML Presentation Failures Sonal - PowerPoint PPT Presentation

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

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

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

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

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

Process Overview (2. Localization) 6

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

Process Overview (2. Localization) Result Set: /html/body /…/ tr[2] (100, 400) R /html/body /…/ tr[2]/td[1] 1 /html/body /…/ tr[2]/td[1]/table[1] R R /html/body/…/ tr[2]/td[1]/table[1]/tr[1] 2 3 /html/body/…/ tr[2]/td[1]/table[1]/td[1] tr[2 t tabl t t ] d e r d Map pixel visual differences to HTML elements 8

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

Empirical Evaluation Java Tutorial Java Tutorial 94% 8 (5%) Virgin… Virgin America 97% 49 (5%) Detection accuracy = 100% Craigslist Craigslist 32 (3%) 90% Result set size = 23 (10%) Localization accuracy = 93% USC CS… USC CS… 17 (5%) 92% Gmail Gmail 12 (16%) 92% Result Set Size Localization accuracy 7 sec 1. <>…</> 2. < >…</ > . . Time = 87 sec . Rank = 4.8 (2%) . . . 23. < >…</ > 3 min Rank of faulty element Running time 10

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

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