☰

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

tag-icon • tag-icon google-chrome screenshot
如何使用 Chrome Headless 在页面加载 N 秒后截取页面屏幕截图？

我想使用 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）。

总结

有没有什么办法可以让 Chrome Headless 在页面加载后等待几秒钟再截屏？

答案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();

})();

答案2

作为弗拉斯蒂米尔·奥夫恰契克声明称，David Schnurr 已为此目的编写并分享了一个 nodeJS 脚本中等的。

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

设置如下：

  1. 克隆 Git 存储库。
    git clone https://github.com/schnerd/chrome-headless-screenshots.git
  2. 安装依赖项：
    npm install chrome-remote-interface minimist
  3. 运行脚本
    node 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

答案3

对于任何看到此页面的人来说：Chrome 有一个新功能，就是这样做的。有一个新的命令行参数--timeout。

chrome --headless=new --screenshot --timeout=5000 https://www.google.com

…chromium当然也适用于 Linux。

来源：https://developer.chrome.com/articles/new-headless/

相关内容