AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT - - PowerPoint PPT Presentation

▶
automated layout failure detection for responsive web
SMART_READER_LITE
LIVE PREVIEW

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT - - PowerPoint PPT Presentation

Oct 13, 2023 265 likes •1k views

1 THOMAS WALSH 1 , PHIL MCMINN 1 , GREGORY KAPFHAMMER 2 1 UNIVERSITY OF SHEFFIELD, 2 ALLEGHENY COLLEGE AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE 2 ISSTA 2017 A LONG TIME AGO THOMAS WALSH

slide-1
SLIDE 1

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

THOMAS WALSH1, PHIL MCMINN1, GREGORY KAPFHAMMER2

1UNIVERSITY OF SHEFFIELD, 2ALLEGHENY COLLEGE

1

slide-2
SLIDE 2

ISSTA 2017

A LONG TIME AGO…

2

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-3
SLIDE 3

ISSTA 2017

THE WEB TODAY

3

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

https://blog.pivotal.io/labs/labs/an-introduction-to-qa-at-xtreme-labs

slide-4
SLIDE 4

ISSTA 2017

WHY SUPPORT ALL DEVICES?

4

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK

slide-5
SLIDE 5

ISSTA 2017

HOW CAN DEVELOPERS MAKE WEBSITES SUPPORT ALL DEVICES?

USE RESPONSIVE WEB DESIGN.

5

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK

slide-6
SLIDE 6

ISSTA 2017

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

RESPONSIVE WEB DESIGN

6

http://getbootstrap.com

slide-7
SLIDE 7

ISSTA 2017

RESPONSIVE LAYOUT FAILURES

7

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-8
SLIDE 8

ISSTA 2017

RESPONSIVE LAYOUT FAILURES

8

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-9
SLIDE 9

ISSTA 2017

RESPONSIVE LAYOUT FAILURES

9

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-10
SLIDE 10

ISSTA 2017

RESPONSIVE LAYOUT FAILURES

10

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-11
SLIDE 11

ISSTA 2017

RESPONSIVE LAYOUT FAILURES

11

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-12
SLIDE 12

ISSTA 2017

RESPONSIVE LAYOUT FAILURES

12

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-13
SLIDE 13

ISSTA 2017

HOW DO DEVELOPERS TEST RESPONSIVE WEBSITES?

THEY “SPOT-CHECK”.

WHAT IS THE ORACLE FOR RESPONSIVE WEBSITES?

THE HUMAN TESTER.

13

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK

slide-14
SLIDE 14

ISSTA 2017

A SPOTCHECKING EXAMPLE

14

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK

320 pixels 768 pixels 1024 pixels 1200 pixels 980 pixels

slide-15
SLIDE 15

ISSTA 2017

SUMMARY OF APPROACH

15

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK

RESPONSIVE LAYOUT GRAPH (RLG) COMMON RESPONSIVE LAYOUT FAILURE DETECTION

slide-16
SLIDE 16

ISSTA 2017

THE RESPONSIVE LAYOUT GRAPH

16

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

DIV[1] DIV[2] DIV[3] DIV[1] DIV[2] DIV[3] IMG

320PX-1400PX BODY 768PX-1400PX IMG 320PX-1400PX DIV[3] 320PX-1400PX DIV[2] 320PX-1400PX DIV[1]

320px-767px, above 768px-1400px, left-of 320px-767px , centre-justified 768px-1400px, left-justified

320 pixels 768 pixels

slide-17
SLIDE 17

ISSTA 2017

RLF 1 - ELEMENT COLLISION

17

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-18
SLIDE 18

18

slide-19
SLIDE 19

19

slide-20
SLIDE 20

ISSTA 2017

RLF 1 - ELEMENT COLLISION

  • 1. Check whether any pair of elements are overlapping

at any point.

  • 2. If two elements are overlapping, check the layout at the

wider viewport width.

  • 3. If elements no longer overlapping, report an element

collision failure.

20

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-21
SLIDE 21

ISSTA 2017

