How to take particular element screenshot in protractor?

>> In protractor, we can also take particular web element screenshot using takeScreenshot().

>> In order to save the screenshot files, we will use fs module (File system module)

We can run below protractor script to take the screenshot of particular element:

describe('Protractor - takeScreenshot()', function () {
    it('Code script to use takeScreenshot() in protractor', function () {
        browser.get("https://keeplearners.blogspot.com/2018/03/Angular-elements.html");

        var textField = element(by.model('name'));
        textField.sendKeys("Entered sample text");

        textField.takeScreenshot().then((png) => {
            writeScreenShot(png, '.\\screenshots\\element.png');
        });
    });

    function writeScreenShot(data, filename) {
        var fs = require('fs');
        //create stream for writing the image
        var stream = fs.createWriteStream(filename);
        //write stream to local file as a base 64 encoded png
        stream.write(new Buffer(data, 'base64'));
        stream.end();
    }
});

>> To take particular web element screenshot, we have declared a web element textField. By using this locator we can take only text field screenshot

Output:

It will take a particular web element screenshot like below:

Please comment below to feedback or ask questions.