1. Shauvik Roy Choudhary, Husayn Versee, and Alessandro Orso Georgia Institute of Technology Partially supported by the NSF awards CCF-0916605 and CCF-0725202 to Georgia Tech

2. 2

3. 3

4. Server Side (Web Application Server) HTTP Request HTTP Response Ajax Search: Results: body h1h1 h1h1 input h2h2 h2h2 div ul document head script link No shadow Result count Displaced border 4

5. Mozilla Firefox Internet Explorer 5

6. 6

7. 7

8. Manual inspection is expensive Mimic end user’s perception Locate broken element in code DOM differs between browsers Ignore variable elements on webpage 15 Sep 2010 3:15pm Even work with browser security controls 8

9.  Goal: Compare behavior of web pages in different browsers  High level view of the approach: Data collection Ignore variable elements Structural analysis Visual analysis Report 9

10.  From each browser under consideration, the technique collects: Visual Information (Screenshot) ( tagname, id, xpath, coord, clickable, visible, zindex, hash ) Structural Information (DOM) body div h1h1 h1h1 a a ul div ul div 10

11.  Load page twice in reference browser: body div h1h1 h1h1 a a ul div ul div body div h1h1 h1h1 a a ul div ul div 11

12.  Page in reference browser over two subsequent requests: 12

13.  Match the nodes in the DOM tree of each browser to those in reference browser: body div h1h1 h1h1 a a ul div ul div body div h1h1 h1h1 a a ul div ul body div body div xPath1 = /html/body/div[1]/div[1]/div[1]xPath2 = /html/body/div[1]/div[1]/div/div[1] div id = “footer” div id = null div h1h1 h1h1 h1h1 h1h1 a a a a ul div body div ul div body ul div tagname = “div” 13

14. Type of issues found: Positional shifts Size differences Visibility differences General appearance issues Type of issues found: Positional shifts Size differences Visibility differences General appearance issues 14

15. 15 Reference Browser screenshot Target Browser screenshot

16.  RQ1 : Can WebDiff identify cross-browser issues in web applications?  RQ2 : Can WebDiff identify such issues without generating too many false positives? 16

17. For each page P and browser B considered 1. Load P in B and in the reference browser 2. Compare the page in the two browsers using our technique 3. Store the produced reports 4. Manually checked for false positives and false negatives Subject NameURLType GATECHhttp://www.gatech.eduUniversity BECKERhttp://www.beckerelectric.comCompany CHESNUThttp://www.chestnutridgecabin.comLodge CRSTIhttp://www.crsti.orgHospital DUICTRLhttp://www.duicentral.comLawyer JTWEDhttp://www.jtweddings.comPhotography ORTHOhttp://www.otorohanga.co.nzInformational PROTOOLShttp://www.protoolsexpress.comCompany SPEEDhttp://www.speedsound.comE-Commerce Test Subjects 17

18. Subject # Issues Reported False Positives False Negatives GATECH 230160 (0%)0 BECKER 21203171 (6.25%)0 CHESNUT 8404162 (14.3%)0 CRSTI 440290 (0%)0 DUICTRL 9806234 (21%)0 JTWED 3901140 (0%)0 ORTHO 000442 (100%)0 PROTOOLS 45011209 (81%)0 SPEED 23505333 (10%)0 TOTAL 555003714221 (17%)0 18

19. Subject # Issues Reported False Positives False Negatives GATECH 230160 (0%)0 BECKER 21203171 (6.25%)0 CHESNUT 8404162 (14.3%)0 CRSTI 440290 (0%)0 DUICTRL 9806234 (21%)0 JTWED 3901140 (0%)0 ORTHO 000442 (100%)0 PROTOOLS 45011209 (81%)0 SPEED 23505333 (10%)0 TOTAL 555003714221 (17%)0 19

20. Subject # Issues Reported False Positives False Negatives GATECH 230160 (0%)0 BECKER 21203171 (6.25%)0 CHESNUT 8404162 (14.3%)0 CRSTI 440290 (0%)0 DUICTRL 9806234 (21%)0 JTWED 3901140 (0%)0 ORTHO 000442 (100%)0 PROTOOLS 45011209 (81%)0 SPEED 23505333 (10%)0 TOTAL 555003714221 (17%)0 20  RQ1 (Effectiveness) : No false negatives in test subjects  RQ2 (Efficiency) : False positive rate of 17%

21.  Industrial Tools  Adobe Browser Lab & MS Expression Web ▪ Require manual inspection  Browsera (launched Summer 2010) ▪ Simple DOM matching (from experience using the tool)  Research Tools  Eaton & Memon [IJWET07] ▪ Requires manual classification. Limited to html tags only  Tamm [GTAC09] ▪ Expensive and is focused on layout of text elements 21

22. Summary 22