wdio-screenshot

A WebdriverIO plugin. Additional commands for taking screenshots with WebdriverIO.

Browser Support

• Firefox
• Chrome
• Internet Explorer
• Safari
• iOS^{1 2}

Installation

Install wdio-screenshot via NPM as usual:

$ npm install wdio-screenshot --save-dev

Instructions on how to install WebdriverIO can be found here.

Note: If you want to improve performance, you can install GraphicsMagick.

Configuration

Setup wdio-screenshot by adding a wdio-screenshot key to the plugins section of your WebdriverIO config.

// wdio.conf.js
exports.config = {
  // ...
  plugins: {
    'wdio-screenshot': {}
  },
  // ...
};

Usage

wdio-screenshot enhances an WebdriverIO instance with the following commands:

• browser.saveViewportScreenshot([fileName], [{options}]);
• browser.saveDocumentScreenshot([fileName], [{options}]);
• browser.saveElementScreenshot([fileName], elementSelector, [{options}]);

The following options are available:

• exclude String[]|Object[] (not yet implemented)
  exclude frequently changing parts of your screenshot, you can either pass all kinds of different WebdriverIO selector strategies that queries one or multiple elements or you can define x and y values which stretch a rectangle or polygon

• hide String[]
  hides all elements queried by all kinds of different WebdriverIO selector strategies (via opacity: 0)

• remove String[]
  removes all elements queried by all kinds of different WebdriverIO selector strategies (via display: none)

• invis String[]
  set invisibility for all elements queried by all kinds of different WebdriverIO selector strategies (via visibility: none)

• scrollTarget String
  scroll specific element instead of a whole page

• scrollPauseTime Number
  pause time after every part of screenshot are taken (default 100)

• useScrollTo Boolean
  tries to use real scrolling for vertical movement (default false)

• beforeSnapshot Function (browser, options, x, y, indexX, indexY)
  executed before a page screenshot or it's part are taken (default null)

• afterSnapshot Function (browser, options, x, y, indexX, indexY)
  executed after a page screenshot or it's part are taken (default null)

• stepModWidth Number
  modify how fast and far screen moves in horizontal direction after every snapshot taken (default 1.0 - 100% of the current viewport)

• stepModHeight Number
  modify how fast and far screen moves in vertical direction after every snapshot taken (default 1.0 - 100% of the current viewport)

• scrollbarsHideForElem String
  specifies the element which need to hide his scrollbars (default - html)

• shiftAreaBy Number[left, top, right, bottom]
  define how much extra space (in px) should be captured around the element (default - [0px,0px,0px,0px])

• scrollWidth Number
  override the final screenshot width (px) for the scrollTarget element (default null)

• scrollHeight Number
  override the final screenshot height (px) for the scrollTarget element (default null)

Use GraphicsMagick

wdio-screenshot uses GraphicsMagick for image processing when available. Without GraphicsMagick installed, wdio-screenshot fallbacks to Jimp - a image processing library written in JS.

If you want to install GraphicsMagick, follow the instructions below.

Mac OS X using Homebrew

$ brew install graphicsmagick

Ubuntu using apt-get

$ sudo apt-get install graphicsmagick

Windows

Download and install executables for GraphicsMagick. Please make sure you install the right binaries desired for your system (32bit vs 64bit).

License

MIT

---

¹ Scaling of iOS Simulator has to be 100% for properly recorded screenshots (see here)

² iOS scales the zoom level to fit the website into the viewport when the width of your page is bigger than the viewport. Capturing screenshots of such scaled websites with iOS is experimental and error-prone. If you notice any errors, adjust your viewport settings in your meta tag to disable scaling with <meta name="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">