Skip to content
Cload Cloud
Developer Tools

Full-Page Screenshot

Captures full-page screenshots of web pages via Chrome DevTools Protocol with zero dependencies.

View source More in Developer Tools

What Full-Page Screenshot Does

Full-Page Screenshot is a lightweight utility that captures complete web page screenshots using Chrome DevTools Protocol (CDP), regardless of viewport height. Unlike built-in browser screenshot tools that only capture the visible area, this skill automatically scrolls through entire pages and stitches together a single high-fidelity image—perfect for documentation, testing, archiving, or sharing complete page layouts. With zero external dependencies, it integrates seamlessly into automation workflows and CI/CD pipelines without adding bloat to your project.

Designed for product designers, QA engineers, and automation specialists, Full-Page Screenshot excels when you need to capture complex pages with infinite scroll, modals, or dynamic content. Whether you’re automating visual regression testing, documenting design systems, or creating page archives for compliance purposes, this tool provides a programmatic way to capture what users would see after scrolling to the bottom.

How to Install

Installation

  1. Verify Chrome/Chromium is installed - Ensure you have Chrome, Chromium, or a Chromium-based browser (Edge, Brave) available on your system

  2. Clone or download the repository:

    git clone https://github.com/LewisLiu007/full-page-screenshot.git
cd full-page-screenshot

  3. Install Node.js dependencies (if applicable):

    npm install

  4. Verify Chrome DevTools Protocol connectivity:

    • Launch Chrome with remote debugging enabled:
    google-chrome --remote-debugging-port=9222

  5. Integrate into your Claude Code workflow:

    • Reference the skill URL or local path in your agent configuration
    • Pass target URLs and output file paths as parameters

  6. Test with a sample URL:

    // Example usage pattern
const screenshotTool = require('./full-page-screenshot');
await screenshotTool.capture('https://example.com', './output.png');

Note: No additional npm packages required—the zero-dependency design means fewer conflicts and faster setup.

Use Cases

  • Visual Regression Testing: Capture full-page screenshots before and after code changes to automatically detect unintended visual modifications across entire pages
  • Design System Documentation: Generate complete mockups of component libraries and design system pages for handoff documents and style guide archives
  • Web Page Archiving: Create timestamped PNG archives of critical web pages for compliance, legal discovery, or historical record-keeping
  • Automated QA Reports: Include full-page screenshots in test reports to provide context for failed tests without requiring manual browser inspection
  • Performance Benchmarking: Capture pages at different viewport sizes to assess responsive design implementation and ensure consistent layouts across devices

How It Works

Full-Page Screenshot leverages the Chrome DevTools Protocol, a low-level debugging interface that allows programmatic control over Chrome instances. Rather than relying on Puppeteer, Playwright, or other high-level frameworks, this skill communicates directly with Chrome’s debugging port (default 9222) to execute screenshot commands with minimal overhead.

When you invoke the skill, it establishes a CDP connection, navigates to the target URL, and measures the page’s full scrollable height. It then captures the viewport in segments, automatically scrolling between each capture to render previously off-screen content. The individual screenshots are intelligently stitched together, accounting for overlapping elements and scroll position changes, to create a seamless full-page image without duplication or visual artifacts.

The zero-dependency approach means the skill contains no external npm packages—all CDP communication and image stitching logic is written in native JavaScript. This eliminates version conflicts, reduces installation time, and makes the tool portable across environments. Since it uses Chrome’s native capabilities rather than emulating a browser, screenshots capture real rendering behavior including GPU-accelerated effects, CSS animations, and font rendering exactly as users experience them.

Pros and Cons

Pros:

  • Zero external dependencies—no npm packages to install or manage, reducing setup time and dependency conflicts
  • Direct Chrome DevTools Protocol communication—more efficient than high-level frameworks, with faster execution and lower memory overhead
  • Perfect for automation workflows—integrates seamlessly into CI/CD pipelines, Claude Code agents, and scheduled tasks
  • Captures real rendering—uses actual Chrome rendering engine, ensuring screenshots match what users see including CSS effects and font rendering
  • Lightweight and portable—small codebase easy to audit, modify, or copy between projects without npm bloat
  • Programmatic control—fully scriptable with no manual browser interaction required, ideal for batch processing multiple URLs

