5

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.

user6162630
  • 81
  • 8

1 Answers1

3

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));
    });
});
Florent B.
  • 41,537
  • 7
  • 86
  • 101
  • Hi Florent, even after using the above method i am getting the below error.Failed: base64 is not a function Stack: TypeError: base64 is not a function at Function.from (native) at Function.from (native) – user6162630 Jul 11 '16 at 17:37
  • 1
    Which version of Node.js are you using? `Buffer.from('...', 'base64')` is available since v5.x. It could also be an issue with the reference of `Buffer`. Try with your own: `var Buffer = require('buffer').Buffer;`. – Florent B. Jul 11 '16 at 17:56
  • even after installing/ adding teh varible i am getting the same error.Please help me to resolve this. thanks in advance. – user6162630 Jul 11 '16 at 21:08
  • Yes..i got it now. Here is what i have done.. var src = PNG.sync.read(new Buffer(result[2], 'base64')); I really thank Florent in helping me to resolve this. upvoting.. – user6162630 Jul 11 '16 at 21:31