javascript - 使用 Protractor 工具使用特定元素定位器捕获图像

Question

我对 Protractor 和 Javascript/Node.js 还很陌生。我有一个要求，我需要截取特定元素的屏幕截图并在 Jasmine 报告中显示相同的内容(请注意报告中的屏幕截图不应包含整个网页，它应该只包含网页元素的快照我们正试图在页面中找到。)

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

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 中为相同的场景工作过。但同样我无法使用 Protractor 工具来完成。

请帮我举个例子。

提前致谢。

Answer 1

以下是从屏幕截图中裁剪 Logo 的示例:

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