使用量角器工具使用特定元素定位器捕获图像

Question

我对量角器和Javascript / Node.js非常陌生。我有一个要求，我需要获取特定元素的屏幕截图并在茉莉花报告中显示相同的图片（请注意，报告中显示的屏幕截图不应包含整个网页，而应仅包含Web元素的快照我们正在尝试在页面中查找。）

这是我在堆栈溢出中找到的示例代码。但我不能接受相同的内容，因为它需要整个页面的屏幕截图。

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;
    });


};

我没有收到任何错误，但仍然需要整个网页的快照。

我听不懂 我曾在Java中使用过相同的场景。但同样，我无法使用量角器工具来做到这一点。

请帮我举个例子。

提前致谢。

Answer 1

以下是从屏幕截图中裁剪徽标的示例：

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));
    });
});