Automated Testing & CSS

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.

6823d6d1ee14bd068007bd60ddb6a41a?s=128

Kevin Lamping

October 21, 2013
Tweet

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.”
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  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

  14. None
  15. +

  16. None
  17. None
  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
  21. None
  22. None
  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!