grunt-regress
v0.1.2
Published
CSS regression Testing Plugin
Downloads
2
Readme
grunt-regress
CSS regression Testing Plugin based on PhantomJS 2
Getting Started
This plugin requires Grunt ~0.4.5
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-regress --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-regress');
The "regress" task
Overview
In your project's Gruntfile, add a section named regress
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
regress: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
options: {
viewports: [
{
"name": "phone",
"width": 320,
"height": 480
},..
]
},
scenarios: [
{
"label": "getbootstrap.com",
"url": "http://getbootstrap.com"
}, ...
]
},
},
});
Usage Examples
Default Options
In this example, we test the responsiveness of the bootstrap page
grunt.initConfig({
regress: {
options: {
// Task-specific options go here.
dest: 'css_regression'
},
your_target: {
// Target-specific file lists and/or options go here.
options: {
viewports: [
{
"name": "phone",
"width": 320,
"height": 480
}, {
"name": "tablet_v",
"width": 568,
"height": 1024
}, {
"name": "tablet_h",
"width": 1024,
"height": 768
}
]
},
scenarios: [
{
"label": "getbootstrap.com",
"url": "http://getbootstrap.com"
}, ...
]
},
},
});
To generated the reference screens just execute the task grunt regress:your_target:generate
Options
options.dest
Type: String
The destination path where the generated test file will go.
options.viewports
Type: Array
An Array with all the Viewport definition. the properties width, height and name are required.
scenarios
Type: Array
An Array of all the Scenario Objects you want to test. These Objects must have the label and url properties.
scenario.crop
Type: boolean
Default: false
Crop to the set height.
scenario.delay
Type: number
(seconds)
Default: 0
Delay capturing the screenshot. Useful when the site does things after load that you want to capture.
scenario.selector
Type: string
Capture a specific DOM element.
scenario.hide
Type: array
Hide an array of DOM elements.
scenario.headers
Type: object
Default: {}
Set custom headers.
scenario.cookies
Type: array
or object
A string with the same format as a browser cookie or an object of what phantomjs.addCookie
accepts.
scenario.username
Type: string
Username for authenticating with HTTP auth.
scenario.password
Type: string
Password for authenticating with HTTP auth.
scenario.format
Type: string
Default: png
Set format to render the image as. Supported formats are png
and jpg
.
scenario.scale
Type: number
Default: 1
Scale webpage n
times.
scenario.userAgent
Type: string
Set a custom user agent.
Thanks
Many thanks to:
- The PhamtomJS Team
- sindresorhus for his work on the phantom-bridge
- kevva for his work on screenshot-stream
And to all the community You guys are awesome :)
License
MIT