SLIDE 1
Web Applications
Online shopping service
It takes users only 50 ms to form opinion about your website (Google research - 2012)
2
WebSee: A Tool for Debugging HTML Presentation Failures Sonal - - PowerPoint PPT Presentation
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
SLIDE 2
SLIDE 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
SLIDE 4
WebSee
- Underlying technique [ICST ‘15]
- Goal – Automatically detect and localize
presentation failures
- Detection – Computer vision
- Localization – Rendering maps
4
SLIDE 5
Process Overview (1. Detection)
5
Test web page screenshot Oracle Visual comparison using PID Apply clustering (DBSCAN)
A B C
SLIDE 6
6
Process Overview (2. Localization)
SLIDE 7
R1
Sub-tree of R-tree
7 R2 R3 R4 R5
Process Overview (2. Localization)
SLIDE 8
(100, 400)
8
R 2 R 1
tr[2 ]
R 3
t d tabl e t r t d
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)
SLIDE 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
SLIDE 10
Empirical Evaluation
10 92% 92% 90% 97% 94%
Gmail USC CS… Craigslist Virgin America Java Tutorial Localization accuracy
12 (16%) 17 (5%) 32 (3%) 49 (5%) 8 (5%)
Gmail USC CS… Craigslist Virgin… Java Tutorial 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%)
SLIDE 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
11
SLIDE 12
Thank you
12