RLF 1 - ELEMENT COLLISION

21

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

320PX-1400PX FORM 320PX-1400PX DIV 320px-767px, above 768px-1000px, overlapping 1001px-1400px, left-of

slide-22
SLIDE 22

ISSTA 2017

RLF 1 - ELEMENT COLLISION

  • 1. Check whether any pair of elements are overlapping at

any point.

  • 2. If two elements are overlapping, check the layout at

the wider viewport width.

  • 3. If elements no longer overlapping, report an element

collision failure.

22

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-23
SLIDE 23

ISSTA 2017

RLF 1 - ELEMENT COLLISION

23

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

320PX-1400PX FORM 320PX-1400PX DIV 320px-767px, above 768px-1000px, overlapping 1001px-1400px, left-of

slide-24
SLIDE 24

ISSTA 2017

RLF 1 - ELEMENT COLLISION

  • 1. Check whether any pair of elements are overlapping at

any point.

  • 2. If two elements are overlapping, check the layout at the

wider viewport width.

  • 3. If elements no longer overlapping, report an element

collision failure.

24

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-25
SLIDE 25

ISSTA 2017

RLF 1 - ELEMENT COLLISION

25

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

Element collision between 768px and 1000px.

320PX-1400PX FORM 320PX-1400PX DIV 320px-767px, above 768px-1000px, overlapping 1001px-1400px, left-of

slide-26
SLIDE 26

ISSTA 2017

RLF 2 - ELEMENT PROTRUSION

26

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-27
SLIDE 27

27

slide-28
SLIDE 28

28

slide-29
SLIDE 29

ISSTA 2017

RLF 2 - ELEMENT PROTRUSION

  • 1. Check whether any pair of elements are overlapping

at any point.

  • 2. If two elements are overlapping, check the layout at

the wider viewport width.

  • 3. If one element now contains the other, report an element

protrusion failure.

29

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-30
SLIDE 30

ISSTA 2017

RLF 2 - ELEMENT PROTRUSION

30

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

320PX-1400PX HEADER 320PX-1400PX FORM

320px-640px, overlapping 641px-1400px, contains

slide-31
SLIDE 31

ISSTA 2017

RLF 2 - ELEMENT PROTRUSION

  • 1. Check whether any pair of elements are overlapping at

any point.

  • 2. If two elements are overlapping, check the layout at the

wider viewport width.

  • 3. If one element now contains the other, report an

element protrusion failure.

31

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-32
SLIDE 32

ISSTA 2017

RLF 2 - ELEMENT PROTRUSION

32

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

Element protrusion between 320px and 640px.

320px-640px, overlapping 641px-1400px, contains

320PX-1400PX HEADER 320PX-1400PX FORM

slide-33
SLIDE 33

ISSTA 2017

RLF 3 - VIEWPORT PROTRUSION

33

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-34
SLIDE 34

34

slide-35
SLIDE 35

35

slide-36
SLIDE 36

ISSTA 2017

RLF 3 - VIEWPORT PROTRUSION

  • 1. Look through each element.
  • 2. Check that for every viewport width the element is visible,

it is contained within some other element.

  • 3. If, at any point, the element is not contained at all, report

a viewport protrusion failure.

36

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-37
SLIDE 37

ISSTA 2017

RLF 3 - VIEWPORT PROTRUSION

37

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

981PX-1400PX DIV

1050px-1400px, contains

320PX-1400PX BODY

slide-38
SLIDE 38

ISSTA 2017

RLF 3 - VIEWPORT PROTRUSION

  • 1. Look through each element.
  • 2. Check that for every viewport width the element is

visible, it is contained within some other element.

  • 3. If, at any point, the element is not contained at all, report

a viewport protrusion failure.

38

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-39
SLIDE 39

ISSTA 2017

RLF 3 - VIEWPORT PROTRUSION

39

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

1050px-1400px, contains

981PX-1400PX DIV 320PX-1400PX BODY

slide-40
SLIDE 40

ISSTA 2017

