CODEWITHSUNDEEP
javascriptangularjsseleniumprotractorwebdriverjs
user6162630
user6162630

Reputation: 81

Capture image using specific element locator using protractor tool

I am very new to Protractor and Javascript/Node.js. I had a requirement where i need to take the screenshot of particular element and show the same in the jasmine report(Please note that the screenshot present in the report should not contain the entire web page, it should only contain the snap of the web element we are trying to find in the page.)

Here is the sample code which i found in stack overflow. but i couldn't take the same because it takes the screenshot of entire page.

testpage.takesnap = function(elementLocator,screenshotName){

     var test1 = element(by.xpath(elementLocator)).getSize().then(function(size){
        element(by.xpath(elementLocator)).getLocation().then(function(location) {
             browser.takeScreenshot().then(function(data) {
                var base64Data = data.replace(/^data:image\/png;base64,/, "");  
                fs.writeFile(screenshotFilePath+screenshotName, base64Data, 'base64', function(err) {
                    if (err) {
                        console.log(err);
                    } 
                    else {

                        test.cropInFile(size, location, screenshotFilePath+screenshotName);

                    }
                    doneCallback();            
                ///////////////       
                });
             });
        });  
    });
    console.log('Completed taking screenshot');   

};

testpage.cropInFile = function(size, location, filePath) {

    easyimg.crop({
        src: filePath,
        dst: filePath,
        cropwidth: size.width,
        cropheight: size.height,
        x: location.x,
        y: location.y,
        gravity: 'North-West'

    },
    function(err, stdout, stderr) {
        if (err) throw err;
    });


};

i didn't get any error but still it takes the snap of entire webpage.

I couldn't understand. I have worked in java for the same scenarios. but for the same i couldn't do it using protractor tool.

Please help me with some example.

Thanks in Advance.

Upvotes: 5

Views: 1115

Answers (1)

Florent B.
Florent B.

Reputation: 42528

Here is an example to crop the logo from a screenshot: 

const fs = require('fs');
const PNG = require('pngjs').PNG;

it("should crop logo", function() {
    browser.get("http://stackoverflow.com/");

    var element = $("#hlogo");

    protractor.promise.all([
        element.getLocation(),
        element.getSize(),
        browser.takeScreenshot()
    ]).then(function(result) {
        var src = PNG.sync.read(Buffer.from(result[2], 'base64'));
        var dst = new PNG({width: result[1].width, height: result[1].height});
        PNG.bitblt(src, dst, result[0].x, result[0].y, dst.width, dst.height, 0, 0);
        fs.writeFileSync('out.png', PNG.sync.write(dst));
    });
});

Upvotes: 3

Related Questions