在Chrome Headless载入页面后N秒钟，如何拍摄页面的屏幕截图？

16

我想用Chrome Headless制作页面的屏幕截图，我们已经看到了--screenshot和两种--virtual-time-budget用于截图和限制浏览器等待加载时间的开关。

我在页面上有等待DOMContentLoaded呈现的元素，我们也希望捕获这些元素。

我正在寻找一种方法来截取屏幕截图，例如，在页面加载后 5秒钟，而不是在认为已加载页面时进行截图。

我们从NodeJS应用程序中调用Chrome Headless，如下所示：

cp.spawnSync("google-chrome-beta", ["--headless", "--disable-gpu", "--screenshot", "--profile-directory=Default", "--window-size=1920,6200", "--virtual-time-budget=25000", url]);

我们知道，可能有npm库可以使用来自节点的API而不是使用命令行开关来实现此目的，但是我们担心稳定性（Chrome团队喜欢定期破坏其所有内部API）。

TL; DR

是否有必要让Chrome浏览器无头页面加载后等待几秒钟再截屏？

google-chrome screenshot

— 马达拉的幽灵
source

3

David Schnurr共享了nodejs脚本，可以在这里执行您想要的操作。运行nodejs index.js --url="http://www.eff.org" --delay=50005秒钟的延迟。

— VlastimilOvčáčík17年

6

我在找同样的东西。我发现的是Google puppeteer。https://github.com/GoogleChrome/puppeteer

有很多示例，但是基本上您可以做到我所做的。

const puppeteer = require('puppeteer');

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
};

(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({width: 5960, height: 4209})
    await page.goto('http://stackoverflow.com', {waitUntil: 'networkidle'});
    await timeout(10000)
    await page.screenshot({path: 'example.png'});
    browser.close();

})();

— Vincnetas
source

2019年3月：UnhandledPromiseRejectionWarning: Error: ERROR: "networkidle" option is no longer supported. Use "networkidle2" instead

— 4253wyerg4e

2

正如VlastimilOvčáčík所说，David Schnurr在Medium上为此目的编写并共享了一个nodeJS脚本。

该脚本应即插即用，减去一些依赖项。

设置是这样的：

克隆Git存储库。
git clone https://github.com/schnerd/chrome-headless-screenshots.git
安装依赖项：
npm install chrome-remote-interface minimist
运行脚本
node index.js --url="/superuser/1209741/how-to-take-a-screenshot-of-a-page-n-seconds-after-page-is-loaded-with-chrome-he" --delay=4000

— var firstName
source