无法截取量角器中特定元素的屏幕截图

Question

我想使用量角器拍摄元素的快照，量角器支持element.takeScreeshot()。但是当我使用它时，它会抛出一些会话错误(如下)

element(by.model('model.username')).takeScreenshot().then(ab=>{
)}

错误

**- Failed: GET /session/5d58e1ca-f55d-4b51-aee8-1d518498cb35/element/0/screenshot
Build info: version: '3.4.0', revision: 'unknown', time: 'unknown'
System info: host: 'INBEN10174', ip: '157.237.220.180', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_121'
Driver info: driver.version: unknown**

Answer 1

您可以截取整个页面，然后将图像裁剪为所需的元素：

const fs = require('fs');
const PNG = require('pngjs').PNG;
var elem = element(by.model('model.username'));
promise.all([
elem.getLocation(),
elem.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));
});

这将输出所选元素的.png图像。 如下所述，在此之前，您需要确保该元素在屏幕上;这是可以实现的，如下所示：

var elem = element(by.model('model.username'));
browser.actions().mouseMove(elem).perform();

Answer 2

正如 @suresh-salloju 所说，这是一项新功能，即使在我的 chromedriver 2.30 和 selenium 3.4.0 上也抛出了相同的答案。

如果您希望能够截取元素的屏幕截图，则可以使用量角器图像比较。saveElement或checkElement的方法可以帮助进行测试。仅确保在视口中滚动元素。