Automated Testing
& CSS
Kevin Lamping, Rackspace
Front-end Engineer
@klamping
When I change the CSS
“Insanity: doing the same
thing over and over
again and expecting
different results. ”
“Insanity: doing the same
thing over and over
again and enjoying it.”
“Despite CSS being so
hard to maintain, it's often
the part of the FE stack
people are least interested
in protecting from...
The Tools

Wraith, Hardy, StyleDocco
Wraith
+
Installation
$ curl -fsSL https://raw.github.com/bbc-news/wraith/
go/install | bash
$ cd wraith
$ bundle install
Demo
Wraith - Recap
• Easy, simple set up
• Nice site to view diffs
• Entire screen comparison is bad
for dynamic sites
• No IE...
Installation
$ npm install -g hardy
Demo
Selector Maps
selectors.js
module.exports = {
"standard paragraph": "section > p"
};
test.feature
Then "standard paragraph...
Selector Maps
selectors.js
module.exports = {
"standard paragraph": "section > p"
};
test.feature
Then "standard paragraph...
CSS Testing Steps
Then "section > p" should have "color" of
"rgb(68, 68, 68)"
CSS Testing Steps
Then <css selector> should have <property>
of <value>
CSS Testing Steps
Then <css selector> should have <property>
of <greater|less> than <value>
CSS Testing Steps
Then <css selector> should have offset
<top or left> of <value>
CSS Testing Steps
Then <css selector> should look the same
as before
Demo
Basic Steps
Given I visit "http://csste.st/"
Basic Steps
Given the window size is <width> by
<height>
Basic Steps
Then I enter <string> into <css selector>
Basic Steps
Then I submit the form <css selector>
Demo
Custom Steps
Hardy - Recap
• Cross-browser coverage
• Computed styles & specific shots
• Site scripting built-in
• No nice diff page
• ...
StyleDocco
/*
# Buttons
Provides extra visual weight and
identifies the primary action in a set of
buttons.
```
<button class="btn pr...
Demo
StyleDocco - Recap
• No login/scripting needed
• Allows for pseudo-class testing
• Content is (mostly) static
• Not the ac...
Get Involved!
http://csste.st
Thanks!
Automated Tests and CSS
Automated Tests and CSS
Automated Tests and CSS
Automated Tests and CSS
Automated Tests and CSS
Automated Tests and CSS
Automated Tests and CSS
Automated Tests and CSS
Automated Tests and CSS
Automated Tests and CSS
Automated Tests and CSS
Upcoming SlideShare
Loading in …5
×

Automated Tests and CSS

1,751 views
1,662 views

Published on

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,751
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Automated Tests and CSS

  1. 1. Automated Testing & CSS Kevin Lamping, Rackspace Front-end Engineer @klamping
  2. 2. When I change the CSS
  3. 3. “Insanity: doing the same thing over and over again and expecting different results. ”
  4. 4. “Insanity: doing the same thing over and over again and enjoying it.”
  5. 5. “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
  6. 6. The Tools Wraith, Hardy, StyleDocco
  7. 7. Wraith
  8. 8. +
  9. 9. Installation $ curl -fsSL https://raw.github.com/bbc-news/wraith/ go/install | bash $ cd wraith $ bundle install
  10. 10. Demo
  11. 11. 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
  12. 12. Installation $ npm install -g hardy
  13. 13. Demo
  14. 14. Selector Maps selectors.js module.exports = { "standard paragraph": "section > p" }; test.feature Then "standard paragraph" should have "color" of "rgb(68, 68, 68)"
  15. 15. Selector Maps selectors.js module.exports = { "standard paragraph": "section > p" }; test.feature Then "standard paragraph" should have "color" of "rgb(68, 68, 68)"
  16. 16. CSS Testing Steps Then "section > p" should have "color" of "rgb(68, 68, 68)"
  17. 17. CSS Testing Steps Then <css selector> should have <property> of <value>
  18. 18. CSS Testing Steps Then <css selector> should have <property> of <greater|less> than <value>
  19. 19. CSS Testing Steps Then <css selector> should have offset <top or left> of <value>
  20. 20. CSS Testing Steps Then <css selector> should look the same as before
  21. 21. Demo
  22. 22. Basic Steps Given I visit "http://csste.st/"
  23. 23. Basic Steps Given the window size is <width> by <height>
  24. 24. Basic Steps Then I enter <string> into <css selector>
  25. 25. Basic Steps Then I submit the form <css selector>
  26. 26. Demo
  27. 27. Custom Steps
  28. 28. 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 "
  29. 29. StyleDocco
  30. 30. /* # 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> ``` */
  31. 31. Demo
  32. 32. StyleDocco - Recap • No login/scripting needed • Allows for pseudo-class testing • Content is (mostly) static • Not the actual site
  33. 33. Get Involved! http://csste.st Thanks!

×