Question

我试图在服务器上自动生成Cordova应用程序的屏幕截图。我的想法是，我可以使用WebKit截取HTML源代码并覆盖状态栏以自动生成相当准确的屏幕截图。

我一直在使用casperJS这样做，几乎正常工作。这是我的（修剪过的）代码：

page.viewportSize = { width: 480, height: 640 };
page.clipRect = { width: 480, height: 640 };
page.open(siteURL, function (status) {

    setTimeout(function() {
        page.render('phone.png');
        page.close();
        callback.apply();
    }, 4000);
});

这会生成屏幕截图但是应用程序的主屏幕使用弹性框来展开一组按钮以占据整个高度。这些按钮以最小的尺寸渲染，而不是“弯曲”。应该如此。

我相信casperJS相当于WebKit的旧版本，所以也许没有实现flexbox，或者casperJS没有正确设置浏览器高度，无论是哪种方式都不对。

任何人都可以建议一种可以实现的方法吗？最好是在当地，但服务也可以在必要时使用。

Answer 1

使用PhantomJS制作屏幕截图时，我也遇到了问题。事情看起来很不错，但这里和那里都存在奇怪的渲染问题。

如果您需要更高的准确度，我建议使用Selenium WebDriver的内置屏幕截图功能，使用Chrome（或其他非PhantomJS浏览器）捕获图像。例如，使用WebDriver Python绑定，您可以使用此功能：

http://selenium-python.readthedocs.org/en/latest/api.html#selenium.webdriver.remote.webdriver.WebDriver.get_screenshot_as_file

你也可以看看bok-choy框架 - 它是一个Selenium包装器，它支持捕获基线截图（用于视觉差异测试），听起来很有趣。作为副作用，您可能会获得一组屏幕截图用于其他目的。

bok-choy文档位于：http://bok-choy.readthedocs.org/en/latest/

其屏幕截图功能的文档位于：http://bok-choy.readthedocs.org/en/latest/visual_diff.html

自动化Cordova app的截图（casperJS？）

1 个答案: