SlideShare una empresa de Scribd logo

Automated Identification of Cross-browser Issues in Web Applications

•
•
ICSM 2010
ICSM 2010
Tecnología
1 de 54
Descargar para leer sin conexión
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
3
4
HTTP Request Server Side (Web Application Server) 5
HTTP Request HTTP Response Server Side (Web Application Server) 6
HTTP Request HTTP Response Server Side (Web Application Server) 7
<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
<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
<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
Mozilla Firefox Internet Explorer 12
13
14
15
16
17
18
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
 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
 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
 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
 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
 Page in reference browser over two subsequent requests: 24
 Page in reference browser over two subsequent requests: 25
 Page in reference browser over two subsequent requests: 26
 Page in reference browser over two subsequent requests: 27
 Page in reference browser over two subsequent requests: 28
 Page in reference browser over two subsequent requests: 29
 Page in reference browser over two subsequent requests: 30
 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
 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
 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
 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”
 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
 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
 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
 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
 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
41
42
43
44
45
Type of issues found: • Positional shifts • Size differences • Visibility differences • General appearance issues 46
47
Reference Browser screenshot Target Browser screenshot 48
 RQ1 : Can identify cross-browser issues in web applications?  RQ2 : Can identify such issues without generating too many false positives? 49
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
# 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
# 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
 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
Summary 55

Recomendados

Cross Browser Issues - few solutions inspired by smashing magazine
Cross Browser Issues - few solutions inspired by smashing magazineCross Browser Issues - few solutions inspired by smashing magazine
Cross Browser Issues - few solutions inspired by smashing magazinePrabhakaran Mani
 
Advanced Cross-Browser Layout with Internet Explorer 8
Advanced Cross-Browser Layout with Internet Explorer 8Advanced Cross-Browser Layout with Internet Explorer 8
Advanced Cross-Browser Layout with Internet Explorer 8goodfriday
 
How to do better Quality Assurance for Cross-Browser Testing
How to do better Quality Assurance for Cross-Browser TestingHow to do better Quality Assurance for Cross-Browser Testing
How to do better Quality Assurance for Cross-Browser TestingBOSS Webtech
 
Continuous Testing of eCommerce Apps
Continuous Testing of eCommerce AppsContinuous Testing of eCommerce Apps
Continuous Testing of eCommerce AppsSauce Labs
 
Cross browser testing
Cross browser testingCross browser testing
Cross browser testingSauce Labs
 
Cross-browser testing in the real world
Cross-browser testing in the real worldCross-browser testing in the real world
Cross-browser testing in the real worldMartin Kleppmann
 
A Graph-Based Method For Cross-Entity Threat Detection
A Graph-Based Method For Cross-Entity Threat Detection A Graph-Based Method For Cross-Entity Threat Detection
A Graph-Based Method For Cross-Entity Threat DetectionJen Aman
 
Compatibility testing
Compatibility testingCompatibility testing
Compatibility testingForensic Pathology
 

Recomendados

Cross Browser Issues - few solutions inspired by smashing magazine
Cross Browser Issues - few solutions inspired by smashing magazineCross Browser Issues - few solutions inspired by smashing magazine
Cross Browser Issues - few solutions inspired by smashing magazinePrabhakaran Mani
 
Advanced Cross-Browser Layout with Internet Explorer 8
Advanced Cross-Browser Layout with Internet Explorer 8Advanced Cross-Browser Layout with Internet Explorer 8
Advanced Cross-Browser Layout with Internet Explorer 8goodfriday
 
How to do better Quality Assurance for Cross-Browser Testing
How to do better Quality Assurance for Cross-Browser TestingHow to do better Quality Assurance for Cross-Browser Testing
How to do better Quality Assurance for Cross-Browser TestingBOSS Webtech
 
Continuous Testing of eCommerce Apps
Continuous Testing of eCommerce AppsContinuous Testing of eCommerce Apps
Continuous Testing of eCommerce AppsSauce Labs
 
Cross browser testing
Cross browser testingCross browser testing
Cross browser testingSauce Labs
 
Cross-browser testing in the real world
Cross-browser testing in the real worldCross-browser testing in the real world
Cross-browser testing in the real worldMartin Kleppmann
 
A Graph-Based Method For Cross-Entity Threat Detection
A Graph-Based Method For Cross-Entity Threat Detection A Graph-Based Method For Cross-Entity Threat Detection
A Graph-Based Method For Cross-Entity Threat DetectionJen Aman
 
