Automated Identification of Cross-browser Issues in Web Applications
1 like469 views
The document describes a technique for automatically detecting differences in how a web page is rendered across different browsers. It collects both structural information from the DOM tree and visual information from screenshots when a page is loaded in each browser. The technique then matches elements in the DOM trees and compares visual information to identify any discrepancies in how the page is rendered between browsers.
![ 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](https://image.slidesharecdn.com/roychoudhary10icsm-1-101014174711-phpapp01/85/Automated-Identification-of-Cross-browser-Issues-in-Web-Applications-35-320.jpg)
![ 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](https://image.slidesharecdn.com/roychoudhary10icsm-1-101014174711-phpapp01/85/Automated-Identification-of-Cross-browser-Issues-in-Web-Applications-53-320.jpg)
Automated Identification of Cross-browser Issues in Web Applications
- 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. 4
- 5. HTTP Request Server Side (Web Application Server) 5
- 6. HTTP Request HTTP Response Server Side (Web Application Server) 6
- 7. HTTP Request HTTP Response Server Side (Web Application Server) 7
- 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. <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. <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
- 12. Mozilla Firefox Internet Explorer 12
- 13. 13
- 14. 14
- 15. 15
- 16. 16
- 17. 17
- 18. 18
- 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. 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. 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. 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. 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. Page in reference browser over two subsequent requests: 24
- 25. Page in reference browser over two subsequent requests: 25
- 26. Page in reference browser over two subsequent requests: 26
- 27. Page in reference browser over two subsequent requests: 27
- 28. Page in reference browser over two subsequent requests: 28
- 29. Page in reference browser over two subsequent requests: 29
- 30. Page in reference browser over two subsequent requests: 30
- 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. 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. 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. 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. 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. 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. 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. 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. 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
- 41. 41
- 42. 42
- 43. 43
- 44. 44
- 45. 45
- 46. Type of issues found: • Positional shifts • Size differences • Visibility differences • General appearance issues 46
- 47. 47
- 48. Reference Browser screenshot Target Browser screenshot 48
- 49. RQ1 : Can identify cross-browser issues in web applications? RQ2 : Can identify such issues without generating too many false positives? 49
- 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. # 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. # 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. 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. Summary 55