5

我对 Protractor 和 Javascript/Node.js 非常陌生。我有一个要求，我需要截取特定元素的屏幕截图并在 jasmine 报告中显示相同的内容（请注意，报告中的屏幕截图不应包含整个网页，它应该只包含 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 中为相同的场景工作过。但同样，我不能使用量角器工具来做到这一点。

请帮我举个例子。

提前致谢。

4

1 回答 1

3

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

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));
    });
});
于 2016-07-11T15:43:39.143 回答