Compatibility testing
Compatibility testingCompatibility testing
Compatibility testingForensic Pathology
 
Gwt Deep Dive
Gwt Deep DiveGwt Deep Dive
Gwt Deep DiveReturn on Intelligence
 
Hedis - GET HBase via Redis
Hedis - GET HBase via RedisHedis - GET HBase via Redis
Hedis - GET HBase via RedisMu Chun Wang
 
The Internal Architecture of Chrome Developer Tools
The Internal Architecture of Chrome Developer ToolsThe Internal Architecture of Chrome Developer Tools
The Internal Architecture of Chrome Developer ToolsMiroslav Bajtoš
 
Combining Heritrix and PhantomJS for Better Crawling of Pages with Javascript
Combining Heritrix and PhantomJS for Better Crawling of Pages with JavascriptCombining Heritrix and PhantomJS for Better Crawling of Pages with Javascript
Combining Heritrix and PhantomJS for Better Crawling of Pages with JavascriptMichael Nelson
 
Building performance auf der Developer Conference Hamburg
Building performance auf der Developer Conference HamburgBuilding performance auf der Developer Conference Hamburg
Building performance auf der Developer Conference HamburgOliver Ochs
 
Gwt 2,3 Deep dive
Gwt 2,3 Deep diveGwt 2,3 Deep dive
Gwt 2,3 Deep diveReturn on Intelligence
 
Design Based Dev
Design Based DevDesign Based Dev
Design Based Devrajivmordani
 
Android Introduction
Android IntroductionAndroid Introduction
Android Introductionaswapnal
 
AtlasCamp 2015: How HipChat ships at the speed of awesome
AtlasCamp 2015: How HipChat ships at the speed of awesomeAtlasCamp 2015: How HipChat ships at the speed of awesome
AtlasCamp 2015: How HipChat ships at the speed of awesomeAtlassian
 
Dynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and MobileDynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and Mobilepeychevi
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Againjonknapp
 
WordPress Performance Optimization for Mere Mortals
WordPress Performance Optimization for Mere MortalsWordPress Performance Optimization for Mere Mortals
WordPress Performance Optimization for Mere MortalsJohn Levandowski
 
Unit 06: The Web Application Extension for UML
Unit 06: The Web Application Extension for UMLUnit 06: The Web Application Extension for UML
Unit 06: The Web Application Extension for UMLDSBW 2011/2002 - Carles Farré - Barcelona Tech
 
Architeching a php application with interfaces to the ib mi
Architeching a php application with interfaces to the ib miArchiteching a php application with interfaces to the ib mi
Architeching a php application with interfaces to the ib miChelsea Fenton
 
Vered Flis: Because performance matters! Architecture Next 20
Vered Flis: Because performance matters! Architecture Next 20Vered Flis: Because performance matters! Architecture Next 20
Vered Flis: Because performance matters! Architecture Next 20CodeValue
 
Html5
Html5Html5
Html5Zeeshan Ahmed
 
Understanding Your Content
Understanding Your ContentUnderstanding Your Content
Understanding Your ContentChiara Fox Ogan
 
DeepSee Web: Angular Render for InterSystems DeepSee Dashboards
DeepSee Web: Angular Render for InterSystems DeepSee DashboardsDeepSee Web: Angular Render for InterSystems DeepSee Dashboards
DeepSee Web: Angular Render for InterSystems DeepSee DashboardsInterSystems
 
仕事の効率が格段にアップするクラウドサービス活用術
仕事の効率が格段にアップするクラウドサービス活用術仕事の効率が格段にアップするクラウドサービス活用術
仕事の効率が格段にアップするクラウドサービス活用術Yasunari Goto (iChain. Inc.)
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentRandy Connolly
 
A tree kernel based approach for clone detection
A tree kernel based approach for clone detectionA tree kernel based approach for clone detection
A tree kernel based approach for clone detectionICSM 2010
 
Scalable Semantic Web-based Source Code Search Infrastructure
Scalable Semantic Web-based Source Code Search InfrastructureScalable Semantic Web-based Source Code Search Infrastructure
Scalable Semantic Web-based Source Code Search InfrastructureICSM 2010
 

Más contenido relacionado

Similar a Automated Identification of Cross-browser Issues in Web Applications

