Hardware FixRecommendedDevice not working? Your driver may be the problemCheck updates for common hardware issues.Fix DriversHalloween DealsAmazon USHalloween week deals: useful picks before month-endAmazon US: current deals, useful picks and tech finds.Check DealsClean PCRecommendedOne scan can reveal what keeps slowing WindowsLook for cleanup and repair opportunities.Run Scan×
FREEDOM251

Freedom251 › Blog › Cypress

How to Fix Screenshot Monitoring That Misses Changes Below the Fold

By Freedom251 Team · · 6 min read

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

If a screenshot monitor sees only the top of a page, first confirm it is taking a full-page capture rather than a viewport or element capture. Then make the page load the below-the-fold content before taking the screenshot: full-page capture changes the image’s extent, but does not guarantee lazy-loaded or interaction-gated content has rendered.

1. Confirm what your monitor is capturing

Check the screenshot artifact itself, along with the framework, viewport dimensions, and configured capture mode. A viewport screenshot covers only what is visible; an element or clipped-region screenshot covers only its target. Full-page capture is a separate setting in Playwright and Puppeteer, and their documented fullPage option defaults to false. Playwright’s Page API and Puppeteer’s ScreenshotOptions describe those options.

As an Amazon Associate I earn from qualifying purchases.

Cypress offers viewport, fullPage, and runner screenshot modes. Its runner mode can include Cypress UI, so confirm that your comparison uses the application image you intended rather than test-runner chrome. See the Cypress screenshot API.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

2. Trigger content that loads below the fold

Full-page capture expands the captured area; it does not necessarily cause every section to load. Images and other content may load only as they approach the viewport, after an interaction, or when a particular application state is reached. Reproduce the relevant user action before capturing.

  • For a simple lazy-image page, scroll through the relevant sections before the snapshot.
  • For incremental loading or infinite scroll, use a controlled sequence of scrolls and wait for each batch to appear.
  • For nested scroll containers, scroll the container that actually owns the content.
  • For interaction-gated sections, perform the required click, expansion, or other action before capture.

The exact trigger depends on the application. Percy’s lazy-loading guide demonstrates scrolling to the bottom and checking image readiness before a snapshot; that technique is useful for lazy images, not a universal readiness test for every kind of content.

3. Wait for evidence that the page is ready

Prefer a condition tied to the content you need over an arbitrary sleep. For images, check that the expected image is complete and has a nonzero natural width, as in Percy’s example. Also verify that the target section exists and reflects the intended state. For data-backed content, wait for the relevant response or application state. These checks should match the monitored page; a loaded image alone does not establish that unrelated content is ready.

Keep page readiness separate from screenshot stabilization. Playwright’s toHaveScreenshot waits until two consecutive screenshots are identical before comparing with the expected image. That can reduce transient visual differences, but it does not trigger lazy content or prove that the page reached the state your test needs. See Playwright’s PageAssertions documentation.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #2
AT-A-GLANCE Undated Website Address Book and Password Keeper, Black, 3.63 x 6.13 x .21 Inches (80-500-05)
  • 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

4. Capture the surface that matches the regression

Use a full-page screenshot for page-wide coverage

In Playwright, call page.screenshot({ fullPage: true }). In Puppeteer, enable its fullPage screenshot option. Cypress’s full-page mode captures the application from top to bottom by scrolling and stitching captures. That stitching can make fixed or sticky elements appear more than once; inspect the resulting image for this artifact. Cypress documents the behavior in its screenshot command reference.

Use an element or region for component-level coverage

If the contract is about one card, menu, or other component, compare that element or a deliberate clipped region instead of the whole page. This reduces unrelated changes elsewhere in the layout from obscuring the result. Cypress’s visual testing guidance recommends deliberate snapshots and discusses element-level diffs.

5. Make captures repeatable

  • Keep viewport dimensions and rendering environment consistent between baseline and current captures.
  • Control changing API responses with fixtures or another stable test-data strategy.
  • Mask only a small, genuinely dynamic region when it cannot be made deterministic; do not raise a page-wide failure threshold to conceal unrelated variation.
  • Ensure the readiness checks and user actions are the same each time the monitor runs.

Cypress discusses rendering consistency, fixtures, and targeted masking in its visual testing guidance. These controls improve comparison repeatability; they do not substitute for triggering and verifying the below-the-fold state.

6. Framework-specific capture examples

Playwright

After navigating and applying page-specific readiness checks, enable full-page capture explicitly:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
await page.screenshot({ path: 'page.png', fullPage: true });

For example, an image-focused page can be scrolled and checked before the screenshot. Adapt the selector and loading strategy to your application:

await page.evaluate(async () => {
  const step = Math.max(1, window.innerHeight);
  for (let y = 0; y < document.documentElement.scrollHeight; y += step) {
    window.scrollTo(0, y);
    await new Promise(resolve => setTimeout(resolve, 100));
  }
  window.scrollTo(0, 0);
});

