Browser icon

Browser

A node to run a headless browser and take screenshots or PDF
Join our community

Actions3

Overview

The Page Screenshot operation of this custom n8n node allows you to automate the process of capturing screenshots of web pages using a headless browser (Puppeteer). This is useful for monitoring website changes, generating visual reports, archiving web content, or automating UI testing. For example, you could use it to periodically capture and store screenshots of your homepage, verify that a landing page renders correctly after deployment, or document the appearance of third-party sites.

Properties

Name Type Meaning
Target URL String The web address of the page to capture.
Options Collection Additional settings for screenshot behavior (see below for sub-options).
└ Timeout Number Maximum time in milliseconds to wait for the browser/page actions.
└ User-Agent String Custom user agent string for the browser session.
└ Element String CSS selector for an element to wait for before taking the screenshot.
└ Clip to Element? Boolean If true, screenshot will be clipped to the specified element instead of the full viewport.
└ Full Page? Boolean If true, captures the entire scrollable page; otherwise, only the visible part.
└ Disable Javascript? Boolean If true, disables JavaScript execution on the page.
└ Scroll To String CSS selector of an element to scroll into view before capturing.
└ Javascript Code String Custom JavaScript code to execute in the page context before capturing.
└ Headers Collection List of HTTP headers to send with the request.
└ Styles Collection List of style tags (by URL or content) to inject before rendering.
└ Scripts Collection List of script tags (by URL or content) to inject before rendering.
Viewport Collection Settings for the browser viewport (see below for sub-options).
└ Width Number Width of the viewport in pixels.
└ Height Number Height of the viewport in pixels.
└ Scale Factor Number Device scale factor (for high-DPI screens).
└ Is Mobile Boolean Emulate mobile device if true.
└ Is Touchscreen Boolean Emulate touchscreen if true.
└ Is Lansdcape Boolean Use landscape orientation if true.

Output

  • json:

    • url: The URL of the captured page.
    • title: The title of the web page.
    • metrics: Browser performance metrics collected during the session.
    • evaluateResponse (optional): Result of any custom JavaScript code executed (if provided).

  • binary:

    • data: The screenshot image as a PNG file (screenshot.png). This field contains the binary data of the screenshot.

Dependencies

  • External Library: puppeteer (bundled)
  • No API keys required
  • n8n Configuration: No special configuration required, but the environment must allow Puppeteer to launch a headless Chrome instance (e.g., Docker containers may need additional flags or packages).

Troubleshooting

  • Common Issues:

    • Timeouts: If the page takes too long to load or render, increase the "Timeout" option.
    • Headless Browser Launch Fails: In some environments (like Docker), Puppeteer may fail to launch due to missing dependencies. Ensure all required system libraries are installed and consider using the --no-sandbox flag (already set in this node).
    • Element Not Found: If you specify a CSS selector in "Element" or "Scroll To" that does not exist, the node may throw an error. Double-check your selectors.
    • JavaScript Errors: Invalid code in the "Javascript Code" property can cause evaluation errors.

  • Error Messages:

    • "TimeoutError": Indicates the page or element did not load within the specified timeout. Try increasing the timeout value.
    • "Node is either not visible or not an HTMLElement": The selector provided for "Element" or "Scroll To" did not match a visible element.
    • "ProtocolError: ...": Usually related to navigation or network issues. Check the target URL and network connectivity.

Links and References

Discussion