Question

在测试移动设备外形时，Chrome屏幕截图只是可见窗口。我很高兴这是标准和预期的行为。但是，我还想捕获页面的完整滚动高度，以便检查整个页面的呈现。

我认为最简单的解决方案是将镀铬窗口高度设置为足够大的值，并完成工作。但是，Chrome窗口高度似乎受我的物理屏幕高度限制，即。我用browser.manage().window().setSize(375,5000);将其设置为5,000，但它只调整到1200的高度。

我已经知道[根据WebDriver规范] [1]，[takeScreenshot()函数] [2] 不应该捕获整个页面，但应截取屏幕截图只有可见区域。

Answer 1

OP编辑：我选择了下面的最终选项，我已将其标记为＆＃34; 工作解决方案!! ＆＃34;

以下是按类型分类的不同解决问题的方法。

滚动，截屏，追加

Quoting CrossBrowserTesting.com截图系统的作者：

作为CrossBrowserTesting.com截图系统的作者，我可以告诉您，我们能够在浏览器中始终可靠地获取整页截图的唯一方法是滚动，捕获和追加图片。

以下是使用cnn.com作为示例目标滚动和拍摄可见区域屏幕截图的示例工作实现。使用scrollHeight，clientHeight和scrollTop来确定我们在垂直滚动位置的位置以及向下滚动的位置。由于我们在循环中处理promises，因此我们必须使用＆＃34创建递归函数;我们位于底部＆＃34;基本条件：

var fs = require('fs'),
    Utils = {
        screenShotDirectory: '',

        writeScreenShot: function (data, filename) {
            var stream = fs.createWriteStream(this.screenShotDirectory + filename);

            stream.write(new Buffer(data, 'base64'));
            stream.end();
        },

        getSizes: function () {
            return browser.executeScript("return {scrollHeight: document.body.scrollHeight, clientHeight: document.body.clientHeight, scrollTop: document.body.scrollTop};");
        },

        scrollToBottom: function (height, index) {
            var self = this;

            self.getSizes().then(function (data) {
                // continue only if we are not at the bottom of the page
                if (data.scrollTop + data.clientHeight < data.scrollHeight) {
                    browser.executeScript("window.scrollTo(0, arguments[0]);", height).then(function () {
                        browser.takeScreenshot().then(function (png) {
                            self.writeScreenShot(png, "test" + index + ".png");
                        });
                    });
                    self.scrollToBottom(height + data.clientHeight, index + 1);
                }
            });
        }
    };

describe("Scrolling and saving screenshots", function () {
    beforeEach(function () {
        browser.ignoreSynchronization = true;
        browser.get("http://www.cnn.com/");
    });

    it("should capture an entire page", function () {
        Utils.getSizes().then(function (data) {
            Utils.scrollToBottom(data.clientHeight * 2, 1);
        });
    });
});

它会生成多个test<index>.png图像，然后您可以粘合在一起。

要在＆＃34;单列图像中连接图像＆＃34;，您可以通过GraphicsMagick使用gm nodejs module图像处理系统。 .montage() method with the concatenate option in the 1x mode会有所帮助。示例代码：

var gm = require('gm');

Utils.getSizes().then(function (data) {
    var index = Utils.scrollToBottom(data.clientHeight * 2, 1);

    var op = gm();
    for (var i = 1; i <= index; i++) {
        op = op.in("test" + i + ".png");
    }

    op = op.montage().mode("concatenate").tile("1x");

    op.write('output.png', function (err) {
        if (err) console.log(err);
    });
});

更改浏览器

在Chrome中，您始终只能获得生成的屏幕截图中的可见区域，这是相关的chromedriver问题，其中包含大量有关该问题的信息和多种解决方法：

ChromeDriver2 take screenshot is not full page

有些令人惊讶的是，it should though work in Firefox - 如果可能的话切换到它：

占据整个屏幕的Chrome屏幕截图与Firefox不同。 Firefox将捕获整个屏幕，甚至是当前无法查看的部分屏幕。 Chrome不会！

调整屏幕尺寸

另一种选择是使用BrowserStack或SauceLabs等服务在特定浏览器的特定平台上开始测试，并使用特定的足够大的分辨率。量角器支持Sauce Labs和BrowserStack开箱即用。

BrowserStack的配置示例：

exports.config: {
  browserstackUser: "user",
  browserstackKey: "key",

  capabilities: {
    'browserstack.local': true,
    'browserstack.debug': true,

    browserName: "Chrome",
    os: "Windows",
    os_version: "8",
    resolution: "2048x1536"
  },
}

然后，最大化浏览器窗口（例如在onPrepare()内）：

browser.driver.manage().window().maximize();

制作截图。

工作解决方案!!!

另一种选择可能是在虚拟显示器中运行测试。我会关注this blogpost并使用Xvfb，当您运行Xvfb服务器时，您可以指定解决方案：

/usr/bin/Xvfb :99 -ac -screen 0 2048x6000x24 &

此处还可以参阅此主题的相关信息：

您也可以使用允许docker-selenium solution的to configure the screen size。

如何截取移动外形的完整高度？

1 个答案:

滚动，截屏，追加

更改浏览器

调整屏幕尺寸