如何在量角器中截取整个页面的屏幕截图？答案

【问题标题】：How to take screenshot of entire page in Protractor?如何在量角器中截取整个页面的屏幕截图？
【发布时间】：2015-07-14 12:40:54
【问题描述】：

在Protractor API documentation 之后，应该有一种方法可以截取整个页面，而不仅仅是可见框架。事实上它应该是默认行为。

当takeScreenshot() 被调用时

browser.takeScreenshot().then(function (png) {
    // writing down image
});

然后在文件中保存选项 3。来自文档 - '当前帧的可见部分'。如何强制webdriver全屏截图？

【问题讨论】：

stackoverflow.com/a/31840790/2517622
文档说 Ptor 按顺序尝试每种方法，第一个起作用的就是它的作用。所以它不是故意只给你#3；它考虑过做 #1 和 #2，但它做不到。

标签： javascript angularjs selenium testing protractor

【解决方案1】：

这是一个 hack，但您可以将 onPrepare 中的浏览器高度设置为 2000 像素或其他一些高值：

browser.driver.manage().window().setSize(320, 2000);

【讨论】：

【解决方案2】：

chrome 有一个错误。 https://bugs.chromium.org/p/chromium/issues/detail?id=45209 https://bugs.chromium.org/p/chromedriver/issues/detail?id=294
更改浏览器高度(browser.driver.manage().window().setSize(320, 2000);) 后，Firefox 会截取整个页面，Chrome 不截取。

【讨论】：

【解决方案3】：

这与相应的浏览器驱动程序服务器有关。例如，如果您使用的是 chrome，则 chromedriver 服务器负责提供整个页面的屏幕截图。

它与 WebDriver 客户端库或量角器无关。

【讨论】：

【解决方案4】：

您可以使用以下代码进行完整截图：

browser.driver.manage().window().setSize(width, height);

您可以根据html页面调整宽度和高度。

【讨论】：

【解决方案5】：

我在这里使用 jasmine-reporters（一个节点包）。

在你的 conf 文件中编写代码。

onPrepare: function () {
jasmine.getEnv().addReporter({
            specDone: function (result) {
                if (result.status === 'failed') {
                    browser.getCapabilities().then(function (caps) {
                        var browserName = caps.get('browserName');
                        browser.takeScreenshot().then(function (png) {
                            var stream = fs.createWriteStream('screenshots/' + browserName + '-' + result.fullName + '.png');
                            stream.write(new Buffer(png, 'base64'));
                            stream.end();
                        });
                    });
                }
            }
        });
}

上面的代码在失败时截取屏幕截图，然后保存在一个名为 screenshots 的文件夹中，文件名为：-

浏览器名称-errorItBlockName.png

例子：-

it('user signup', function () {
// error here
}

截图名称：chrome-user signup.png

【讨论】：

【解决方案6】：

将以下代码添加到规范中。文件：

var fs = require('fs');

browser.takeScreenshot().then(function(png) {
  writeScreenShot(png, 'exception.png');
});

function writeScreenShot(data, filename) {
  var stream = fs.createWriteStream(filename);
  stream.write(new Buffer(data, 'base64'));
  stream.end();
}

这将截取页面的屏幕截图并将作为 exception.png 添加到项目文件夹中。

【讨论】：

这不会影响整个页面，除非您将窗口的宽度和高度设置得足够大。如果您使用的是 800 x 600，但页面需要滚动，则不会截取页面外的部分。
只从显示区域截屏