如何在页面加载 Chrome Headless 后 N 秒截取页面截图？

Question

我想使用 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 库可以使用来自 node 的 API 来实现这一点，而不是使用命令行开关，但我们担心稳定性（Chrome 团队喜欢定期破坏所有内部 API）。

TL; 博士

无论如何要让 Chrome Headless 在页面加载后等待几秒钟才能截取屏幕截图？

Answer 1

我正在寻找同样的东西。我发现的是 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();

})();

Answer 2

正如Vlastimil Ov\xc4\x8d\xc3\xa1\xc4\x8d\xc3\xadk所说，David Schnurr 为此目的在Medium上编写并分享了一个 NodeJS 脚本。

\n\n

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

\n\n

设置如下：

\n\n

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

\n