Cons:

  • Chrome-only support—no Firefox, Safari, or other browser engines; limits cross-browser testing without multiple instances
  • Manual browser launch required—unlike headless Puppeteer, you must explicitly start Chrome with the debugging port enabled, adding setup complexity
  • Sticky/fixed element duplication—elements with fixed positioning may appear multiple times in stitched output, requiring post-processing in some cases
  • No built-in image optimization—PNG output files can be large for complex pages; you’ll need external tools for compression or format conversion
  • Limited error handling documentation—fewer community examples and Stack Overflow answers compared to Puppeteer or Playwright
  • No automatic waiting for dynamic content—you must manually ensure pages are fully loaded before capturing; no built-in wait-for-selector or network idle detection
  • Puppeteer Screenshots: Higher-level browser automation tool offering more features but with dependency overhead; useful if you need beyond-screenshot functionality like form filling or network throttling
  • Playwright Visual Testing: Cross-browser visual regression testing framework with built-in screenshot comparison; better for complex test suites but heavier than Full-Page Screenshot
  • Percy Visual Testing: Cloud-based visual regression service that auto-captures and compares screenshots; ideal for team collaboration but requires third-party account
  • Lighthouse CI: Automated performance testing tool that captures screenshots alongside metrics; best when combined with full-page screenshots for comprehensive reporting

Alternatives

  • **Puppeteer page.screenshot({fullPage: true}): Built-in full-page capture; requires NPM dependency and heavier footprint but offers tighter integration with other Puppeteer automation
  • Manual Browser Screenshot Tools: Firefox and Chrome extensions like Full Page Screen Capture; no automation capability but useful for ad-hoc user-triggered captures
  • Selenium WebDriver: Traditional browser automation framework with screenshot support; more heavyweight, broader browser support, but steeper learning curve and more dependencies
Glossary

Key terms

Chrome DevTools Protocol (CDP)
A low-level debugging interface that allows external programs to control and inspect Chrome browsers. It communicates via WebSocket over a specified port (default 9222) and provides commands for navigation, screenshot capture, DOM inspection, and performance profiling.
Viewport
The visible area of a web page within the browser window. Full-page screenshot captures multiple viewport-sized segments and stitches them together to create a taller image representing the entire scrollable page.
Remote Debugging Port
A network port (typically 9222) that must be explicitly enabled when launching Chrome to allow external tools to connect via CDP. Started with the `--remote-debugging-port` flag (e.g., `chrome --remote-debugging-port=9222`).
Image Stitching
The process of combining multiple overlapping screenshot segments into a single coherent image. The skill detects overlaps and merges screenshots intelligently to avoid duplication and preserve visual continuity.
Scrollable Height
The total vertical length of page content including areas that require scrolling to view. Calculated as the maximum scroll position the page supports, typically equal to `document.documentElement.scrollHeight`.
FAQ

Frequently Asked Questions

How is Full-Page Screenshot different from Chrome's built-in screenshot tool?

Chrome's native screenshot captures only the visible viewport. Full-Page Screenshot automatically scrolls through the entire page height and stitches screenshots together, capturing content that requires scrolling. It's designed for automation—you can programmatically trigger captures without manual browser interaction.

What browsers are supported?

Any Chromium-based browser with DevTools Protocol support: Chrome, Chromium, Edge, Brave, and Vivaldi. Firefox and Safari are not supported because they don't expose CDP. You must run the browser with the `--remote-debugging-port` flag to enable the protocol.

How do I handle pages with dynamic content or infinite scroll?

Full-Page Screenshot scrolls through the entire scrollable height, so dynamically loaded content will be captured if it loads during the scroll sequence. For pages that continuously load more content (infinite scroll), you may need to set a maximum scroll height or trigger content loading via JavaScript before capturing.

Does this work with pages behind authentication or paywalls?

Yes, if you first authenticate in the Chrome instance before invoking the screenshot. You can pass an already-authenticated Chrome DevTools connection, or use CDP to set cookies/headers before navigating. The skill captures whatever the authenticated session can access.

What output formats are supported?

PNG is the primary output format, offering lossless quality ideal for testing and archiving. The skill captures at the current viewport width, so you can invoke it multiple times at different viewport sizes (mobile, tablet, desktop) to test responsive designs.

How does zero-dependency design benefit my workflow?

Fewer dependencies mean faster installation, smaller file sizes, fewer security vulnerabilities to track, and reduced compatibility issues. You avoid version conflicts with Puppeteer or Playwright if you're using those elsewhere. The skill is self-contained and can be copied between projects without npm install overhead.

Can I integrate this into CI/CD pipelines?

Absolutely. Install Chrome in your CI environment, spawn it with `--remote-debugging-port`, and call Full-Page Screenshot as part of your build process. Many CI systems (GitHub Actions, GitLab CI, Jenkins) have Chrome pre-installed or offer container images with Chromium available.

What happens if a page has fixed/sticky headers or footers?

Fixed elements remain visible during scrolling, so they'll appear in multiple stitched segments. The skill's intelligent stitching detects and handles this, but you may see slight duplication of sticky elements. Consider hiding fixed UI elements before capture if perfect de-duplication is critical.

More in Developer Tools

All →
Developer Tools

Webapp Testing

Tests local web applications using Playwright for verifying frontend functionality, debugging UI behavior, and capturing screenshots.

ComposioHQ