Automated Identification of Cross-browser Issues in Web Applications

820 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
820
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Automated Identification of Cross-browser Issues in Web Applications

  1. 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. 2
  3. 3. 3
  4. 4. 4
  5. 5. HTTP Request Server Side (Web Application Server) 5
  6. 6. HTTP Request HTTP Response Server Side (Web Application Server) 6
  7. 7. HTTP Request HTTP Response Server Side (Web Application Server) 7
  8. 8. <html> <head> <script src="script.js"></script> <link href="style.css" rel="stylesheet" /> HTTP Request </head> <body> <h1>Ajax Search:</h1> HTTP Response <input type="text" id="query" /> <input type="button" onclick="search()" Server Side (Web Application Server) value="Search" /> <h2>Results:</h2> <div id="stats"></div> <ul id="results"></ul> </body> </html> 8
  9. 9. <html> <head> document <script src="script.js"></script> <link href="style.css" rel="stylesheet" /> HTTP Request </head> <body> head <h1>Ajax Search:</h1> HTTP Response body <input type="text" id="query" /> <input type="button" onclick="search()" Server Side script Application Server) (Web link value="Search" /> <h2>Results:</h2> <div id="stats"></div> <ul id="results"></ul> h1 input input h2 div ul </body> </html> 9
  10. 10. <html> <head> document <script src="script.js"></script> <link href="style.css" rel="stylesheet" /> HTTP Request </head> <body> No shadow head <h1>Ajax Search:</h1> HTTP Response body <input type="text" id="query" /> <input type="button" onclick="search()" Server Side script Application Server) (Web link value="Search" /> Result count <h2>Results:</h2> <div id="stats"></div> <ul id="results"></ul> h1 input input h2Displaced border div ul </body> </html> 10
  11. 11. 11
  12. 12. Mozilla Firefox Internet Explorer 12
  13. 13. 13
  14. 14. 14
  15. 15. 15
  16. 16. 16
  17. 17. 17
  18. 18. 18
  19. 19. Manual inspection DOM differs Mimic end user’s is expensive between browsers perception Ignore variable elements Locate broken Even work with on webpage element in code browser security controls 19
  20. 20.  Goal: Compare behavior of web pages in different browsers  High level view of the approach: Data collection Ignore variable elements Report Structural Visual analysis analysis 20
  21. 21.  From each browser under consideration, the technique collects: body div div div h1 a ul div div ul div div div div div Structural Information (DOM) ( tagname, id, xpath, coord, clickable, visible, zindex, hash ) Visual Information (Screenshot) 21
  22. 22.  Load page twice in reference browser: body body div div div div div div h1 a ul div div h1 a ul div div ul div div div ul div div div div div div div 22
  23. 23.  Load page twice in reference browser: body body div div div div div div h1 a ul div div h1 a ul div div ul div div div ul div div div div div div div 23
  24. 24.  Page in reference browser over two subsequent requests: 24
  25. 25.  Page in reference browser over two subsequent requests: 25
  26. 26.  Page in reference browser over two subsequent requests: 26
  27. 27.  Page in reference browser over two subsequent requests: 27
  28. 28.  Page in reference browser over two subsequent requests: 28
  29. 29.  Page in reference browser over two subsequent requests: 29
  30. 30.  Page in reference browser over two subsequent requests: 30
  31. 31.  Match the nodes in the DOM tree of each browser to those in reference browser: body body div div div div div div h1 a ul div div h1 a ul div div ul div div ul div div div div div div div div div
  32. 32.  Match the nodes in the DOM tree of each browser to those in reference browser: id = “footer” id = “footer” body body div div div div div div h1 a ul div div h1 a ul div div ul div div ul div div div div div div div div div
  33. 33.  Match the nodes in the DOM tree of each browser to those in reference browser: body body div div div div div div h1 a ul div div h1 a ul div div ul div div ul div div div div div div id = null div div div id = null
  34. 34.  Match the nodes in the DOM tree of each browser to those in reference browser: body body div div div div div div h1 a ul div div h1 a ul div div ul div div ul div div div div div div tagname = “div” div div div tagname = “div”
  35. 35.  Match the nodes in the DOM tree of each browser to those in reference browser: body body div div div div div div h1 a ul div div h1 a ul div div ul div div ul div div div div div div div div div xPath1 = /html/body/div[1]/div[1]/div[1] xPath2 = /html/body/div[1]/div[1]/div/div[1] 35
  36. 36.  Match the nodes in the DOM tree of each browser to those in reference browser: body body div div div div div div h1 a ul div div h1 a ul div div ul div div ul div div div div div div div div div 36
  37. 37.  Match the nodes in the DOM tree of each browser to those in reference browser: body body div div div div div div h1 a ul div div h1 a ul div div ul div div ul div div div div div div div div div
  38. 38.  Match the nodes in the DOM tree of each browser to those in reference browser: body body div div div div div div h1 a ul div div h1 a ul div div ul div div ul div div div div div div div div div
  39. 39.  Match the nodes in the DOM tree of each browser to those in reference browser: body body div div div div div div h1 a ul div div h1 a ul div div ul div div ul div div div div div div div div div
  40. 40. 40
  41. 41. 41
  42. 42. 42
  43. 43. 43
  44. 44. 44
  45. 45. 45
  46. 46. Type of issues found: • Positional shifts • Size differences • Visibility differences • General appearance issues 46
  47. 47. 47
  48. 48. Reference Browser screenshot Target Browser screenshot 48
  49. 49.  RQ1 : Can identify cross-browser issues in web applications?  RQ2 : Can identify such issues without generating too many false positives? 49
  50. 50. Test Subjects Subject Name URL Type GATECH http://www.gatech.edu University BECKER http://www.beckerelectric.com Company CHESNUT http://www.chestnutridgecabin.com Lodge CRSTI http://www.crsti.org Hospital DUICTRL http://www.duicentral.com Lawyer JTWED http://www.jtweddings.com Photography ORTHO http://www.otorohanga.co.nz Informational PROTOOLS http://www.protoolsexpress.com Company SPEED http://www.speedsound.com E-Commerce 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 50
  51. 51. # Issues Reported False False Subject Positives Negatives GATECH 2 3 0 1 6 0 (0%) 0 BECKER 2 12 0 3 17 1 (6.25%) 0 CHESNUT 8 4 0 4 16 2 (14.3%) 0 CRSTI 4 4 0 2 9 0 (0%) 0 DUICTRL 9 8 0 6 23 4 (21%) 0 JTWED 3 9 0 1 14 0 (0%) 0 ORTHO 0 0 0 4 4 2 (100%) 0 PROTOOLS 4 5 0 11 20 9 (81%) 0 SPEED 23 5 0 5 33 3 (10%) 0 TOTAL 55 50 0 37 142 21 (17%) 0 51
  52. 52. # Issues Reported False False Subject Positives Negatives GATECH 2 3 0 1 6 0 (0%) 0 BECKER 2 12 0 3 17 1 (6.25%) 0 CHESNUT 8 4 0 4 16 2 (14.3%) 0 CRSTI 4 4 0 2 9 0 (0%) 0 DUICTRL 9 8 0 6 23 4 (21%) 0 JTWED 3 9 0 1 14 0 (0%) 0 ORTHO 0 0 0 4 4 2 (100%) 0 PROTOOLS 4 5 0 11 20 9 (81%) 0 SPEED 23 5 0 5 33 3 (10%) 0 TOTAL 55 50 0 37 142 21 (17%) 0 52
  53. 53.  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 54
  54. 54. Summary 55

×