Automate CSS regression testing with PhantomCSS
Alt Runner Settings
To enable the alternate task runner set
alt-runner=true in the PhantomCSS grunt task options
Grunt automatically envokes
casper.start() when it begins, so all test files need to start with
This is a fork of the original (presumably discontinued) repository of grunt-phantomcss. Currently this version here is untagged and unreleased on npm. However, you can install and use this version:
Add this to your
or, alternatively, type this into your command line interface:
npm i --save-dev git://github.com/micahgodbolt/grunt-phantomcss.git
This plugin requires Grunt
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-phantomcss --save-dev
The "phantomcss" task
In your project's Gruntfile, add a section named
phantomcss to the data object passed into
The test files to run.
Toleranz of errors that is allowed in a screenshot (for instance to match anti-aliasing bugs).
The screenshots directory where test fixtures (comparison screenshots) are stored. Baseline screenshots will be stored here on the first run if they're not present.
The directory to store source, diff, and failure screenshots after tests.
The viewport size to test the site in
[width, height] format. Useful when testing responsive layouts.
The CasperJS log level. See CasperJS: Logging for details.
Basic visual tests
Run tests in
test/visual/ against comparison screenshots stored in
test/visual/screenshots/, and put the resulting screenshots in
Responsive layout testing
Run tests in
test/visual/ against comparison screenshots for destop and mobile.
Sample test file
Test files should do the following:
- Start CasperJS with the URL you want to test
- Manipulate the page in some way
- Take screenshots
You can also load a local file by specifying a path (relative to the Gruntfile):
Multiple Test Files
Your first test file should use
Subsequent files should call
casper.then to continue the previous test.
You can also use
casper.thenOpen to load a new url and continue testing in subsequent files instead of
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.