Embed Size (px)
Citation preview
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Automatic Detection of Potential Layout Faults in Responsive Web PagesThomas A. Walsh*, Phil McMinn* and Gregory M. Kapfhammer+
University of Sheffield*, Allegheny College+ [email protected] www.thomaswalsh.co.uk
Thomas Walsh [email protected]
Automatic Detection of Potential Layout 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 [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Why go mobile-friendly?
More Potential Customers
Higher Search Engine Rankings
Increased User Loyalty
Better User Retention
More BusinessEase of Use
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Making a Webpage Mobile-Friendly
Thomas Walsh [email protected]
Automatic Detection of Potential Layout 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 [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Testing Responsive Web Pages
Hundreds of different devices
No stable automation framework
Insufficient suite of developer tools
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Layout Faults
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Layout Faults
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Layout Faults
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Layout Faults
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Responsive Layout Graph
(400, 767) => W
(400, 1300) => X
(768, 1023) => Y
(992, 1300) => ZSample
WebpageExtract Layout
Constraints
Models responsive behaviour of web
page across a wide range of viewport
widths
Focusses on three layout features: visibility, width and alignment
Comparing two RLG models results in a set of layout differences
between the two versions of the page
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Body
Link 1
Link 2
Nav Container
Div 1
Div 2
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
RLG - Visibility Constraints
(wmin, wmax)
(400, 767) (768, 1300)
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Body(400,1300)
Link 1(768,1300)
Link 2(768,1300)
Nav(768,1300)
Container(400,1300)
Div 1 (400,1300)
Div 2(400,1300)
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
RLG - Alignment Constraints
(400, 767, S, {“Above”})
(wmin, wmax, t, A)
(768, 1300, S, {“Left Of”})
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
UL(768,1300)
(768,1300)
(768,1300) (400,1300)
(400,1300)
(400,1300)
Body
ContainerNav
Link 2
Div 1
Div 2
(400,1300)
Link 1(768,1300)
(768,1300)
(768,1300) (400,1300)
(400,1300)
(400,1300)
(400,1300,PC,{T,C})
(400,1300,S,{A})
(768,1300,PC,{LJ})
(768,1300,S,{L}) (400,767,S,{A}) (768,1300,S,{L})
(400,1300,PC,{C})
(400,1300,PC,{})
(400,1300,PC,{})
(768,1300,PC,{RJ})
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
RLG - Width Constraints
(wmin, wmax, m, c)
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
RLG - Width ConstraintsEl
emen
t Wid
th (p
x)
-175
0
175
350
525
700
Parent Width (px)
Elem
ent W
idth
(px)
0
75
150
225
300
Parent Width (px)
(768, 1300, 0, 150)(400, 767, 1, -20)
(wmin, wmax, m, c)
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Link 1
Body
ContainerNav
Link 2
Intro
About
(400,1300,S,{A})
(768,1300,PC,{LJ})
(768,1300,S,{L}) (400,767,S,{A}) (768,1300,S,{L})
(400,1300,PC,{T,C}) (400,1300,PC,{C})
(400,1300,PC,{})
(400,1300,PC,{})
(768,1300,PC,{RJ})
(768,1300,0,50)
(768,1300)
(768,1300,0,50)
(768,1300)
(768,1300,50,0)
(400,1300)
(400,1300,100,0)
(400,1300)
(400,767,100,-20)(768,1300,50,-20)
(400,1300)
(400,767,100,-20)(768,1300,50,-20)
(400,1300,100,0)
(768,1300)
(400,1300)
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Experimental Procedure
Oracle Webpage
CSS Files
CSS Mutator
M5M4M1 M2 M3
M10M9M6 M7 M8
M15M14M11 M12 M13
M20M19M16 M17 M18
REDECHECKM1
M2M3
M4
M11 M13 M17M12 M16M14 M15 M18
M8
M20
M1 M4 M5M3 M6M2 M7
M19
M9 M10
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Results
aftrnoon.com
briefi.ng
getbootstrap.com
responsiveprocess.com
reserve.com
0 5 10 15 20
1
6
1
1
4
1
1
5
18
16
13
19
14
True Pos True Neg False Pos False Neg
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
The REDECHECK Tool
Available at https://github.com/redecheck/redecheck-tool
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
ReDeCheck tool available for download
Responsive Layout Graph
Supporting the mobile web is crucial
Encouraging initial empirical results