Hedis - GET HBase via Redis
Hedis - GET HBase via RedisHedis - GET HBase via Redis
Hedis - GET HBase via RedisMu Chun Wang
 
The Internal Architecture of Chrome Developer Tools
The Internal Architecture of Chrome Developer ToolsThe Internal Architecture of Chrome Developer Tools
The Internal Architecture of Chrome Developer ToolsMiroslav Bajtoš
 
Combining Heritrix and PhantomJS for Better Crawling of Pages with Javascript
Combining Heritrix and PhantomJS for Better Crawling of Pages with JavascriptCombining Heritrix and PhantomJS for Better Crawling of Pages with Javascript
Combining Heritrix and PhantomJS for Better Crawling of Pages with JavascriptMichael Nelson
 
Building performance auf der Developer Conference Hamburg
Building performance auf der Developer Conference HamburgBuilding performance auf der Developer Conference Hamburg
Building performance auf der Developer Conference HamburgOliver Ochs
 
Android Introduction
Android IntroductionAndroid Introduction
Android Introductionaswapnal
 
AtlasCamp 2015: How HipChat ships at the speed of awesome
AtlasCamp 2015: How HipChat ships at the speed of awesomeAtlasCamp 2015: How HipChat ships at the speed of awesome
AtlasCamp 2015: How HipChat ships at the speed of awesomeAtlassian
 
Dynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and MobileDynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and Mobilepeychevi
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Againjonknapp
 
WordPress Performance Optimization for Mere Mortals
WordPress Performance Optimization for Mere MortalsWordPress Performance Optimization for Mere Mortals
WordPress Performance Optimization for Mere MortalsJohn Levandowski
 
Architeching a php application with interfaces to the ib mi
Architeching a php application with interfaces to the ib miArchiteching a php application with interfaces to the ib mi
Architeching a php application with interfaces to the ib miChelsea Fenton
 
Vered Flis: Because performance matters! Architecture Next 20
Vered Flis: Because performance matters! Architecture Next 20Vered Flis: Because performance matters! Architecture Next 20
Vered Flis: Because performance matters! Architecture Next 20CodeValue
 
Understanding Your Content
Understanding Your ContentUnderstanding Your Content
Understanding Your ContentChiara Fox Ogan
 
DeepSee Web: Angular Render for InterSystems DeepSee Dashboards
DeepSee Web: Angular Render for InterSystems DeepSee DashboardsDeepSee Web: Angular Render for InterSystems DeepSee Dashboards
DeepSee Web: Angular Render for InterSystems DeepSee DashboardsInterSystems
 
仕事の効率が格段にアップするクラウドサービス活用術
仕事の効率が格段にアップするクラウドサービス活用術仕事の効率が格段にアップするクラウドサービス活用術
仕事の効率が格段にアップするクラウドサービス活用術Yasunari Goto (iChain. Inc.)
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentRandy Connolly
 

Similar a Automated Identification of Cross-browser Issues in Web Applications (20)

Gwt Deep Dive
Gwt Deep DiveGwt Deep Dive
Gwt Deep Dive
 
Hedis - GET HBase via Redis
Hedis - GET HBase via RedisHedis - GET HBase via Redis
Hedis - GET HBase via Redis
 
The Internal Architecture of Chrome Developer Tools
The Internal Architecture of Chrome Developer ToolsThe Internal Architecture of Chrome Developer Tools
The Internal Architecture of Chrome Developer Tools
 
Combining Heritrix and PhantomJS for Better Crawling of Pages with Javascript
Combining Heritrix and PhantomJS for Better Crawling of Pages with JavascriptCombining Heritrix and PhantomJS for Better Crawling of Pages with Javascript
Combining Heritrix and PhantomJS for Better Crawling of Pages with Javascript
 
Building performance auf der Developer Conference Hamburg
Building performance auf der Developer Conference HamburgBuilding performance auf der Developer Conference Hamburg
Building performance auf der Developer Conference Hamburg
 
Gwt 2,3 Deep dive
Gwt 2,3 Deep diveGwt 2,3 Deep dive
Gwt 2,3 Deep dive
 
Design Based Dev
Design Based DevDesign Based Dev
Design Based Dev
 
Android Introduction
Android IntroductionAndroid Introduction
Android Introduction
 
