grunt-qunit-kimchi

Grunt QUnit Plugin with Screenshot Support and Style Regression Test.

| Circle CI | | --------- | | |

Getting Started

This plugin requires Grunt >= 0.4.0

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.

Install

$ npm install --save-dev grunt-qunit-kimchi

Usage

// Load the task
grunt.loadNpmTasks('grunt-phantomjs-basil');

// Configure
grunt.initConfig({
  qunit: {
    options: {
      urls: [
       'http://localhost:4100'
      ],
      screenshotOnFail: true,
      viewportSize: {
       width: 1100,
       height: 768
      },
      screenshotPath: '.tmp/screenshots',
      originalScreenshotPath: '.tmp/original_screenshots',
      diffScreenshotPath: '.tmp/diff_screenshots',
      errorDiffPath: '.tmp/screenshots/error',
      resemble: {
       errorType: 'movement'
      }
    }
  }
});

Qunit Task

Running task: grunt qunit

Options

• urls
• timeout
• viewportSize
• screenshotPath
• originalScreenshotPath
• diffScreenshotPath
• resemble
• inject
• consoleOutput
• screenshotOnFail
• httpBase
• force
• --PhantomJS arguments

urls

Type: Array Default: []

timeout

Type: Integer Default: 5000

viewportSize

Type: Object Default: phantomjs default

Overrides default viewport size of phantomjs (width: 320px) Example:

viewportSize: {
  width: 1100,
  height: 768
}

screenshotPath

Type: String Default: "screenshots"

Path where screenshots are saved within the root folder of the project

originalScreenshotPath

Type: String Default: "original_screenshots"

Path where original screenshots are stored within the root folder of the project to compare with the screenshots under screenshotPath

diffScreenshotPath

Type: String Default: "diff_screenshots"

Path where diff screenshots generated with resemble.js are saved within the root folder of the project

resemble

Type: Boolean or Object Default: false

Uses resemble.js for screenshot image analysis and comparison https://huddle.github.io/Resemble.js/

Example:

resemble: {
  errorColor: {
    red: 255,
    green: 0,
    blue: 255
  },
  errorType: 'movement' || 'flat',
  transparent: 1.0
}

inject

Type: String Default: (built in)

Path to alternate QUnit bridge to phantomjs. Default built in bridge script: bridge.js

consoleOutput

Type: Boolean Default: false

screenshotOnFail

Type: Boolean Default: false

httpBase

Type: String Default: false

Create URLs for the src files, all src files are prefixed with that base.

force

Type: Boolean Default: false

--PhantomJS arguments

Type: String Example:

options: {
  '--config': '/path/to/config.json'
  '--ssl-protocol': 'sslv3'
}

Usage Examples

TODO

Release History

v0.0.1 Initial Release