automated tests and css

Automated Testing& CSSKevin Lamping, RackspaceFront-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 tech debt.” @necolas

The ToolsWraith, 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 Testing•Need two sites with same content

Installation$ npm install -g hardy

Demo

Selector Mapsselectors.jsmodule.exports = { "standard paragraph": "section > p"};

test.featureThen "standard paragraph" should have "color" of "rgb(68, 68, 68)"

selectors.jsmodule.exports = { "standard paragraph": "section > p"};

test.featureThen "standard paragraph" should have "color" of "rgb(68, 68, 68)"

Selector Maps

CSS Testing StepsThen "section > p" should have "color" of "rgb(68, 68, 68)"

CSS Testing StepsThen <css selector> should have <property> of <value>

CSS Testing StepsThen <css selector> should have <property> of <greater|less> than <value>

CSS Testing StepsThen <css selector> should have offset <top or left> of <value>

CSS Testing StepsThen <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•More work to set up•Have to repeat CSS•Pay attention to ' and "

StyleDocco

/* # 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>``` */

Demo

StyleDocco - Recap

•No login/scripting needed•Allows for pseudo-class testing•Content is (mostly) static•Not the actual site

Get Involved!http://csste.st

Thanks!