Capture Bild mit spezifischen Element Locator mit Winkelmesser

Question

Ich bin sehr neu zu Protractor und Javascript/Node.js. Ich hatte eine Anforderung, wo ich den Screenshot eines bestimmten Elements erstellen und dasselbe im Jasmin-Bericht anzeigen muss (Bitte beachten Sie, dass der im Bericht enthaltene Screenshot nicht die gesamte Webseite enthalten sollte, sondern nur den Snap des Webs Element, das wir auf der Seite zu finden versuchen.)

Hier ist der Beispielcode, den ich im Stapelüberlauf gefunden habe. aber ich konnte nicht das selbe nehmen, weil es den Screenshot der ganzen Seite nimmt.

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


}; 

ich keine Fehler bekommen haben, aber immer noch nimmt es die Schnippen gesamte Webseite.

konnte ich nicht verstehen. Ich habe in Java für die gleichen Szenarien gearbeitet. aber für das gleiche konnte ich es nicht mit Winkelmesser Werkzeug machen.

Bitte helfen Sie mir mit einem Beispiel.

Vielen Dank im Voraus.

Answer 1

Hier ist ein Beispiel, das Logo von einem Screenshot zu beschneiden:

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