Take a screenshot of a DOM element.


Take a screenshot of a DOM element.

This plugin requires Grunt ~0.4.1

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-screenshot-element --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:


In your project's Gruntfile, add a section named screenshot-element to the data object passed into grunt.initConfig().

  screenshot-element: {
    options: {
      // Task-specific options go here. 
    your_target: {
      // Target-specific options and images list go here. 

The options are by priority, from the less specific to the most precise, e.g: options < your_target.options < your_target.files[n].options

Type: String Default value: 'svg

The selector of the element you want to screenshot (NB: The element is selected with document.querySelector which mean that only the first one will be selected.)

Type: Object Default value: { width: 1024, height: 768 }

An object with two keys, width and height, it will set the viewport of the page.

Type: String Default value: none

Add CSS to the page before taking a screenshot.

Type: String Default value: none

Add JavaScript to the page before taking a screenshot.

Type: String Default value: none

The URL of the page you want to screenshot.

Type: String Default value: ``

The output of the screenshot.

Type: Number Default value: 4

The number of milliseconds when after which the screenshot will be taken.

Type: Number Default: Number of CPU cores (require('os').cpus().length) with a minimum of 2

Limit of how many PhantomJS instances to run concurrently.


The contents parameter can be a string that will be evaluated, it's necessary if you want to use the phantom object.


images are set for each targets, they are an array of objects, you can re-specify options for each image.

This example will create a screenshot of the #hplogo on and will save it to images/google.png. The viewport of the browser will be of 1024 by 768.

    'screenshot-element': {
        options: {
            selector: '#main'
          , viewport: {
                width: 1024
              , height: 768
      , chart: {
            options: {
                selector: '.chart'
              , css: 'body { background: red; }'
              , js: '$("#button").click()'
          , images: [
                    url: ''
                  , file: 'images/google.png'
                  , selector: '#hplogo'

In lieu of a formal styleguide, take care to maintain the existing coding style.

  • 2014-04-11 v0.1.9 Added limit option
  • 2013-12-05 v0.1.7 Add paperSize & settings options (the native one) & make images optional
  • 2013-11-28 v0.1.6 Put lodash in dependencies
  • 2013-11-25 v0.1.5 Debug viewport and remove grunt.util._
  • 2013-10-28 v0.1.4 Added js option to add JavaScript to the page
  • 2013-08-19 v0.1.3 Fixes selector option
  • 2013-08-19 v0.1.2 Added timeout option
  • 2013-08-19 v0.1.1 Fixes package.json
  • 2013-07-26 v0.1.0 First release