如何只截取 Nightwatch.js 中页面可见元素的屏幕截图？

Question

我可以使用 Nightwatch.js 成功捕获整个网页，使用以下代码片段：

module.exports = {
    'open the page': function (browser) {
        browser
            .url('http://localhost')
            .waitForElementVisible('body', 1000)
            .resizeWindow(320, 480)
            .saveScreenshot('./screenshot/mobile/login.png');
    }
}

在我的场景中，我打开的页面包含很多内容，这些内容会滚出页面底部。我用上面的代码捕获的结果是 320x1200 像素，我希望它们刚好是 320x480 像素。

我只想捕获屏幕的 'above the fold' 个元素，而不是整个网页，这似乎是默认设置。我怎样才能做到这一点？

Answer 1

需要您描述的功能（但使用 Python、Selenium 和 PhantomJS），我最终按原样保存屏幕截图，然后使用单独的工具（一些 ImageMagick 包装器）裁剪保存的图像).在您的情况下，png-crop 可能是解决方案 (https://www.npmjs.com/package/png-crop)。例如，当您指定 window 宽度为 320 像素、高度为 480 像素时，保存的屏幕截图可能宽度为 320 像素、高度为 2500 像素，具体取决于页面 "tall" 的情况。然后，您可以继续将保存的图像裁剪为 320px 宽和 480px 高的图像，保留图像的上半部分。

如何只截取 Nightwatch.js 中页面可见元素的屏幕截图？

How can I take a screenshot of only the visible elements of a page in Nightwatch.js?

javascript

selenium

webpage-screenshot

nightwatch.js