Puppeteer 全页面截图，在页面底部呈现额外的空白

Question

我正在使用Puppeteer v1.3.0在构建/部署期间的各个断点处生成一些屏幕截图。我似乎不明白如何正确生成全页屏幕截图。

我可以完全按照我想要的方式获得整页屏幕截图，但我必须将视口尺寸设置两次，这对我来说似乎很奇怪（我只是设置任意高度，然后评估 clientHeight）：

//xl
await page.setViewport({
    width: 1201,
    height: 600
});
await page.setViewport({
    width: 1201,
    height: await page.evaluate(() => document.body.clientHeight),
    isMobile: true //whether the meta viewport tag is taken into account
});
await page.screenshot({path: 'xl.png');

我尝试设置 waitUntil networkidle，只是评估 clientHeight 并将 fullPage 设置为 true 在 page.screenshot 中：

await page.goto('my-url-here', {
    waitUntil: 'networkidle2'
});
await page.setViewport({
    width: 1201,
    height: await page.evaluate(() => document.body.clientHeight),
    isMobile: true //whether the meta viewport tag is taken into account
});
await page.screenshot({path: 'arrowdental_xl.png', fullPage: true});

我得到了整页屏幕截图，但底部有一堆额外的空白，这是我不想要的。

在 Puppeteer 中获取整页屏幕截图的正确方法是什么？同样，上面的第一种方法有效，但感觉很愚蠢，我必须设置视口尺寸两次。如果可能的话，我希望有更清晰的代码。

Answer 1

与 puppeteer Sharp v 1.11.2

await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultRevision);
var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
    Headless = true,
});
var page = await browser.NewPageAsync();
await page.GoToAsync("https://www.google.com/");
await page.ScreenshotAsync(@"c:\temp\google.png", new ScreenshotOptions {FullPage = true});

因此将 ScreenshotOptions.FullPage 传递给 ScreenshotAsync()