CSS Testing
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:
- Visualise a component in all states (outside of the app)
- Can also be used to interact with a component
- Examples:
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?