CSS regression testing

View Github Repository Open presentation in a new window

sergesemashko

See all presentation from sergesemashko

CSS regression testing

0 0

css-regression-slides

"CSS Regression testing" slides for QueensJS meetup (August 2015)

On Github sergesemashko / css-regression-slides

CSS regression testing

Presented by Sergey Semashko

CSS is easy to change...

... and hard to test

Approaches to test CSS

Syntax checks Styleguides & linting Comparing screenshots 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

  • 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

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

There is no "silver bullet", yet.

THE END

CSS regression testing Presented by Sergey Semashko