Take a screenshot of an element in all browsers by cropping a page screenshot

protractor-element-screenshot.js

// Altered from http://stackoverflow.com/a/38311061/3150057
const fs = require('fs');
const sharp = require('sharp');
const takeElementScreenshot = function (element, name) {
    return protractor.promise
        .all([
            element.getLocation(),
            element.getSize(),
            browser.takeScreenshot()
        ])
        .then(([coords, size, pngData]) => {
            return sharp(new Buffer(pngData, 'base64'))
                .extract({
                    left: coords.x,
                    top: coords.y,
                    width: size.width,
                    height: size.height
                })
                .toBuffer()
                .then((croppedPng) => fs.writeFileSync(`${name}.png`, croppedPng);
        });
};