如何截取移动设备外形的全高? [英] How can I screenshot the full height of a mobile form factor?
问题描述
在测试移动设备外形尺寸时，Chrome 只截取可见窗口.我认为这是标准和预期的行为.但是，我还想捕获页面的完整滚动高度，以便我可以检查整个页面的呈现.
When testing mobile form factors, Chrome screenshots just the visible window. I'm fine with that being the standard and expected behaviour. However, I additionally want to capture the full scrolled height of the page so I can inspect the rendering of the entire page.
我认为最简单的解决方案是将 chrome 窗口高度设置为足够大的值，然后工作就完成了.但是，Chrome 窗口高度似乎受我的物理屏幕高度限制，即.我用 browser.manage().window().setSize(375,5000); 将它设置为 5,000，但它只调整到 1,200 的高度.
I thought the simplest solution was to set the chrome window height to be a sufficiently large value, and job done. However, the Chrome window height seems bound by my physical screen height, ie. I set it to 5,000 with browser.manage().window().setSize(375,5000);, but it only resizes to a height of 1,200.
我已经知道[根据 WebDriver 规范][1]，[takeScreenshot() 函数][2] 不应该捕获整个页面，但应该只对可见区域进行截图.
I already know [According to the WebDriver specification][1], the [takeScreenshot() function][2] is not supposed to capture the entire page, but should make a screenshot of the visible area only.
推荐答案
OP 编辑:我选择了最后一个选项，在该选项下面我标记了工作解决方案！！"；
OP I went with the final option below which I've labelled "Working solution!!"
以下是按类型分组的不同解决问题的策略.
Below are the different grouped by type strategies to solve the problem.
引用截图系统的作者在 CrossBrowserTesting.com 上:
Quoting the author of the screenshot system at the CrossBrowserTesting.com:
作为 CrossBrowserTesting.com 屏幕截图系统的作者，我可以告诉您，我们能够跨浏览器一致且可靠地获取整页屏幕截图的唯一方法是滚动、捕获和附加图像.
As the author of the screenshot system for CrossBrowserTesting.com, I can tell you that the only way we've been able to get full page screenshots consistently and reliably across browsers is to scroll, capture, and append images.
以下是使用 cnn.com 作为示例目标的滚动和获取可见区域屏幕截图的示例工作实现.使用 scrollHeight，clientHeight 和 scrollTop 确定在哪里我们处于垂直滚动位置以及向下滚动多少.由于我们在循环中处理 promise，因此我们必须创建一个带有we are at the bottom"的递归函数.基本条件:
Here is a sample working implementation of scrolling and taking visible area screenshots using cnn.com as an example target. Using scrollHeight, clientHeight and scrollTop to determine where we are on a vertical scroll position and how much more to scroll down. Since we are dealing with promises in a loop, we have to make a recursive function with a "we are at the bottom" base condition:
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 图像，然后您可以将这些图像粘合在一起.
It would produce multiple test<index>.png images that you can then glue together.
要在单列图像"中连接图像，例如，您可以使用 GraphicsMagick 图像处理系统通过gm nodejs 模块..montage() 方法 在 1x 模式中使用 concatenate 选项会很有帮助.示例代码:
To concatenate images in a "single column image", you may, for instance, use the GraphicsMagick Image Processing System through the gm nodejs module. The .montage() method with the concatenate option in the 1x mode would be helpful. Sample code:
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 问题，其中包含有关该问题的大量信息和多种解决方法:
Change the Browser
In Chrome, you would always get only the visible area on the resulting screenshot, here is the relevant chromedriver issue with a lot of information about the issue and multiple workarounds:
有点令人惊讶的是，它应该虽然在 Firefox 中工作 - 如果可能，切换到它:
Somewhat surprisingly, it should though work in Firefox - switch to it if possible:
占据整个屏幕的 Chrome 屏幕截图与 Firefox 的不同.Firefox 将捕获整个屏幕，甚至是当前无法查看的部分.Chrome 不会！
Chrome screenshots that take up the entire screen are not like Firefox's. Firefox will capture the entire screen, even parts of it that are not currently viewable. Chrome will not!
调整屏幕尺寸
另一种选择是使用 BrowserStack 或 SauceLabs 在特定浏览器中的特定平台上开始您的测试，并使用特定大足够的分辨率.Protractor 支持开箱即用的 Sauce Labs 和 BrowserStack.
Tweak the Screen Size
Another option would be to use services like BrowserStack or SauceLabs to start your tests on a specific platform in a specific browser and, using a specific large enough resolution. Protractor supports Sauce Labs and BrowserStack out-of-the-box.
BrowserStack 的示例配置:
Example configuration for BrowserStack:
exports.config: {
browserstackUser: "user",
browserstackKey: "key",
capabilities: {
'browserstack.local': true,
'browserstack.debug': true,
browserName: "Chrome",
os: "Windows",
os_version: "8",
resolution: "2048x1536"
},
}
然后，最大化浏览器窗口(例如在 onPrepare() 中):
Then, maximize the browser window (inside onPrepare(), for instance):
browser.driver.manage().window().maximize();
并制作屏幕截图.
可行的解决方案！！！
另一种选择是在虚拟显示器中运行测试.我你会关注这篇博文和使用Xvfb，当你运行Xvfb服务器时，你可以指定分辨率:
Another option could be to run tests in a Virtual Display. I you would follow this blogpost and use Xvfb, when you will run the Xvfb server, you may specify the resolution:
/usr/bin/Xvfb :99 -ac -screen 0 2048x6000x24 &
还可以在此处查看有关此主题的相关信息:
Also see related information on this topic here:
您也可以使用 docker-selenium 解决方案允许配置屏幕尺寸.
You may also use the docker-selenium solution which allows to configure the screen size.
这篇关于如何截取移动设备外形的全高?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