RLF 3 - VIEWPORT PROTRUSION

  • 1. Look through each element.
  • 2. Check that for every viewport width the element is visible,

it is contained within some other element.

  • 3. If, at any point, the element is not contained at all,

report a viewport protrusion failure.

40

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-41
SLIDE 41

ISSTA 2017

RLF 3 - VIEWPORT PROTRUSION

41

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

1050px-1400px, contains

Viewport protrusion between 981px and 1049px.

981PX-1400PX DIV 320PX-1400PX BODY

slide-42
SLIDE 42

ISSTA 2017

RLF 4 - SMALL-RANGE LAYOUTS

42

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-43
SLIDE 43

43

slide-44
SLIDE 44

44

slide-45
SLIDE 45

ISSTA 2017

  • 1. Are any layouts only applied for a small number of

viewport widths (e.g., 5)?

  • 2. If so, check if similar layouts exist both before and after

the small-range layout.

  • 3. If so, report the small-range layout failure.

45

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

RLF 4 - SMALL-RANGE LAYOUTS

slide-46
SLIDE 46

ISSTA 2017 46

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

320PX-1400PX HEADER 320PX-1400PX BANNER 320px-979px, above 980px-980px, overlapping 981px-1400px, above

RLF 4 - SMALL-RANGE LAYOUTS

slide-47
SLIDE 47

ISSTA 2017

  • 1. Are any layouts only applied for a small number of

viewport widths (e.g., 5)?

  • 2. If so, check if similar layouts exist both before and

after the small-range layout.

  • 3. If so, report the small-range layout failure.

47

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

RLF 4 - SMALL-RANGE LAYOUTS

slide-48
SLIDE 48

ISSTA 2017 48

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

320PX-1400PX HEADER 320PX-1400PX BANNER 320px-979px, above 980px-980px, overlapping 981px-1400px, above

RLF 4 - SMALL-RANGE LAYOUTS

slide-49
SLIDE 49

ISSTA 2017

  • 1. Are any layouts only applied for a small number of

viewport widths (e.g., 5)?

  • 2. If so, check if similar layouts exist both before and after

the small-range layout.

  • 3. If so, report the small-range layout failure.

49

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

RLF 4 - SMALL-RANGE LAYOUTS

slide-50
SLIDE 50

ISSTA 2017 50

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

Small-range layout at 980 pixels.

320PX-1400PX HEADER 320PX-1400PX BANNER 320px-979px, above 980px-980px, overlapping 981px-1400px, above

RLF 4 - SMALL-RANGE LAYOUTS

slide-51
SLIDE 51

ISSTA 2017

RLF 5 - ELEMENT WRAPPING

51

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-52
SLIDE 52

52

slide-53
SLIDE 53

53

slide-54
SLIDE 54

ISSTA 2017

RLF 5 - ELEMENT WRAPPING

  • 1. Analyse layout information to determine which

elements are laid out in rows.

  • 2. Are there any rows which one element is not in?
  • 3. If this element is in the row at a wider viewport, report an

element wrapping failure.

54

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-55
SLIDE 55

ISSTA 2017

RLF 5 - ELEMENT WRAPPING

55

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

LI[3] LI[1] LI[2]

768px-1400px, left-of 768px-800px, above 801px-1400px, left-of 768px-800px, above 801px-1400px, left-of

slide-56
SLIDE 56

ISSTA 2017

RLF 5 - ELEMENT WRAPPING

  • 1. Analyse layout information to determine which elements

are laid out in rows.

  • 2. Are there any rows which one element is not in?
  • 3. If this element is in the row at a wider viewport, report an

element wrapping failure.

56

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-57
SLIDE 57

ISSTA 2017

RLF 5 - ELEMENT WRAPPING

57

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

LI[3] LI[1] LI[2]

768px-1400px, left- 768px-800px, above 801px-1400px, left-of 768px-800px, above 801px-1400px, left-of

slide-58
SLIDE 58

ISSTA 2017

RLF 5 - ELEMENT WRAPPING

  • 1. Analyse layout information to determine which elements

