Capture a screenshot using Puppeteer

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import RunnableCodeBlock from '@site/src/components/RunnableCodeBlock'; import ApiLink from '@site/src/components/ApiLink';

import PuppeteerPageScreenshotSource from '!!raw-loader!roa-loader!./puppeteer_page_screenshot.ts'; import PuppeteerCrawlerUtilsSnapshotSource from '!!raw-loader!roa-loader!./puppeteer_crawler_utils_snapshot.ts'; import PuppeteerCrawlerPageScreenshotSource from '!!raw-loader!roa-loader!./puppeteer_crawler_page_screenshot.ts'; import PuppeteerCrawlerCrawlerUtilsSnapshotSource from '!!raw-loader!roa-loader!./puppeteer_crawler_crawler_utils_snapshot.ts';

Using Puppeteer directly

:::tip

To run this example on the Apify Platform, select the apify/actor-node-puppeteer-chrome image for your Dockerfile.

:::

This example captures a screenshot of a web page using Puppeteer. It would look almost exactly the same with Playwright.

<Tabs groupId="puppeteer-capture-screenshot"> <TabItem value="pagescreenshot" label="Page Screenshot">

Using page.screenshot():

<RunnableCodeBlock className="language-js" type="puppeteer"> {PuppeteerPageScreenshotSource} </RunnableCodeBlock> </TabItem> <TabItem value="crawlerutilsscreenshot" label="Crawler Utils Screenshot" default>

Using utils.puppeteer.saveSnapshot():

<RunnableCodeBlock className="language-js" type="puppeteer"> {PuppeteerCrawlerUtilsSnapshotSource} </RunnableCodeBlock> </TabItem> </Tabs>

Using PuppeteerCrawler

This example captures a screenshot of multiple web pages when using PuppeteerCrawler:

<Tabs groupId="puppeteer-capture-screenshot"> <TabItem value="pagescreenshot" label="Page Screenshot">

Using page.screenshot():

<RunnableCodeBlock className="language-js" type="puppeteer"> {PuppeteerCrawlerPageScreenshotSource} </RunnableCodeBlock> </TabItem> <TabItem value="crawlerutilsscreenshot" label="Crawler Utils Screenshot" default>

Using the context-aware <ApiLink to="puppeteer-crawler/namespace/puppeteerUtils#saveSnapshot">saveSnapshot()</ApiLink> utility:

<RunnableCodeBlock className="language-js" type="puppeteer"> {PuppeteerCrawlerCrawlerUtilsSnapshotSource} </RunnableCodeBlock> </TabItem> </Tabs>

To take full page screenshot using puppeteer we need to pass parameter fullPage as truein the screenshot(): page.screenshot(fullPage: true)

In both examples using page.screenshot(), a key variable is created based on the URL of the web page. This variable is used as the key when saving each screenshot into a key-value store.