websee: a tool for debugging html presentation failures sonal mahajan and william g. j. halfond...
TRANSCRIPT
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)
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 websiteBusiness – loses out on valuable customers
4
WebSee
• Underlying technique [ICST ‘15]• Goal – Automatically detect and localize
presentation failures
• Detection – Computer vision
• Localization – Rendering maps
Process Overview (1. Detection)
5Test web page screenshot OracleVisual comparison using PIDApply clustering (DBSCAN)
A
B
C
6
Process Overview (2. Localization)
R1
Sub-tree of R-tree7
R2
R3
R4
R5
Process Overview (2. Localization)
(100, 400)
8
R2
R1
tr[2]
R3
td
table
tr
td
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)
/html/html/body/html/body/table.../html/body/table/…/img
1. /html/body/table/…/img...5. /html/body/table6. /html/body7. /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
Empirical Evaluation
10
Gmail
Craigslist
Java Tutorial
92%
92%
90%
97%
94%
Localization accuracy
Gmail
Craigslist
Java Tutorial
12 (16%)
17 (5%)
32 (3%)
49 (5%)
8 (5%)
Result Set Size
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 <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
12
Thank you
WebSee: A Tool for Debugging HTML Presentation Failures
Sonal Mahajan and William G. J. Halfond
https://github.com/sonalmahajan/websee