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

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

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

我已经知道[根据WebDriver规范] [1],[ takeScreenshot()function] [2] 不应该捕获整个页面,但应该只显示可见区域的屏幕截图.

OP EDIT:我选择了下面的最终选项,我将其标记为" Working solution !! "

以下是按类型分类的不同解决方案.

滚动,截屏,追加

在CrossBrowserTesting.com上引用屏幕截图系统的作者:

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

以下是使用cnn.com作为示例目标滚动和拍摄可见区域屏幕截图的示例工作实现.使用scrollHeight,clientHeight并scrollTop确定在何处,我们都在一个垂直滚动位置以及如何更向下滚动.由于我们在循环中处理promise,我们必须使用"我们处于底层"基本条件来创建递归函数:

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.png图像,然后您可以将它们粘合在一起.

例如,要在"单列图像"中连接图像,可以GraphicsMagick通过gmnodejs模块使用图像处理系统.在模式中使用选项的.montage()方法 会很有帮助.示例代码:concatenate1x

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截屏不是整页

有些令人惊讶的是,它应该在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();

并制作截图.

工作方案!!!

另一种选择可能是在虚拟显示器中运行测试.我会按照这个博文并使用Xvfb,当你运行Xvfb服务器时,你可以指定分辨率:

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

另请参阅此处的相关信息:

使用量角器和硒的AngularJS无头端对端测试

用量角器运行什么是好的无头浏览器？

您也可以使用允许配置屏幕大小的docker-selenium解决方案.