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. Selector Maps
selectors.js
module.exports = {
"standard paragraph": "section > p"
};
test.feature
Then "standard paragraph" should have
"color" of "rgb(68, 68, 68)"

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!