Download as PDF, PPTX
Uploaded bySylvain Hallé
Detecting Responsive Web Design Bugs with Declarative Specifications
The document discusses a method for detecting responsive web design (RWD) bugs using declarative specifications, which categorize bugs into five types, such as element collision and viewport protrusion. It proposes two solutions for detection: manual observation and automation using systematic rules and driver probes that produce snapshots of web pages. The approach allows for the formal evaluation of page layouts using a specialized language that incorporates temporal operators and facilitates the identification of layout inconsistencies.
Detecting Responsive Web Design Bugs with Declarative Specifications
- 1. ICWE June 9th, 2020 DetectingResponsive Web Design Bugs with Declarative Specifications Oussama Beroual, Francis Guérin, Sylvain Hallé Université du Québec à Chicoutimi CRSNG NSERC
- 2.
- 3.
- 4.
- 5.
- 6. ICWE June 9th, 2020 Menuelements get back on the same line at smaller widths
- 7. ICWE June 9th, 2020 Walshet 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 Howcan 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 Adriver interacts with the browser to progressively resize the viewport
- 12. ICWE June 9th, 2020 Driver w1 Adriver interacts with the browser to progressively resize the viewport
- 13. ICWE June 9th, 2020 Driver w1w2 A driver interacts with the browser to progressively resize the viewport
- 14. ICWE June 9th, 2020 Driver w1w2 . . . w3 A driver interacts with the browser to progressively resize the viewport
- 15. ICWE June 9th, 2020 Driver w1w2 . . . 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 w1w2 . . . 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 w1w2 . . . 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 w1w2 . . . 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 Endresult: RWD bugs become conditions on sequences of page summaries... ...can be modeled by an extension of Linear Temporal Logic (LTL)
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. ICWE June 9th, 2020 Alangage to express high-level constraints on web interfaces - DOM + CSS attributes - First-order quantification - Temporal operators <-- important! 1.
- 30. ICWE June 9th, 2020 Anarchitecture to instrument a web application and report relevant attributes to an interpreter 2.
- 31. ICWE June 9th, 2020 Amechanism to automatically verify the properties and give an explanation if a constraint is violated 3.
- 32. ICWE June 9th, 2020 Foreach $x in $(css-selector) something about $x. There exists $x in $(css-selector) such that something about $x.
- 33. ICWE June 9th, 2020 $x'sprop 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 somethingAnd something else something Or something else Not something
- 35. ICWE June 9th, 2020 Alwayssomething 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 Wesay 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 Wesay 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 Goodpoints 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 0100 200 300 400 500 Time(ms) Size Evaluation time wrt page size
- 42. ICWE June 9th, 2020 Serializationtime wrt page size 0 10000 20000 30000 40000 50000 60000 0 100 200 300 400 500 Time(ms) Size
- 43. ICWE June 9th, 2020 Oursolution 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.