Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Detecting Responsive Web Design Bugs with Declarative Specifications

67 views

Published on

Responsive Web Design (RWD) is a concept that is born from the need to provide users with a positive and intuitive experience, no matter what device they use. Complex Cascading Style Sheets (CSS) are used in RWD to smoothly change the appearance of a website based on the window width of the device being used. The paper presents an automated approach for testing these dynamic web applications, where a combination of dynamic crawling and back-end testing is used to automatically detect RWD bugs.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Detecting Responsive Web Design Bugs with Declarative Specifications

  1. 1. ICWE June 9th, 2020 Detecting Responsive Web Design Bugs with Declarative Specifications Oussama Beroual, Francis Guérin, Sylvain Hallé Université du Québec à Chicoutimi CRSNG NSERC
  2. 2. ICWE June 9th, 2020 ✓
  3. 3. ICWE June 9th, 2020 ✓
  4. 4. ICWE June 9th, 2020 X
  5. 5. ICWE June 9th, 2020
  6. 6. ICWE June 9th, 2020 Menu elements get back on the same line at smaller widths
  7. 7. ICWE June 9th, 2020 Walsh et al. (2017) describe five categories of responsive layout bugs 1. Element collision 2. Element protrusion 3. Viewport protrusion 4. Wrapping elements 5. Small-range layouts
  8. 8. ICWE June 9th, 2020 How can we detect such responsive design layout bugs?
  9. 9. ICWE June 9th, 2020 Solution #1 Manual observation by a human tester M. TEST Slow process with lots of things to verify (all possible viewport sizes?) Problems are sometimes subtle to detect Problem here!
  10. 10. ICWE June 9th, 2020 Solution #2 Automation! Come up with systematic rules/conditions that can identify RWD bugs But what could these rules be?
  11. 11. ICWE June 9th, 2020 Driver A driver interacts with the browser to progressively resize the viewport
  12. 12. ICWE June 9th, 2020 Driver w1 A driver interacts with the browser to progressively resize the viewport
  13. 13. ICWE June 9th, 2020 Driver w1 w2 A driver interacts with the browser to progressively resize the viewport
  14. 14. ICWE June 9th, 2020 Driver w1 w2 . . . w3 A driver interacts with the browser to progressively resize the viewport
  15. 15. ICWE June 9th, 2020 Driver w1 w2 . . . w3 Probe A driver interacts with the browser to progressively resize the viewport A probe produces a summary ("snapshot") of each page
  16. 16. ICWE June 9th, 2020 Driver w1 w2 . . . w3 Probe Page snapshot A driver interacts with the browser to progressively resize the viewport A probe produces a summary ("snapshot") of each page
  17. 17. ICWE June 9th, 2020 Driver w1 w2 . . . w3 Probe Page snapshot φ A driver interacts with the browser to progressively resize the viewport A probe produces a summary ("snapshot") of each page A stateful oracle evaluates this sequence of snapshots against a formal property φ
  18. 18. ICWE June 9th, 2020 Driver w1 w2 . . . w3 Probe Page snapshot φ Stateful oracle A driver interacts with the browser to progressively resize the viewport A probe produces a summary ("snapshot") of each page A stateful oracle evaluates this sequence of snapshots against a formal property φ
  19. 19. ICWE June 9th, 2020 End result: RWD bugs become conditions on sequences of page summaries... ...can be modeled by an extension of Linear Temporal Logic (LTL)
  20. 20. ICWE June 9th, 2020
  21. 21. ICWE June 9th, 2020 System
  22. 22. ICWE June 9th, 2020 System
  23. 23. ICWE June 9th, 2020 System Instrumentation
  24. 24. ICWE June 9th, 2020 System Instrumentation
  25. 25. ICWE June 9th, 2020 System Trace Instrumentation
  26. 26. ICWE June 9th, 2020 System Trace Events Instrumentation
  27. 27. ICWE June 9th, 2020 System Trace Events Instrumentation
  28. 28. ICWE June 9th, 2020
  29. 29. ICWE June 9th, 2020 A langage to express high-level constraints on web interfaces - DOM + CSS attributes - First-order quantification - Temporal operators <-- important! 1.
  30. 30. ICWE June 9th, 2020 An architecture to instrument a web application and report relevant attributes to an interpreter 2.
  31. 31. ICWE June 9th, 2020 A mechanism to automatically verify the properties and give an explanation if a constraint is violated 3.
  32. 32. ICWE June 9th, 2020 For each $x in $(css-selector) something about $x. There exists $x in $(css-selector) such that something about $x.
  33. 33. ICWE June 9th, 2020 $x's prop is greater than $y's prop $x's height $x's text $x's color $x's prop matches "a string" ...and most CSS/DOM attributes ...and most usual functions
  34. 34. ICWE June 9th, 2020 something And something else something Or something else Not something
  35. 35. ICWE June 9th, 2020 Always something Eventually something something Until something else The next time something, then something else Constraints on sequences of snapshots can be written using temporal operators.
  36. 36. ICWE June 9th, 2020 We say that pattern When something. Example: We say that $x is wider than $y When $x's width is greater than $y's width. We can define predicates ("macros") to provide constructs at a higher level of abstraction.
  37. 37. ICWE June 9th, 2020 Always ( For each $x in $(body *) ( For each $y in $($x > *) ( For each $z in $($x > *) ( If ( ($y and $z are not the same) And ($y and $z do not overlap) ) Then (Next ( When $y is now $a (When $z is now $b ( $a and $b do not overlap)))))))). Cornipickle expression defining Element Collision
  38. 38. ICWE June 9th, 2020 Always ( For each $x in $(*) ( For each $y in $($x > *) ( If ($y is fully inside $x) Then (Next ( When $x is now $a ( When $y is now $b ( $b is fully inside $a))))))). Cornipickle expression defining Element Protrusion
  39. 39. ICWE June 9th, 2020 We say that the list $x is aligned when ( For each $y in $($x > li) ( For each $z in $($x > li) ( ($y and $z are top-aligned) Or ($y and $z are left-aligned)))). Cornipickle expression defining Wrapping Elements Always ( For each $x in $(ul) ( If (the list $x is aligned) Then ( Next ( When $x is now $y ( the list $y is aligned))))).
  40. 40. ICWE June 9th, 2020 Good points RWD bugs are properties in a generic and declarative language => easy support for new types of bugs . The interpreter can identify and highlight specific elements of the interface that cause the bug
  41. 41. ICWE June 9th, 2020 0 5 10 15 20 25 0 100 200 300 400 500 Time(ms) Size Evaluation time wrt page size
  42. 42. ICWE June 9th, 2020 Serialization time wrt page size 0 10000 20000 30000 40000 50000 60000 0 100 200 300 400 500 Time(ms) Size
  43. 43. ICWE June 9th, 2020 Our solution is free and open source: http://github.com/liflab/crawljax-cornipickle-plugin Ongoing work with a web design company to integrate into their production workflow (Canadian Mitacs grant)
  44. 44. ICWE June 9th, 2020 https://liflab.ca https://github.com/liflab/cornipickle https://leduotang.ca/sylvain

×