automatic detection of potential layout faults in ... filethomas walsh twalsh1@sheffield.ac.uk...
TRANSCRIPT
![Page 1: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/1.jpg)
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
![Page 2: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/2.jpg)
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
![Page 3: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/3.jpg)
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
![Page 4: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/4.jpg)
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Making a Webpage Mobile-Friendly
![Page 5: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/5.jpg)
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
![Page 6: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/6.jpg)
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
![Page 7: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/7.jpg)
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Layout Faults
![Page 8: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/8.jpg)
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Layout Faults
![Page 9: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/9.jpg)
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Layout Faults
![Page 10: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/10.jpg)
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
Layout Faults
![Page 11: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/11.jpg)
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
![Page 12: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/12.jpg)
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
![Page 13: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/13.jpg)
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
RLG - Visibility Constraints
(wmin, wmax)
(400, 767) (768, 1300)
![Page 14: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/14.jpg)
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)
![Page 15: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/15.jpg)
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”})
![Page 16: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/16.jpg)
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})
![Page 17: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/17.jpg)
Thomas Walsh [email protected]
Automatic Detection of Potential Layout Faults in Responsive Web Pages
RLG - Width Constraints
(wmin, wmax, m, c)
![Page 18: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/18.jpg)
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)
![Page 19: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/19.jpg)
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)
![Page 20: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/20.jpg)
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
![Page 21: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/21.jpg)
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
![Page 22: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/22.jpg)
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
![Page 23: Automatic Detection of Potential Layout Faults in ... fileThomas Walsh twalsh1@sheffield.ac.uk Automatic Detection of Potential Layout Faults in Responsive Web Pages Automatic Detection](https://reader030.vdocuments.us/reader030/viewer/2022041220/5e09e995d928b11552691e93/html5/thumbnails/23.jpg)
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