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