.takeElementScreenshot() Suggest edits

Since: 2.0.0

Take a screenshot of the visible region encompassed by this element's bounding rectangle.

Usage

.takeElementScreenshot(selector, callback)
.takeElementScreenshot(using, selector, callback)

Parameters

Name Type description
using
Optional		 string

The locator strategy to use. See W3C Webdriver - locator strategies
selector string

The CSS/Xpath selector used to locate the element.
callback function

Callback function which is called with the result value.

Returns

Type description
string Take a screenshot of the visible region encompassed by this element's bounding rectangle.

Example

module.exports = {
  demoTest(browser) {
    browser.takeElementScreenshot('#main', function (imageData, err) {
      require('fs').writeFile('out.png', imageData.value, 'base64', function (err) {
        console.log(err);
      });
    });

    // with explicit locate strategy
    browser.takeElementScreenshot('css selector', '#main', function(imageData, err) {
      require('fs').writeFile('out.png', imageData.value, 'base64', function (err) {
        console.log(err);
      });
    });

    // with selector object - see https://nightwatchjs.org/guide#element-properties
    browser.takeElementScreenshot({
      selector: '#main ul li a',
      index: 1
    }, function(imageData, err) {
      require('fs').writeFile('out.png', imageData.value, 'base64', function (err) {
        console.log(err);
      });
    });
  },

  demoTestAsync: async function(browser) {
    const data = await browser.takeElementScreenshot('#main');
    require('fs').writeFile('out.png', data, 'base64');
  }
}

W3C WebDriver spec