Wd Screenshot

Alternatives To Wd Screenshot
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Html2canvas28,8611,7322,1802 days ago42January 22, 2022947mitTypeScript
Screenshots with JavaScript
Karma Nightmare5352193 years ago38March 25, 201818JavaScript
⚡ A Karma plugin. Launcher for Nightmare
Leaflet Simple Map Screenshoter49
10 months ago15mitJavaScript
Leaflet plugin which take screenshot of map
Screenshot Tweet44
25 years ago8September 26, 20183mitJavaScript
Screenshot a Twitter tweet.
React Native Waterflow List16
3 years ago9March 23, 20211mitTypeScript
6 years ago5November 24, 2017mitJavaScript
A Storybook CSS regression utility based on headless Chrome.
Wd Screenshot4
8 years ago1mitJavaScript
Puppeteer Screenshot3
5 years ago1JavaScript
A screenshot tool with puppeteer
7 years ago2mitJavaScript
js client for spectre
7 years ago2mitCoffeeScript
Screenshot console output
Alternatives To Wd Screenshot
Select To Compare

Alternative Project Comparisons


Build Status Dependency Status


Provides methods that adds image comparison using gm node library, a GraphicsMagick wrapper.

Also provides wd.js methods that can be used when testing using selenium.


npm install wd-screenshot



Retuns an object that has the following functions:

  • compareScreenshot()
  • compareScreenshotFolders()
  • addFunctions() that adds wd custom methods


  • Q: a promise library. Will require(Q) if not provided (might fail if Q not installed)
  • gmSubclass: Allow to to use imageMagick instead of GraphickMagic. ImageMagick needs to be installed if you want to use this option.

Main functions

compareScreenshot(pathToImage1, pathToImage2, options)

Compares 2 images and returns a promise that is rejected if the 2 images are not equal (= below the tolerance), or fulfilled when they are equal.

compareScreenshot(pathToReferenceImage, pathToTestImage, options)
    function(equality) { // fulfilled
      // equality is a number between 0 and 1, 0 means images are equal
      // ...
    function(error) {  // rejected
      // error is an Error object with a descriptive message

compareScreenshotFolders(pathToReferenceFolder, pathToTestFolder, options)

Compares all the images found in the test folder with the corresponding image in the reference folder, and returns a promise that is rejected if the one image or more are not equal, or fulfilled when they are all equal.

compareScreenshotFolders(pathToReferenceFolder, pathToTestFolder, options)
    function(equalities) {...}, // fulfilled. equalities is an array of equality numbers (number between 0 and 1)
    function(errors) {          // rejected
      // errors is an array that contains equality numbers or errors


// basic usage
var wdScreenshot = require('wd-screenshot')();
wdScreenshot.compareScreenshot('path/to/image1.png', 'path/to/image2.png')
  // returns a promise
    // success
    function(equality) {
      // equality is a number between 0 and 1, 0 meaning the images are equal
    // error
    function(error) {
      // error is a JS error containing an explanatory message

wdScreenshot.compareScreenshotFolders('path/to/referenceFolder', 'path/to/testedImageFolder')
  // returns a promise that is rejected if any of the image is not "equal" to the reference image
    // success
    function(equalities) {
      // equalities is an array of numbers between 0 and 1, 0 meaning the images are equal
    // error
    function(errors) {
      // errors is an array of JS errors, each error containing an explanatory error message

/* more advanced usage

var Q = require('Q');
// or use this if you have wd installed
// var wd = require('wd'), Q = wd.Q;

var wdScreenshot2 = require('wd-screenshot')({
  // Q: a promise lib. if not provided, wd-screenshot will try to require 'Q', then 'wd' and get `wd.Q`.
  // If nothing is found, it throws an error
  Q: Q,
  // tolerance: a number between 0 and 1, 0 = should be perfectly equal
  tolerance: 0.01,
  // saveDiffImagePath: a path where diff image will be saved by default (diff images are not saved by default)
  // can be overwritten when using `compareScreenshot` with compareOptions (`file` key)
  // when comparing folder, the diff image name will be the compared image name
  saveDiffImagePath: 'path/to/diff-folder/'
  // highlightColor: a gm color that is used to create the diff image. it can be an hex value too
  highlightColor: 'magenta',
  // highlightStyle: one of 'Assign', 'Threshold', 'Tint', or 'XOR'
  // more info at http://www.graphicsmagick.org/GraphicsMagick.html#details-highlight-style
  highlightStyle: 'XOR'

  // you can overwrites any options passed at initialization time
    // example of overwriting an option:
     highlightStyle: 'Tint',
    // file: a file path where the diff image will be saved
    // overwrites saveDiffImagePath global option
    file: 'path/to/diffImage.png'
).fail(function(error) { console.log('images are not equal', error)});

check this example and this other example.

wd.js Methods


var wd = require('wd'),
    wdScreenshot = require('wd-screenshot')({/*wd-screenshot options*/});

// this is where the magic happens

compareScreenshot and compareScreenshotFolders

browser.init({browserName: 'firefox'})
  //... do some stuff.. like calling takeScreenshot()
  .compareScreenshot('reference.png', 'test.png')
  .compareScreenshotFolders(path.join(__dirname, './references'), path.join(__dirname, './screenshots'), {tolerance: 0.01})

  .fin(function() { return browser.quit(); })


Helper wd function that takes a list of urls and save a screenshot when the url is loaded. Not really helpful with single page apps though...

browser.saveScreenshots([ { url: 'http://domain.com/page-1', name: 'page-1'},
                          {url: 'http://domain.com/page-2', name: 'page-2'}], './screenshots')


// filePath is optional. allows to save the tested image
  .compareWithReferenceScreenshot(imageRefPath, compareConfig, filePath)


Save multiple regions of the browser window when visiting a page.

cropOptions is an array that should contain object with the following properties:

  • name: the name of the cropped region, used to save the file (using name + '.png'). required
  • with, height: the image and height of the cropped region. required
  • x, y: the coordinate where the cropping starts (optional). They default to 0. x needs to be less than window width and y less than window height.

Note that there is no garanty that the cropped image will have a size widthx`height. For example, if x < width but x + width > windowWidth, then final width will be windowWidth - x.

  .saveCroppedScreenshots([ { name: 'topleft', x: 0, y: 0, width: 100, height: 100},
                            { name: 'under', x: 100, y: 0, width: 100, height: 100}
    ], './test/wd/screenshots/');


I strongly recommend that you write a wd.js script that saves the original screenshot (wd saveScreenshots() from this library might help). This will saves you a lot of time when refactoring/redesigning your site. See an example here.

The added saveScreenshots wd method can help you with that.

For more complex usecases, you can of course also use the native wd saveScreenshot(savePath) method.

Thank you!

I would like to thank radialpoint for organizing hackatons during office hours that allowed me to start working on this library.

Change Log


added saveCroppedScreenshots(cropOptions, savePath)

Popular Promise Projects
Popular Screenshot Projects
Popular Control Flow Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.