Automated Testing & CSS

Test-Driven Development has grown in popularity among the community in the past few years, but we're still lacking the proper tools to provide automation behind our CSS. How do you know a change you made to one small section on a page doesn't break a large section on another page of your site, especially when you support hundreds of devices? These slides look at three options available and show where they succeed and fail.

Transcript

1. Automated Testing & CSS Kevin Lamping, Rackspace Front-end Engineer @klamping
2. When I change the CSS
3. “Insanity: doing the same thing over and over again and expecting different results.”
4. “Insanity: doing the same thing over and over again and enjoying it.”
11. “Despite CSS being so hard to maintain, it's often the part of the FE stack people are least interested in protecting from tech debt.” @necolas
12. The Tools Wraith, Hardy, StyleDocco
13. Wraith
15. +
18. Installation $ curl -fsSL https://raw.github.com/bbc-news/wraith/ go/install | bash $ cd wraith $ bundle install
19. Demo
20. Wraith - Recap •Easy, simple set up •Nice site to view diffs •Entire screen comparison is bad for dynamic sites •No IE Testing •Need two sites with same content
23. Installation $ npm install -g hardy
24. Demo
25. Selector Maps selectors.js module.exports = { "standard paragraph": "section > p" }; test.feature Then "standard paragraph" should have "color" of "rgb(68, 68, 68)"
26. selectors.js module.exports = { "standard paragraph": "section > p" }; test.feature Then "standard paragraph" should have "color" of "rgb(68, 68, 68)" Selector Maps
27. CSS Testing Steps Then "section > p" should have "color" of "rgb(68, 68, 68)"
28. CSS Testing Steps Then <css selector> should have <property> of <value>
29. CSS Testing Steps Then <css selector> should have <property> of <greater|less> than <value>
30. CSS Testing Steps Then <css selector> should have offset <top or left> of <value>
31. CSS Testing Steps Then <css selector> should look the same as before
32. Demo
33. Basic Steps Given I visit "http://csste.st/"
34. Basic Steps Given the window size is <width> by <height>
35. Basic Steps Then I enter <string> into <css selector>
36. Basic Steps Then I submit the form <css selector>
37. Demo
38. Custom Steps
39. Hardy - Recap •Cross-browser coverage •Computed styles & specific shots •Site scripting built-in •No nice diff page •More work to set up •Have to repeat CSS •Pay attention to ' and "
40. StyleDocco
41. /* # Buttons Provides extra visual weight and identifies the primary action in a set of buttons. ``` <button class="btn primary">Primary</ button> <button class="btn primary :hover">Primary</button> ``` */
42. Demo
43. StyleDocco - Recap •No login/scripting needed •Allows for pseudo-class testing •Content is (mostly) static •Not the actual site
44. Get Involved! http://csste.st Thanks!