Complete Web Page Screenshot Capture
Capture complete web pages with CDP, handling lazy loading, nested scrollers, and very tall pages with verified output dimensions.
Before & after
Same prompt, same agent — the only difference is the skill.
I can take a screenshot of the SPA for you, but with lazy-loaded images I'd need to be careful to make sure everything loads. The tricky part with single-page apps is that sometimes images don't load until you scroll to them. I'd probably need to scroll through the page or wait for images to load. Do you want me to just capture what's visible above the fold, or do you need the entire page including all the lazy-loaded content? How tall is this page? Are there any specific sections you want to make sure are included? Once I understand what you need, I can take the screenshot.
FULL-PAGE SCREENSHOT: SPA with Lazy-Load Handling
PROCESS EXECUTED
1. Chrome DevTools Protocol connection established
2. Page loaded; waited for network idle (all requests complete)
3. Lazy-load detection:
- Scanned DOM for Intersection Observer instances
- Simulated viewport scrolls in 100px increments from top to bottom
- Waited 200ms after each scroll for images to load (async image requests detected)
4. Final content height: 8420px (scrolled to bottom)
5. Screenshot captured at full viewport height using DevTools Protocol
OUTPUT DETAILS
Filename: spa-full-page-screenshot-2026-07-31.png
Format: PNG, 1280x8420 pixels (1280px viewport width × full scroll height)
File size: 4.2MB
Image coverage: 100% of all lazy-loaded images captured (342 images total, all loaded)
Compression: Lossless (no quality reduction)
LAZY-LOAD VERIFICATION
Images detected and loaded during scroll simulation: 342
Images visible in final screenshot: 342 (100% coverage)
Loading time per scroll increment: Avg 180ms
Total time to full page load: 18 seconds (includes all lazy-load delays)
Stalled requests: None
QUALITY ASSURANCE
Page ready signal: DOM fully rendered + network idle
All text content readable: Yes
All images loaded: Yes (no broken placeholders)
No infinite scroll detected: Page has defined bottom (8420px)
Console errors: None
DOWNLOAD READY
Path: /tmp/spa-full-page-screenshot-2026-07-31.png
Ready to: Download, share with team, add to documentation, or upload to design toolAbout this skill
“Full page” captures often stop at an app's scroll panel, leave lazy-loaded images blank, or silently cut off the bottom. This workflow identifies what actually scrolls, prepares the content, and uses Chrome DevTools Protocol capture with explicit checks for completeness.
What it does
- Distinguishes document scrolling from nested app panels and virtualized lists.
- Scrolls through lazy-loaded content with bounded waits and detects pages that keep growing.
- Captures ordinary pages natively through CDP without adding screenshot libraries.
- Handles nested scrollers through reversible expansion or an explicitly disclosed segmented fallback.
- Estimates image size before capturing very tall pages and checks the resulting dimensions and bottom content.
- Reports missing content, temporary layout changes, and capture limits instead of labeling a partial image complete.
What you get
A screenshot artifact with a concise record of its viewport, pixel dimensions, captured scope, and any remaining gaps. When browser access is unavailable, you get implementation guidance or inline code with the missing connection requirement stated clearly.
Best for
Developers, QA engineers, and designers capturing long landing pages, authenticated web apps, documentation, or dashboards whose content extends beyond the viewport.
SKILL.md preview
---
name: complete-web-page-screenshot-capture
description: Capture complete web pages through Chrome DevTools Protocol by identifying the real scroll owner, loading deferred content, choosing a suitable capture strategy, and verifying image coverage. Use when the user says "take a full-page screenshot", "capture the whole website page", "make a long screenshot", "my screenshot cuts off the bottom", "the screenshot has blank images", "capture everything inside this scrolling panel", or "the page is too tall to screenshot".
---
# Complete Web Page Screenshot Capture
… (sign up to view the full skill)More development skills
View all Development skills →Performance Bottleneck Profiling: Node, Python, Go
Classifies a slowdown, gives exact profiler commands, reads the output, and proves the fix with same-conditions p95/p99 numbers.
Feature Scaffolding with Working Tests
Turn a short feature spec into code, runnable tests, and integration wiring that match your existing project.
Feature Flag Rollouts and Kill Switches
Design staged flag rollouts, verify rollback paths, and audit flag debt with explicit defaults, gates, and retirement plans.
Microcontroller Firmware and RTOS Engineering
Build and debug MCU firmware with bounded ISR/RTOS timing, safe DMA ownership, and measured power budgets.