使用量角器工具使用特定元素定位器捕获图像
Capture image using specific element locator using protractor tool
我对 Protractor 和 Javascript/Node.js 很陌生。
我有一个要求,我需要截取特定元素的屏幕截图并在茉莉花报告中显示相同的内容(请注意报告中的屏幕截图不应包含整个网页,它应该只包含网页元素的快照我们正试图在页面中找到。)
这是我在堆栈溢出中找到的示例代码。但我不能采取相同的方式,因为它需要整个页面的屏幕截图。
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 工作过相同的场景。但同样我无法使用量角器工具来完成。
请帮我举个例子。
提前致谢。
以下是从屏幕截图中裁剪徽标的示例:
const fs = require('fs');
const PNG = require('pngjs').PNG;
it("should crop logo", function() {
browser.get("http://whosebug.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));
});
});
我对 Protractor 和 Javascript/Node.js 很陌生。 我有一个要求,我需要截取特定元素的屏幕截图并在茉莉花报告中显示相同的内容(请注意报告中的屏幕截图不应包含整个网页,它应该只包含网页元素的快照我们正试图在页面中找到。)
这是我在堆栈溢出中找到的示例代码。但我不能采取相同的方式,因为它需要整个页面的屏幕截图。
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 工作过相同的场景。但同样我无法使用量角器工具来完成。
请帮我举个例子。
提前致谢。
以下是从屏幕截图中裁剪徽标的示例:
const fs = require('fs');
const PNG = require('pngjs').PNG;
it("should crop logo", function() {
browser.get("http://whosebug.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));
});
});