are laid out in rows.

  • 2. Are there any rows which one element is not in?
  • 3. If this element is in the row at a wider viewport, report

an element wrapping failure.

58

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-59
SLIDE 59

ISSTA 2017

RLF 5 - ELEMENT WRAPPING

59

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

Element wrapping between 768px and 800px.

LI[3] LI[1] LI[2]

768px-1400px, left- 768px-800px, above 801px-1400px, left-of 768px-800px, above 801px-1400px, left-of

slide-60
SLIDE 60

ISSTA 2017

EMPIRICAL EVALUATION

  • 1. Can the approach detect responsive layout failures in

real-world responsive web pages?

  • 2. How effective are manual “spotchecking” approaches in

comparison to our approach?

  • 3. How long do our techniques take to run?

ReDeCheck - Responsive Design Checker

60

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK

slide-61
SLIDE 61

ISSTA 2017 61

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK

slide-62
SLIDE 62

ISSTA 2017

RQ1 CAN THE APPROACH DETECT RESPONSIVE LAYOUT FAILURES IN REAL-WORLD RESPONSIVE WEB PAGES?

62

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK

slide-63
SLIDE 63

ISSTA 2017 63

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK

slide-64
SLIDE 64

ISSTA 2017 64

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK

slide-65
SLIDE 65

ISSTA 2017

RESEARCH QUESTION ONE

▸

Responsive layout failures found in 16 of the 26 web pages.

▸

196 true positive results conflated to 33 distinct RLFs.

▸

False positives mainly caused by “coincidental” attributes being assigned to constraints.

▸

Many NOIs showed significant structural issues, which could easily manifest as TPs in the future.

▸

On average, developers need to check 4 distinct viewport ranges to observe each TP failure.

65

Failure Type TP FP NOI RLFs Element Collision 8 24 8 Element Protrusion 3 36 3 Viewport Protrusion 24 23 11 Small-Range 152 43 1 Wrapping 10 5 10 Total 196 48 83 33

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-66
SLIDE 66

ISSTA 2017

RQ2 HOW EFFECTIVE ARE MANUAL “SPOTCHECKING” APPROACHES IN COMPARISON TO OUR APPROACH?

66

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK

slide-67
SLIDE 67

ISSTA 2017

RESEARCH QUESTION TWO

67

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

6 12 18 24 30 36 KERSLEY RESPONSINATOR RD CHECKER V-RESIZER FIREFOX RWD REDECHECK

33 27 26 23 22 22

slide-68
SLIDE 68

ISSTA 2017

RQ3 HOW LONG DO OUR TECHNIQUES TAKE TO RUN?

68

AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK

slide-69
SLIDE 69

ISSTA 2017

RESEARCH QUESTION THREE

69

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

60 120 180 240 300 3-MINUTE-JOURNAL ACCOUNTKILLER AIRBNB BUGMENOT CLOUDCONVERT CONSUMER-REPORTS COVERED-CALENDAR DAYS-OLD DICTATION DUOLINGO HONEY HOTELWIFITEST MAILINATOR MIDWAYMEETUP NINITE PDF-ESCAPE PEPFEED POCKET RAINYMOOD RUNPEE STUMBLEUPON TOPDOCUMENTARY USERSEARCH WSIRN WILLMYPHONEWORK ZERODOLLARMOVIES

slide-70
SLIDE 70

ISSTA 2017

THE REDECHECK TOOL

70

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

https://github.com/redecheck/redecheck http://redecheck.org https://github.com/redecheck/example-webpages

slide-71
SLIDE 71

ISSTA 2017 71

THOMAS WALSH TWALSH1@SHEFFIELD.AC.UK AUTOMATED LAYOUT FAILURE DETECTION FOR RESPONSIVE WEB PAGES WITHOUT AN EXPLICIT ORACLE

slide-72
SLIDE 72

THANK YOU

TWALSH1@SHEFFIELD.AC.UK THOMASWALSH.CO.UK REDECHECK.ORG

72