Unable to take screenshot for specific item in protractor

Question

I want to take a snapshot of an element using a protractor, and the transporter supports element.takeScreeshot (). However, when I use it, you throw a Some session error (below)

 element(by.model('model.username')).takeScreenshot().then(ab=>{

)}

Error

**- Failed: GET /session/5d58e1ca-f55d-4b51-aee8-1d518498cb35/element/0/screenshot
  Build info: version: '3.4.0', revision: 'unknown', time: 'unknown'
  System info: host: 'INBEN10174', ip: '157.237.220.180', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_121'
  Driver info: driver.version: unknown**

Answer 1

You can take a screenshot of the entire page, and then crop the image to the desired element:

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

var elem = element(by.model('model.username'));

promise.all([
    elem.getLocation(),
    elem.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));
});

This will display the .png image of the selected item. As indicated below, you need to make sure that the item is on the screen before; which is achievable like this:

var elem = element(by.model('model.username'));
browser.actions().mouseMove(elem).perform();

Answer 2

@suresh-salloju, , 2.30 3.4.0 .

, protractor-image-comparison. saveElement checkElement . , .