AtlasCamp 2015: How HipChat ships at the speed of awesome
AtlasCamp 2015: How HipChat ships at the speed of awesomeAtlasCamp 2015: How HipChat ships at the speed of awesome
AtlasCamp 2015: How HipChat ships at the speed of awesome
 
Dynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and MobileDynamic User Interfaces for Desktop and Mobile
Dynamic User Interfaces for Desktop and Mobile
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
 
WordPress Performance Optimization for Mere Mortals
WordPress Performance Optimization for Mere MortalsWordPress Performance Optimization for Mere Mortals
WordPress Performance Optimization for Mere Mortals
 
Unit 06: The Web Application Extension for UML
Unit 06: The Web Application Extension for UMLUnit 06: The Web Application Extension for UML
Unit 06: The Web Application Extension for UML
 
Architeching a php application with interfaces to the ib mi
Architeching a php application with interfaces to the ib miArchiteching a php application with interfaces to the ib mi
Architeching a php application with interfaces to the ib mi
 
Vered Flis: Because performance matters! Architecture Next 20
Vered Flis: Because performance matters! Architecture Next 20Vered Flis: Because performance matters! Architecture Next 20
Vered Flis: Because performance matters! Architecture Next 20
 
Html5
Html5Html5
Html5
 
Understanding Your Content
Understanding Your ContentUnderstanding Your Content
Understanding Your Content
 
DeepSee Web: Angular Render for InterSystems DeepSee Dashboards
DeepSee Web: Angular Render for InterSystems DeepSee DashboardsDeepSee Web: Angular Render for InterSystems DeepSee Dashboards
DeepSee Web: Angular Render for InterSystems DeepSee Dashboards
 
仕事の効率が格段にアップするクラウドサービス活用術
仕事の効率が格段にアップするクラウドサービス活用術仕事の効率が格段にアップするクラウドサービス活用術
仕事の効率が格段にアップするクラウドサービス活用術
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web Development
 

Más de ICSM 2010

A tree kernel based approach for clone detection
A tree kernel based approach for clone detectionA tree kernel based approach for clone detection
A tree kernel based approach for clone detectionICSM 2010
 
Scalable Semantic Web-based Source Code Search Infrastructure
Scalable Semantic Web-based Source Code Search InfrastructureScalable Semantic Web-based Source Code Search Infrastructure
Scalable Semantic Web-based Source Code Search InfrastructureICSM 2010
 
2D and 3D Visualizations In Wikidev2.0 M. Fokaefs, D. Serrano, B. Tansey and ...
2D and 3D Visualizations In Wikidev2.0 M. Fokaefs, D. Serrano, B. Tansey and ...2D and 3D Visualizations In Wikidev2.0 M. Fokaefs, D. Serrano, B. Tansey and ...
2D and 3D Visualizations In Wikidev2.0 M. Fokaefs, D. Serrano, B. Tansey and ...ICSM 2010
 
Wiki dev nlp
Wiki dev nlpWiki dev nlp
Wiki dev nlpICSM 2010
 
iFL: An Interactive Environment for Understanding Feature Implementations
iFL: An Interactive Environment for Understanding Feature ImplementationsiFL: An Interactive Environment for Understanding Feature Implementations
iFL: An Interactive Environment for Understanding Feature ImplementationsICSM 2010
 
Using Clone Detection to Identify Bugs in Concurrent Software
Using Clone Detection to Identify Bugs in Concurrent SoftwareUsing Clone Detection to Identify Bugs in Concurrent Software
Using Clone Detection to Identify Bugs in Concurrent SoftwareICSM 2010
 
Physical and Conceptual Identifier Dispersion: Measures and Relation to Fault...
Physical and Conceptual Identifier Dispersion: Measures and Relation to Fault...Physical and Conceptual Identifier Dispersion: Measures and Relation to Fault...
Physical and Conceptual Identifier Dispersion: Measures and Relation to Fault...ICSM 2010
 
Automatically Repairing Test Cases for Evolving Method Declarations
Automatically Repairing Test Cases for Evolving Method DeclarationsAutomatically Repairing Test Cases for Evolving Method Declarations
Automatically Repairing Test Cases for Evolving Method DeclarationsICSM 2010
 
Reverse Engineering Object-Oriented Distributed Systems
Reverse Engineering Object-Oriented Distributed SystemsReverse Engineering Object-Oriented Distributed Systems
Reverse Engineering Object-Oriented Distributed SystemsICSM 2010
 
