iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
If your screenshot monitor only shows the top of a page, first check its capture scope: it may be taking a viewport screenshot rather than a full-page one. If the capture is full-page but lower content is still missing, trigger lazy-loaded or interaction-dependent content and wait for the page to reach a verifiable ready state before capturing it.
1. Confirm what your monitor captures
A screenshot can cover the visible viewport, a selected element or clipped region, or the full scrollable page. Check the actual image artifact and the configured mode rather than assuming the monitor captures the whole page.
- Viewport: captures only what is currently visible. This is the usual reason changes farther down are absent.
- Element or clip: captures a component or defined region. This is appropriate when that surface—not the whole page—is the intended visual contract.
- Full page: captures the page from top to bottom, but does not necessarily cause every lazy or interaction-loaded section to render.
Also check the viewport dimensions and whether the artifact includes test-runner UI. Cypress exposes viewport, fullPage, and runner screenshot modes; a runner capture can include Cypress UI in applicable configurations. Playwright and Puppeteer both default their fullPage option to false, so full-page capture must be enabled explicitly. See the Cypress screenshot API, Playwright Page API, and Puppeteer ScreenshotOptions.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall2. Trigger content that appears only after scrolling or interaction
Full-page extent and page readiness are separate problems. Browsers commonly defer loading images or other content until the relevant area approaches the viewport. Applications may also load content after a click, expand, data request, or scroll event. Reproduce the user behavior that reveals the section before taking the screenshot.
#1 Best Overall
- Used Book in Good Condition
- Identify the missing section and how a real visitor makes it appear.
- Scroll through the relevant area or perform the required interaction. A single scroll to the bottom may work for a simple lazy-image page; incremental loading, nested scroll containers, infinite scrolling, and gated content may need a controlled sequence.
- Wait for evidence that the particular content is ready, such as the expected section becoming visible, its data reaching the intended state, or relevant images finishing loading.
- Take the screenshot only after those conditions are met.
Percy’s lazy-loading guide demonstrates scrolling to the bottom and checking that images have complete set and naturalWidth > 0. Those checks apply to images, not every kind of dynamic content. For data-backed sections, use an application-specific state or relevant response condition instead.
3. Enable full-page capture in your framework
Playwright
Set fullPage: true on the page screenshot. This runnable example scrolls to the bottom to trigger basic scroll-dependent content, waits for images in the document to finish loading successfully, then saves the full-page image:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
try {
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
await page.evaluate(async () => {
window.scrollTo(0, document.body.scrollHeight);
await new Promise((resolve) => setTimeout(resolve, 100));
window.scrollTo(0, 0);
await Promise.all(
Array.from(document.images, (image) => {
if (image.complete) return Promise.resolve();
return new Promise((resolve) => {
image.addEventListener('load', resolve, { once: true });
image.addEventListener('error', resolve, { once: true });
});
}),
);
});
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}Replace the brief scroll pause with an application-specific readiness condition where possible. The example treats image errors as completed so one broken image does not hang the capture; check image dimensions or application state separately if successful loading is required. The Playwright Page API documents fullPage as false by default.
Rank #2
- Bookbound planner helps you keep track of passwords and favorite websites
- Room for over 200 entries; 3.5 x 6 inch page sizes
- User name and security questions field
- Tips for what makes a strong password; web resources; notes pages
- Printed on quality paper containing 30% post-consumer waste; black simulated leather cover; 3.63 x 6.13 x .21 inches
Cypress
Choose fullPage explicitly when taking the screenshot, and trigger the relevant content first. For example:
cy.visit('https://example.com');
cy.get('[data-testid="below-fold-section"]').scrollIntoView();
cy.get('[data-testid="below-fold-section"]').should('be.visible');
cy.screenshot('page-full', { capture: 'fullPage' });Adjust the selector and readiness assertion to match the application. Cypress full-page capture scrolls from top to bottom and stitches screenshots; fixed or sticky elements can appear repeatedly in the result. Its documentation describes the available modes in the screenshot API and the behavior of the screenshot command.
Puppeteer
Set fullPage: true on Page.screenshot(). This example waits for document images to settle before saving:
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
const page = await browser.newPage();
try {
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
await page.evaluate(async () => {
window.scrollTo(0, document.body.scrollHeight);
await new Promise((resolve) => setTimeout(resolve, 100));
window.scrollTo(0, 0);
await Promise.all(
Array.from(document.images, (image) => {
if (image.complete) return Promise.resolve();
return new Promise((resolve) => {
image.addEventListener('load', resolve, { once: true });
image.addEventListener('error', resolve, { once: true });
});
}),
);
});
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}As with Playwright, replace generic waiting with a condition tied to the page being monitored, especially if content loads in stages. Puppeteer also provides ElementHandle.screenshot() for a targeted element; its documentation says that method attempts to scroll a hidden element into view. See the Puppeteer screenshots guide and ScreenshotOptions.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsRank #3
4. Wait for the right kind of readiness
A fixed delay can hide a timing problem without proving the page is ready. Prefer a condition tied to what the screenshot must show:
- For a component: wait for its selector to exist, become visible, and reach the expected state.
- For images: wait for completion and verify successful dimensions when that matters; a completed image may have failed to load.
- For data-backed content: wait for the relevant response or application state, not simply for the initial page navigation.
- For staged loading: scroll or interact through each stage, then verify the final expected content before capture.
Playwright’s toHaveScreenshot assertion waits until two consecutive page screenshots produce the same result before comparing with the baseline. That stabilizes visual output; it does not itself trigger lazy sections or prove the application reached the intended state. See Playwright PageAssertions.
5. Choose a comparison surface that fits the change
Use a full-page image if the regression contract covers page-wide layout. Use an element or clipped region when a particular component is what must remain stable. A smaller, deliberate comparison can avoid unrelated differences elsewhere on the page. Cypress recommends deliberate snapshots and discusses element-level comparisons in its visual testing guidance.
Rank #4
- Used Book in Good Condition
For Cypress full-page captures, inspect fixed headers, sticky navigation, and floating controls: stitching scrolled captures can repeat them. If they make the baseline unusable, consider a controlled screenshot-only style adjustment or compare the relevant component separately. Keep any such adjustment narrow so the screenshot still represents the behavior you intend to protect.
6. Make repeated captures comparable
Once the right content is present, reduce unrelated variation between runs:
- Use consistent viewport dimensions and rendering environments for baseline and current images.
- Control changing API data with fixtures or stable test data when the change under test is visual layout.
- Mask a small, genuinely dynamic region rather than loosening the failure threshold for the entire page.
- Keep the readiness condition and user-trigger sequence consistent across baseline generation and monitoring.
Cypress discusses rendering consistency, fixture-controlled responses, and masking dynamic regions in its visual testing guidance. A screenshot that captures the right region at the wrong state can still produce misleading diffs.
7. Troubleshoot the common failure modes
| Symptom | Likely cause | Fix |
|---|---|---|
| Only the initial viewport appears | The capture mode is viewport-only, or fullPage is off. |
Check the generated artifact and enable full-page capture. In Playwright and Puppeteer, set fullPage: true; in Cypress, use capture: 'fullPage'. |
| The full image has blank areas where content should be | Lazy or interaction-loaded content was not triggered, or capture began before it was ready. | Scroll or interact through the relevant area, then wait for a content-specific readiness condition before capturing. |
| Images are present but blank or broken | The capture proceeded before image loading finished, or an image request failed. | Check completion and successful image dimensions, and investigate failed requests rather than treating completion alone as success. |
| Lower sections are missing despite scrolling | Content may use incremental loading, a nested scroll container, or an interaction gate. | Reproduce the actual trigger sequence and wait for the expected section or state. A single document-level scroll may not reach nested or gated content. |
| Sticky headers or controls repeat in the full-page image | The framework may stitch images captured at different scroll positions. | Use a component comparison where appropriate, or apply a controlled screenshot-only adjustment to the sticky element. Cypress documents this behavior for full-page capture. |
| Diffs vary even when the page seems unchanged | Data, viewport, rendering environment, or small dynamic regions differ between runs. | Stabilize the data and environment, then mask only the specific region that is expected to vary. |
| The screenshot is stable but still misses a change | Stability checks do not guarantee full-page scope or the intended application state. | Verify capture mode, trigger the missing content, and assert readiness independently of screenshot stabilization. |
8. Decide who owns baselines and review
With local open-source image diffing, the team manages baselines, CI artifacts, and rendering consistency. A managed visual-testing service may handle baseline review and rendering across browsers or viewport widths. Choose based on the coverage and workflow your team needs: integration, baseline ownership, data handling, approval process, and cost. Cypress discusses open-source and commercial paths, including Percy, Sauce Labs Visual, and SmartBear VisualTest, in its visual testing guidance; verify current vendor terms before selecting a service.
Best Value
- 【Featured A-Z Tabs & Untitle for Security】Our password books have recognizable alphabetical tabs with the colorful design allow you to locate quickly and save time. The anonymous cover of our password keeper is unobtrusive and stays secure.
- 【Premium Quality & Perfect Size】This password journal features a eco-leather hardcover and 100gsm no-bleed paper, equipped with an elastic band, inner pocket, pen loop and bookmark. It comes in medium format (5.3 x 7.7 inches) which is the perfect size you need.
- 【Clean Layout & Plenty of Space】 Each tab has 6 pages with 4 entries per page and contains more than 552 passwords in our password organizer. This password notebook also provides more password space in case you need to change your password.
- 【Perfect Organization & Safe Placement】We ensure this password log book provides you with a secure space to keep passwords and web addresses. You won't have to worry about passwords being leaked or hacked.
- 【Thoughtful Gift & Warm Heart】 Considering for practical gifts for family or friends? Our specially designed internet password book is sturdy and easy to use. Ideal for any occasion, it's a gift that truly shows care.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a screenshot or PDF; its full-page capture loads lazy images. Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot, and each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed; response headers report the page verdict and billing status. Its MCP server provides 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.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →For the full option list and API details, see the ScreenshotNeo documentation. This cURL request saves a full-page WebP screenshot:
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://example.com
-d full_page=true
-o shot.webpSign up for 1,000 free screenshots a month with no card.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