await page.locator('img').evaluateAll(async images => {
  await Promise.all(images.map(img => {
    if (img.complete) return Promise.resolve();
    return new Promise(resolve => {
      img.addEventListener('load', resolve, { once: true });
      img.addEventListener('error', resolve, { once: true });
    });
  }));
});

await page.screenshot({ path: 'page.png', fullPage: true });

This example scrolls the document and waits for each image to load or error, but it is not a universal solution: it does not handle every nested scroller or interaction-gated application, and an error event does not mean the image loaded successfully. Add assertions for the actual expected content and state. The documented API and option are in the Playwright Page API.

Cypress

Use the full-page screenshot option when the whole application page is the intended surface:

cy.get('img').should($images => {
  $images.each((_, image) => {
    expect(image.complete).to.equal(true);
    expect(image.naturalWidth).to.be.greaterThan(0);
  });
});

cy.screenshot('page', { capture: 'fullPage' });

That image check is appropriate only when the relevant content is images and they have already been triggered to load. For application-specific content, assert the relevant section or state instead. Cypress’s capture modes and options are documented in the screenshot API and screenshot command.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Puppeteer

Enable full-page capture explicitly after your own trigger and readiness checks:

await page.screenshot({ path: 'page.png', fullPage: true });

For a component-level comparison, ElementHandle.screenshot() can target an element and attempts to scroll a hidden element into view. See the Puppeteer screenshots guide and ScreenshotOptions.

Best Value
Sale
Password Book with Alphabetical Tabs, Password Keeper for Seniors 5.3"x7.7"
  • 【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.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

7. Troubleshoot the common failure modes

Symptom Likely cause What to check or change
Only the first screen appears Viewport capture, or full-page mode is not enabled. Inspect the framework’s capture setting and the artifact dimensions. Enable full-page capture where appropriate.
The page is full-height but lower images are blank Images were not triggered to load, or the screenshot happened before they finished. Scroll through the relevant sections, then check image completion and nonzero natural width before capture.
Cards or sections are missing Content may require interaction, application readiness, or scrolling a nested container. Reproduce the user action, target the owning scroller, and assert the expected section and state.
Sticky headers or floating controls repeat Cypress full-page capture scrolls and stitches images, which can repeat fixed or sticky elements. Inspect the stitched output. Consider a controlled screenshot hook that changes positioning temporarily, or capture the relevant component instead.
Diffs vary between runs Data, rendering environment, or transient page state may differ. Stabilize the viewport and environment, control changing responses, and mask only a small dynamic region if necessary.
The screenshot is stable but still wrong Screenshot stabilization settled on the wrong or incomplete application state. Strengthen application-specific readiness and lazy-content triggers. Consecutive matching images do not prove the intended content loaded.

8. Choose a monitoring workflow your team can own

Local visual diffing gives a team direct control over baselines and CI artifacts, but the team must manage them and maintain rendering consistency. A managed service may handle baseline review and cross-browser or viewport rendering. Compare the actual browser and viewport coverage, integration, baseline ownership, data handling, approval workflow, and current commercial terms before choosing. Cypress identifies Percy, Sauce Labs Visual, and SmartBear VisualTest among services with Cypress integrations, but its guidance does not establish their current pricing or commercial terms.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. A single GET request can return a PNG, JPEG, WebP, or PDF. For an external monitor, API call, or batch capture, it can avoid maintaining your own browser setup; it does not replace application-specific visual assertions or tests.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo documentation for options and response details. Cookie banners are accepted before capture and 60+ known consent platforms, newsletter popups, and chat widgets can be removed; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo’s free plan.

Frequently Asked Questions

Does full-page capture guarantee every section is loaded?

No. It extends the captured area, but lazy or interaction-gated content may still need to be triggered and checked.

Can I use an image load check for every type of below-the-fold content?

No. Image completion checks only establish image readiness; other content needs an application-specific condition.

Quick Recap

SaleBestseller No. 1
Bestseller No. 2
AT-A-GLANCE Undated Website Address Book and Password Keeper, Black, 3.63 x 6.13 x .21 Inches (80-500-05)
AT-A-GLANCE Undated Website Address Book and Password Keeper, Black, 3.63 x 6.13 x .21 Inches (80-500-05)
Bookbound planner helps you keep track of passwords and favorite websites; Room for over 200 entries; 3.5 x 6 inch page sizes
$9.99

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.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

CypressLazy loadingPlaywrightPuppeteerscreenshot monitoringvisual regression testing

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Recommended PC Tool
Recommended PC Tool
PC Slower Than It Used to Be?Free scan - under a minute
Outdated Drivers Are Slowing You DownFree scan - exact matches

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.