Software asset management
Software asset managementSoftware asset management
Software asset managementICSM 2010
 
Successfulresearch 100915022614-phpapp01
Successfulresearch 100915022614-phpapp01Successfulresearch 100915022614-phpapp01
Successfulresearch 100915022614-phpapp01ICSM 2010
 
Enabling multi tenancy(An Industrial Experience Report)
Enabling multi tenancy(An Industrial Experience Report)Enabling multi tenancy(An Industrial Experience Report)
Enabling multi tenancy(An Industrial Experience Report)ICSM 2010
 
Ponsini automatic slides
Ponsini automatic slidesPonsini automatic slides
Ponsini automatic slidesICSM 2010
 
Studying the impact of dependency network measures on software quality
Studying the impact of dependency network measures on software quality Studying the impact of dependency network measures on software quality
Studying the impact of dependency network measures on software quality ICSM 2010
 
Icsm2010 Announcement
Icsm2010 AnnouncementIcsm2010 Announcement
Icsm2010 AnnouncementICSM 2010
 

Más de ICSM 2010 (15)

A tree kernel based approach for clone detection
A tree kernel based approach for clone detectionA tree kernel based approach for clone detection
A tree kernel based approach for clone detection
 
Scalable Semantic Web-based Source Code Search Infrastructure
Scalable Semantic Web-based Source Code Search InfrastructureScalable Semantic Web-based Source Code Search Infrastructure
Scalable Semantic Web-based Source Code Search Infrastructure
 
2D and 3D Visualizations In Wikidev2.0 M. Fokaefs, D. Serrano, B. Tansey and ...
2D and 3D Visualizations In Wikidev2.0 M. Fokaefs, D. Serrano, B. Tansey and ...2D and 3D Visualizations In Wikidev2.0 M. Fokaefs, D. Serrano, B. Tansey and ...
2D and 3D Visualizations In Wikidev2.0 M. Fokaefs, D. Serrano, B. Tansey and ...
 
Wiki dev nlp
Wiki dev nlpWiki dev nlp
Wiki dev nlp
 
iFL: An Interactive Environment for Understanding Feature Implementations
iFL: An Interactive Environment for Understanding Feature ImplementationsiFL: An Interactive Environment for Understanding Feature Implementations
iFL: An Interactive Environment for Understanding Feature Implementations
 
Using Clone Detection to Identify Bugs in Concurrent Software
Using Clone Detection to Identify Bugs in Concurrent SoftwareUsing Clone Detection to Identify Bugs in Concurrent Software
Using Clone Detection to Identify Bugs in Concurrent Software
 
Physical and Conceptual Identifier Dispersion: Measures and Relation to Fault...
Physical and Conceptual Identifier Dispersion: Measures and Relation to Fault...Physical and Conceptual Identifier Dispersion: Measures and Relation to Fault...
Physical and Conceptual Identifier Dispersion: Measures and Relation to Fault...
 
Automatically Repairing Test Cases for Evolving Method Declarations
Automatically Repairing Test Cases for Evolving Method DeclarationsAutomatically Repairing Test Cases for Evolving Method Declarations
Automatically Repairing Test Cases for Evolving Method Declarations
 
Reverse Engineering Object-Oriented Distributed Systems
Reverse Engineering Object-Oriented Distributed SystemsReverse Engineering Object-Oriented Distributed Systems
Reverse Engineering Object-Oriented Distributed Systems
 
Software asset management
Software asset managementSoftware asset management
Software asset management
 
Successfulresearch 100915022614-phpapp01
Successfulresearch 100915022614-phpapp01Successfulresearch 100915022614-phpapp01
Successfulresearch 100915022614-phpapp01
 
Enabling multi tenancy(An Industrial Experience Report)
Enabling multi tenancy(An Industrial Experience Report)Enabling multi tenancy(An Industrial Experience Report)
Enabling multi tenancy(An Industrial Experience Report)
 
Ponsini automatic slides
Ponsini automatic slidesPonsini automatic slides
Ponsini automatic slides
 
Studying the impact of dependency network measures on software quality
Studying the impact of dependency network measures on software quality Studying the impact of dependency network measures on software quality
Studying the impact of dependency network measures on software quality
 
Icsm2010 Announcement
Icsm2010 AnnouncementIcsm2010 Announcement
Icsm2010 Announcement
 

Último

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfhans926745
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 

Último (20)

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 

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