Detecting Responsive Web Design Bugs with Declarative Specifications
0 likes154 views
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.
More Related Content
Similar to Detecting Responsive Web Design Bugs with Declarative Specifications (20)
More from Sylvain Hallé (20)
Recently uploaded (20)
Detecting Responsive Web Design Bugs with Declarative Specifications
- 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
- 6. ICWE June 9th, 2020 Menu elements get back on the same line at smaller widths
- 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. ICWE June 9th, 2020 How can we detect such responsive design layout bugs?
- 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. 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. ICWE June 9th, 2020 Driver A driver interacts with the browser to progressively resize the viewport
- 12. ICWE June 9th, 2020 Driver w1 A driver interacts with the browser to progressively resize the viewport
- 13. ICWE June 9th, 2020 Driver w1 w2 A driver interacts with the browser to progressively resize the viewport
- 14. ICWE June 9th, 2020 Driver w1 w2 . . . w3 A driver interacts with the browser to progressively resize the viewport
- 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. 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. 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. 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. 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)
- 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. ICWE June 9th, 2020 An architecture to instrument a web application and report relevant attributes to an interpreter 2.
- 31. ICWE June 9th, 2020 A mechanism to automatically verify the properties and give an explanation if a constraint is violated 3.
- 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. 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. ICWE June 9th, 2020 something And something else something Or something else Not something
- 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. 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. 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. 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. 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. 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. 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. 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. 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)