Automatic Detection of Potential Layout Faults in Responsive Web Pages Thomas A. Walsh* , Phil McMinn* and Gregory M. Kapfhammer + University of She ffi eld * , Allegheny College + twalsh1@she ffi eld.ac.uk www.thomaswalsh.co.uk Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
The Web - Past and Present https://blog.pivotal.io/labs/labs/an-introduction-to-qa-at-xtreme-labs Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
More Potential Increased User Loyalty Customers Why go mobile- Ease of Use More Business friendly? Higher Search Better User Retention Engine Rankings Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
Making a Webpage Mobile-Friendly Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
Responsive Web Design • Introduced by Ethan Marcotte in 2011. • Aims to provide an optimal browsing experience to all devices. • Described by W3C as “a must for tablet and mobile devices”. • Based around three main concepts: • Flexible grids • Flexible images • Media queries Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
Testing Responsive Web Pages Hundreds of different devices Insufficient suite of developer tools No stable automation framework Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
Layout Faults Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
Layout Faults Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
Layout Faults Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
Layout Faults Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
(400, 767) => W (400, 1300) => X (768, 1023) => Y Sample Extract Webpage Layout (992, 1300) => Z Constraints Responsive Layout Graph Models responsive Comparing two RLG Focusses on three behaviour of web models results in a set layout features: page across a wide of layout differences visibility, width range of viewport between the two and alignment versions of the page widths Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
Body Nav Container Link 1 Div 1 Link 2 Div 2 Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
RLG - Visibility Constraints (w min , w max ) (400, 767) (768, 1300) Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
(400,1300) Body (768,1300) (400,1300) Nav Container (768,1300) (400,1300) Div 1 Link 1 (768,1300) (400,1300) Link 2 Div 2 Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
RLG - Alignment Constraints (w min , w max , t, A) (400, 767, S, {“Above”}) (768, 1300, S, {“Left Of”}) Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
(400,1300) Body (400,1300,PC,{T,C}) (400,1300,PC,{C}) (768,1300) (768,1300) (400,1300) (400,1300) Nav Container (400,1300,S,{A}) (400,1300,PC,{}) (768,1300,PC,{LJ}) (768,1300) (768,1300) (400,1300) (400,1300) UL Link 1 Div 1 (400,1300,PC,{}) (768,1300,S,{L}) (400,767,S,{A}) (768,1300,S,{L}) (768,1300,PC,{RJ}) (768,1300) (400,1300) (400,1300) (768,1300) Link 2 Div 2 Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
RLG - Width Constraints (w min , w max , m, c) Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
RLG - Width Constraints (w min , w max , m, c) 700 300 525 Element Width (px) Element Width (px) 225 (768, 1300, 0, 150) (400, 767, 1, -20) 350 150 175 75 0 -175 0 Parent Width (px) Parent Width (px) Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
(400,1300) Body (400,1300,100,0) (400,1300,PC,{T,C}) (400,1300,PC,{C}) (768,1300) (400,1300) Nav Container (400,1300,S,{A}) (768,1300,50,0) (400,1300,100,0) (400,1300,PC,{}) (768,1300,PC,{LJ}) (768,1300) (400,1300) Link 1 Intro (768,1300,0,50) (400,767,100,-20) (400,1300,PC,{}) (768,1300,50,-20) (768,1300,S,{L}) (400,767,S,{A}) (768,1300,S,{L}) (768,1300,PC,{RJ}) (400,1300) (768,1300) About Link 2 (400,767,100,-20) (768,1300,0,50) (768,1300,50,-20) Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
Experimental Procedure M 1 M 2 M 3 M 4 M 5 CSS Oracle M 7 M 8 M 9 M 10 CSS M 6 Mutator Webpage M 11 M 12 M 13 M 14 M 15 Files M 16 M 17 M 18 M 19 M 20 M 4 R E D E CHECK M 3 M 2 M 1 M 1 M 2 M 3 M 4 M 5 M 6 M 7 M 8 M 9 M 10 M 11 M 12 M 13 M 14 M 15 M 16 M 17 M 18 M 19 M 20 Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
Results True Pos True Neg False Pos False Neg 14 5 1 aftrnoon.com 19 1 briefi.ng 13 1 6 getbootstrap.com 16 4 responsiveprocess.com 18 1 1 reserve.com 0 5 10 15 20 Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
The R E D E CHECK Tool Available at https://github.com/redecheck/redecheck-tool Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
Responsive Layout Supporting the Graph mobile web is crucial ReDeCheck tool Encouraging initial available for download empirical results Thomas Walsh Automatic Detection of Potential Layout twalsh1@sheffield.ac.uk Faults in Responsive Web Pages
Recommend
More recommend
