CSS Testing

By Justin Wark

Testing CSS

Why?

  • Media Queries multiply combinations to visually test/inspect.
  • Wanted to be able to refactor/restructure CSS without breakage.

Testing CSS

Real world example:

Collapsed areaStatusChart on iPhone, portrait/landscape behaviour, font sizes on pages/components, etc

Testing CSS

Component demo pages:

Testing CSS

Triggering media queries:

  • Visualise different layouts on the one page
  • Uses iframes
  • Example

Automated Tests for CSS

Requirements:

  • Isolate test failures to the individual component/state which is affected
  • MUST run on CI
  • Needs to run relatively fast (locally at least)
  • Easy to use for local development

Automated Tests for CSS

Existing tools:

  • CasperJS
    • based on PhantomJS (fast, headless, CI scriptable)
    • a whole other testing framework
    • does capture images (whole page or selector), but DOES NOT do comparisons
  • CSS Critic
    • very visual web based tool; save, accept/reject captured images
    • a whole other testing framework
    • saves capture images in browser localstorage, so NOT useful for CI

Automated Tests for CSS

DEMO TIME!


	$ grunt test:css:demo:auth*dialog
	$ grunt test:css:compare:auth*dialog

	// to run all
	$ grunt test:css

	$ grunt test:css:accept-images

Automated Tests for CSS

Prototype:

  • resizes browser window to trigger media queries
  • Runs up new phantomjs process to get screenshot
  • Image capture uses PhantomJS
  • Currently taking 1min 30sec to do 90 tests (1 sec/test)
  • Image compare uses ImageMagick, could use HTML5 canvas
  • Could capture images with PhantomJS and compare using Jasmine?
  • Could screenshot components, rather than whole page?

Automated Tests for CSS

Limitations:

  • Must run on same O/S currently
    • Font antialiasing (-webkit-font-smoothing: none;)
    • scroll bars
  • Could be solved by using Vagrant?

THE END

twitter: @justinwark

 

slides:

http://jwark.github.io/css-testing-presentation

 

check out: