Detecting Responsive Web Design Bugs with Declarative Specifications
•
0 j'aime•143 vues
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.
Recommandé
Recommandé
Contenu connexe
Similaire à Detecting Responsive Web Design Bugs with Declarative Specifications
Similaire à Detecting Responsive Web Design Bugs with Declarative Specifications (20)
Plus de Sylvain Hallé
Plus de Sylvain Hallé (20)
Dernier
Dernier (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)