Transcript slides
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 – penalty to move to another website • What isno 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 pageVisual screenshot 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: (100, 400) /html/body/…/tr[2] R /html/body/…/tr[2]/td[1]1 /html/body/…/tr[2]/td[1]/table[1] R R 2 3 /html/body/…/tr[2]/td[1]/table[1]/tr[1] /html/body/…/tr[2]/td[1]/table[1]/td[1] tr[2 ] t d tabl e t r t d Map pixel visual differences to HTML elements 8 Process Overview (3. Result Set Processing) A Report Cluster A B C 1. /html/body/table/…/img /html /html/body . /html/body/table . .. .5. /html/body/table .6. /html/body /html/body/table/…/img 7. /html Cluster B Cluster C 9 Empirical Evaluation 94% Java Tutorial 97% Virgin America Detection 100% Craigslist accuracy =90% Localization 93% USC CS… accuracy =92% 92% Gmail Localization accuracy 8 (5%) Java Tutorial 49 (5%) Virgin… Craigslist Result set size 32 = (3%) 23 (10%) 17 (5%) USC CS… 12 (16%) Gmail Result Set Size 7 sec Time = 87 sec 3 min Running time 1. <>…</> 2. <>…</> . . . . . . 23. <>…</> Rank = 4.8 (2%) Rank of faulty element 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 [email protected] [email protected] 12