wehub-resource-sync
78 lines
2.6 KiB
Plaintext
78 lines
2.6 KiB
Plaintext
---
|
|
id: capture-screenshot
|
|
title: 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 `true`in 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.
|