CSS regression testing

Presented by Sergey Semashko

CSS is easy to change...

... and hard to test

Approaches to test CSS

1. Syntax checks
2. Styleguides & linting
3. Comparing screenshots
4. Comparing styles in DOM

Syntax checks

Styleguides & linting

@import "other.css";
div {
    padding: 0px 10px;
}
                        

• Prevents anti-patterns
• Easy to apply
• Doesn't test end result
• Useless without good linting rules

Comparing Screenshots

Tools

• BEM/Gemini (Yandex)
• Wraith (BBC)
• Huxley (Facebook)
• PhantomCSS
• BackstopJS

• No changes can sneak by
• Content-fragile

Comparing styles in DOM

  window.getComputedStyle();
                    

Hardy / Cucumber

Scenario: Standard paragraph color
  Given I visit "http://local.gemini.com/about.html"
  Then ".container > p" should have
    "color" of "rgb(64, 64, 64)"
                    

Tools

• Hardy
• Quixote
• CSSunit
• Needle (Compares DOM snapshots)

• Resilient to changes
• Reduces unintended consequences
• Writing expectations in code
• Style rules != look
• Structure-fragile

There is no "silver bullet",
yet.

THE END