How to Capture Website Screenshots with n8n
Build an n8n workflow that captures JavaScript-rendered website screenshots, stores the binary image, and handles retries, errors, and scaling.
n8n can capture website screenshots by calling a screenshot API from its HTTP Request node or by running a browser through Puppeteer or Playwright. The most maintainable workflow is:
- Accept and validate a URL.
- Render the page with a managed browser or a self-hosted browser.
- Return the screenshot as binary data.
- Store, email, publish, or analyze that binary file.
- Add retries and an error branch for failed loads.
This guide shows the complete workflow, provider choices, binary handling, reliability practices, and an API alternative.
1. Choose a screenshot method
| Method | Best for | What you maintain |
|---|---|---|
| HTTP Request node plus managed API | JavaScript-heavy pages without running Chrome yourself | API credentials, parameters, and usage |
| Browserless integration | Hosted Chromium, screenshots, PDFs, crawling, and browser automation | Credentials and provider configuration |
| GetScreenshot through HTTP Request | A narrowly scoped screenshot API | Credentials and endpoint parameters |
| n8n-nodes-puppeteer | Self-hosted control over full-page, element, PDF, and script operations | Chrome libraries, browser resources, and package updates |
| Browser Bridge with Playwright | Interactive or authenticated sessions using an installed Chrome profile | Chrome profile access, CDP security, and deployment availability |
n8n’s HTTP Request node is the general integration point for REST screenshot services. A managed browser reduces Chromium maintenance; Puppeteer or Playwright gives more control but puts browser dependencies and resource limits in your deployment.
2. Build the basic n8n workflow
Step 1: Add a trigger
Use a Webhook node when another application submits a URL. Use a Schedule Trigger for recurring captures, or connect any event node that produces a URL.
A webhook payload can be as small as:
{
"url": "https://example.com",
"fullPage": true,
"format": "png"
}Step 2: Normalize and validate the URL
Add a Code node before the capture node. Reject missing values and protocols other than HTTP or HTTPS. Normalizing here prevents malformed requests and makes retries deterministic.
const raw = $json.url;
if (typeof raw !== 'string' || !raw.trim()) {
throw new Error('url is required');
}
let parsed;
try {
parsed = new URL(raw.trim());
} catch {
throw new Error('url must be a valid absolute URL');
}
if (!['http:', 'https:'].includes(parsed.protocol)) {
throw new Error('only http and https URLs are supported');
}
return [{
json: {
...$json,
url: parsed.toString(),
fullPage: Boolean($json.fullPage),
format: $json.format || 'png'
}
}];Step 3: Configure an HTTP Request node
For a screenshot API, configure the HTTP Request node with:
- Method: GET or the method required by the provider.
- URL: the provider’s screenshot endpoint.
- Authentication: use n8n credentials or a credential expression. Do not place a long-lived key in a webhook payload.
- Query parameters: map the URL, output format, viewport, full-page setting, wait condition, and any provider-specific options.
- Response format: File. Set the binary property name, such as
data. - Timeout: allow enough time for navigation and rendering. A short timeout creates false failures on slower pages.
Keep the response as binary data. Do not convert an image to JSON or text between the capture node and the storage node.
Step 4: Store or forward the binary image
Connect the HTTP Request node to the destination that matches your workflow:
- Object storage for an archive.
- Email or a chat integration for notifications.
- A CMS or issue tracker for visual regression reports.
- An image-analysis or AI node for downstream inspection.
- A Respond to Webhook node when the caller should receive the image directly.
Use the binary property name consistently. If a downstream node expects data but your request node outputs screenshot, either change the request node’s binary property or rename it with a Move Binary Data node.
3. Browserless as a managed browser
Browserless provides hosted browser functions that can be connected to n8n. Its documented capabilities include screenshot capture, PDF generation, crawling, URL mapping, performance audits, smart scraping, and custom JavaScript or Puppeteer execution. Credentials are required.
Use this path when pages depend on JavaScript and you do not want to install or patch Chromium in the n8n host. Configure the Browserless integration or call its endpoint with an HTTP Request node, then request a binary response and pass that file to storage.
Managed browser services still need page-specific settings. Start with a viewport, full-page mode when required, and a wait condition that matches the page. For applications that render after an API call, wait for a selector or a controlled delay rather than capturing immediately.
4. GetScreenshot through the HTTP Request node
GetScreenshot is listed in n8n’s integration catalog as a dedicated website screenshot API. Add an HTTP Request node, select generic authentication, and provide the endpoint and required parameters.
This is a good fit when you need a focused screenshot endpoint instead of a general browser platform. Keep the same n8n structure: validate the URL, set capture options, request a file response, and route failures to an error branch.
5. Self-hosted Puppeteer in n8n
The n8n-nodes-puppeteer package documents operations for full-page and selected-area screenshots, PDFs, custom scripts, and connections to a remote browser over WebSocket.
Self-hosting is useful when you need browser-level control or must keep traffic inside your infrastructure. It also means you must provide compatible Chrome shared libraries, enough CPU and memory for concurrent pages, and a strategy for browser crashes. If local dependencies are unavailable, configure the package to connect to a remote browser endpoint.
Typical Puppeteer sequence
- Open a page and set the viewport.
- Navigate to the URL.
- Wait for a selector, a delay, or network activity to settle.
- Run optional page JavaScript.
- Capture the viewport, full page, or selected element.
- Return the image as binary data.
Use element capture for a chart, invoice, or component. Use full-page capture for documentation or audits, and remember that very long pages consume more memory.
6. Browser Bridge and Playwright
The n8n Browser MCP specification describes a Browser Bridge that connects to an installed Chrome profile. The server launches Playwright and connects over Chrome DevTools Protocol, exposing a browser_screenshot operation.
This route suits interactive, authenticated browser sessions. Confirm that the bridge is available in your deployment and review profile and CDP access controls before exposing it to untrusted workflow inputs.
7. Capture settings that affect the result
| Setting | When to use it | Common failure |
|---|---|---|
| Viewport width and height | Match a desktop, tablet, or mobile layout | Responsive content changes or is clipped |
| Full page | Capture an entire document | Very tall pages use substantial memory |
| Element selector | Capture one component | Selector is missing or appears late |
| Wait for selector | Single-page apps and delayed widgets | Timeout when the selector never appears |
| Delay | Pages with animations or delayed rendering | Fixed delays slow every run |
| Network idle | Pages that finish after several requests | Analytics or polling keeps the network busy |
| Format | PNG for lossless output, JPEG for smaller files | Unexpected MIME type downstream |
For repeatable captures, disable animations with custom CSS where your provider supports it, wait for a meaningful selector, and use a stable viewport. Avoid relying only on a long fixed delay.
8. Reliability, retries, and error handling
Use an error branch
Configure the workflow’s error handling so a failed capture records the URL, provider, status, and error message. Send that record to a database, log, or alert channel. Preserve the original request ID when your provider supplies one.
Retry only transient failures
Retry timeouts, connection resets, and temporary provider errors with exponential backoff. Do not repeatedly retry invalid URLs, authentication failures, or a selector that cannot exist. A practical sequence is two or three attempts with increasing delays.
Make retries safe
Use deterministic output names based on the normalized URL and capture date. If a retry succeeds after a partial upload, overwrite the same object or use an idempotency key where the destination supports one.
Protect the workflow
- Limit concurrency so browser processes do not exhaust memory.
- Cap URL length and reject unsupported protocols.
- Do not allow arbitrary internal network targets when untrusted users can submit URLs.
- Store API keys in n8n credentials.
- Set a maximum page time and maximum output size.
9. Troubleshooting common errors
| Symptom | Likely cause | Fix |
|---|---|---|
| Blank or mostly white image | Capture occurred before the app rendered | Wait for a content selector or required network activity. |
| Cookie banner covers the page | The page requires consent interaction | Use a provider or script that clicks the consent control before capture, or hide the banner with approved page CSS. |
| Element not found | Selector changed or content is conditional | Inspect the rendered DOM, use a stable selector, and increase the selector timeout. |
| Navigation timeout | Slow origin, blocked request, or never-ending requests | Increase the timeout, wait for a specific selector, and check the URL from the browser environment. |
| Binary data is missing | HTTP Request returned JSON or text | Set response format to File and verify the binary property name. |
| Chrome fails to start | Missing shared libraries or insufficient resources | Install the package’s required libraries, use a compatible image, or connect to a remote browser. |
| Authentication error | Credential not attached or expired | Test the credential in n8n, check the header or query parameter, and rotate the key if needed. |
| Very tall capture crashes | Memory pressure from full-page rendering | Capture sections or an element, reduce concurrency, or raise browser memory limits. |
10. Performance and cost planning
Rendering time depends on the target page, JavaScript work, network conditions, wait strategy, and browser startup. There are no comparable performance or success-rate statistics in the reviewed sources, so benchmark your own URLs before setting service-level expectations.
For throughput, reuse managed browser sessions where supported, avoid unnecessary full-page captures, choose a selector wait instead of a large fixed delay, and process jobs with bounded concurrency. For self-hosted Puppeteer, monitor memory and CPU per browser process.
Track provider usage and n8n execution history separately. A workflow can succeed while the target page returns an error document, so record the final URL, HTTP status when available, image byte size, and capture duration.
11. Complete API examples
The same capture can be performed outside n8n when you need a small service or a preprocessing step. See the ScreenshotNeo documentation for request options.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://stripe.com \
-o shot.webpPython
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));12. Or skip the browser setup
ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. Cookie and consent banners are accepted and removed before capture, along with more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.
Its options include full-page capture with lazy images loaded, CSS-selector element capture, dark mode, device presets or custom viewports, retina scale, PDF paper and margin controls, custom CSS and JavaScript, clicks, wait conditions, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, selectable cache TTLs, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, a usage API, and an OpenAPI specification. An MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing provides two months free, and every feature is available on every plan.
Create a free ScreenshotNeo account and connect it to your n8n HTTP Request node.
13. n8n workflow checklist
- Trigger receives a URL and optional capture settings.
- URL is normalized and restricted to HTTP or HTTPS.
- Credentials are stored in n8n, not in incoming data.
- HTTP Request response format is File.
- Binary property name is documented for downstream nodes.
- Viewport, full-page mode, and wait condition match the page.
- Retries cover transient errors only.
- Error branch records URL, provider, status, and message.
- Concurrency and page time limits protect the n8n host.
- Output storage uses deterministic names or idempotency.
14. FAQ
Can n8n screenshot a page that needs JavaScript?
Yes. Use Browserless, another hosted browser API, Puppeteer, or Playwright. A plain HTTP download will not execute the page’s client-side JavaScript.
Should I use a managed browser or Puppeteer?
Choose managed Chromium when you want less infrastructure work. Choose Puppeteer when you need self-hosted control and can operate Chrome dependencies and resources.
How do I return the screenshot from a webhook?
Keep the image in the HTTP Request node’s binary property and connect it to Respond to Webhook. Set the response content type and filename according to the binary metadata.
Why is a screenshot different between runs?
Responsive breakpoints, animations, consent state, ads, timestamps, and asynchronous data can change pixels. Fix the viewport, wait for stable content, disable animations where possible, and control cookies or headers.
Can one workflow capture many URLs?
Yes. Split the URL list into items, limit concurrency, and collect each binary result with its source URL and status. For very large batches, use a provider’s bulk endpoint or queue jobs.
