Cypress Full-Page Screenshot Cuts Off Content: How to Fix It

If a Cypress full-page screenshot cuts off content, first confirm you are capturing the application with capture: 'fullPage', remove any clip crop, and check whether the missing content is below the page, beyond horizontal overflow, or clipped by the layout. Cypress builds a full-page image by scrolling vertically and stitching captures, so sticky elements, dynamic content, and unusual page dimensions can affect the result.

Start with this explicit capture:

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

Then follow the diagnostic steps below. The right fix depends on your Cypress version, browser, operating system, viewport, page CSS, and screenshot options. Cypress issue reports are useful leads, but their particular causes are not universal explanations.

1. Confirm Cypress is capturing the full application

Use capture: 'fullPage' when you want the application from top to bottom:

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

Cypress documents that full-page capture scrolls the application from top to bottom, takes screenshots at successive positions, and stitches them together. That is different from a single browser-native full-document bitmap.

Capture mode	What it captures	When to use it
`fullPage`	The application from top to bottom, using vertical scrolling and stitching	Long pages where you need the full vertical page
`viewport`	The current application viewport	A specific visible state or a viewport-sized component
`runner`	The browser viewport together with the Cypress Command Log	Debugging evidence that should include the test runner

Check the actual options on the screenshot call and any project defaults. Automatic screenshots taken on test failure may be coerced to runner, so do not assume a failure screenshot uses the same mode as an explicit cy.screenshot() command.

2. Remove an explicit crop while diagnosing

A clip option tells Cypress to crop the final image to the requested x, y, width, and height. A crop can make a successful full-page capture look truncated. Temporarily remove it and compare:

// Diagnostic capture: no clip option
cy.screenshot('page', { capture: 'fullPage' })

If the missing area returns, inspect how the clip rectangle is calculated and whether it uses the same coordinate space and dimensions as the current viewport. Add the crop back only after confirming its bounds cover the intended region.

3. Locate where the image ends

Compare the saved PNG’s pixel dimensions with the expected document dimensions. Identify whether it ends at the viewport boundary, at a particular crop boundary, or after a stitched vertical segment. This comparison is a practical diagnostic step; there is no one dimensions check that identifies every cause.

Missing content is vertically below the visible viewport: confirm full-page mode and inspect whether the page can scroll vertically.
Missing content is horizontally outside the viewport: vertical full-page scrolling may not capture the horizontal overflow. Reproduce this separately and verify behavior with your installed Cypress version.
The image is viewport-sized despite a full-page request: check the effective capture mode, automatic failure capture behavior, crop options, and configured viewport.
The image has the expected outer size but an interior region is absent: inspect page layout, overflow containers, loading state, and content visibility at capture time.

4. Handle sticky and fixed elements

Fixed and sticky elements can appear repeatedly in a stitched image because they remain attached to the viewport while Cypress scrolls. Cypress suggests temporarily changing the affected element to position: absolute for the capture and restoring its prior position afterward.

cy.get('.sticky-header').then(($header) => {
  const previousPosition = $header[0].style.position

  cy.wrap($header)
    .invoke('css', 'position', 'absolute')

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

  cy.wrap($header).then(($el) => {
    $el[0].style.position = previousPosition
  })
})

This illustrates the sequence, but a Cypress command failure can prevent later commands from running. For a test suite that must always restore the page, put the temporary style change and restoration into a helper with cleanup appropriate to your test structure, or capture in a separate test setup that is discarded afterward. Check whether changing positioning shifts the document: absolute can alter layout, so verify the resulting content alignment rather than treating it as a universal fix.

5. Check page dimensions, grid layout, and horizontal overflow

Inspect CSS that constrains the document or makes the viewport the entire page. Examples worth checking include:

html, body { width: 100vw; height: 100vh; }
A CSS grid whose container or rows are sized to the viewport
An application with no top-level vertical scrollbar because an inner container handles scrolling
A very large cy.viewport() or configured viewport
A horizontally scrolling page whose content extends beyond the viewport width

Reduce a suspected layout issue to a minimal reproduction. Compare viewport and full-page captures, record the saved image dimensions, and remove unrelated application behavior until the cutoff remains reproducible.

A triaged Cypress issue describes clipping with very large viewport dimensions and a CSS-grid layout on Cypress 12.2.0 and Windows 10 Pro. That report is a version- and environment-specific lead, not proof that large viewports or CSS grid explain other cutoffs. Another issue report describes incomplete representation of horizontally scrolling pages by the vertically scrolling method; verify it against your current Cypress version and a small reproduction before choosing a workaround.

6. Wait for the intended page state

Screenshot capture is asynchronous. If the page changes while Cypress is capturing it, the stitched image can contain inconsistent or missing content. Wait for the relevant application state, not an arbitrary delay where a reliable readiness condition is available.

// Wait for a meaningful page condition before capturing
cy.get('[data-testid="results"]')
  .should('be.visible')

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

For pages with lazy-loaded images or content, make the test scroll or otherwise trigger the application’s loading behavior before capturing, then wait for that content to appear. Keep test data deterministic and account for fonts, animations, and other rendering changes when comparing images.

7. Treat scaling as a separate diagnosis

Cypress sets the screenshot API’s scale option to false by default. A global scale: true setting is available, but the available documentation does not establish it as a general fix for cut-off content. Change scaling only if the observed output indicates a scale-related problem, and compare dimensions and content before and after the change.

Runnable Cypress example

This test waits for a meaningful page element and captures the application in full-page mode. Change the route and readiness selector to match your app:

describe('full-page screenshot', () => {
  it('captures the loaded page from top to bottom', () => {
    cy.visit('/catalog')

    cy.get('[data-testid="catalog"]')
      .should('be.visible')

    cy.screenshot('catalog-full-page', {
      capture: 'fullPage'
    })
  })
})

Use the Cypress cy.screenshot() documentation to check the options supported by your installed version. When investigating a defect, retain the screenshot options, effective viewport, browser, operating system, Cypress version, and a minimal page reproduction alongside the image.

Or skip the browser setup

If you need a clean screenshot of a public page rather than a screenshot produced inside a Cypress test, ScreenshotNeo is a website screenshot API and MCP server. Its API returns an image or PDF from one GET request. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners are accepted and removed before capture; newsletter popups and chat widgets are removed too. Each cleanup step can be turned off.
Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Response headers report the page verdict and whether the request was billed.
An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs.
The free plan includes 1,000 screenshots a month with no card. Paid plans start at $5 for 3,000 screenshots.

Troubleshooting checklist

Symptom	Likely cause to check	Next step
Image stops at the viewport bottom	`viewport` capture, automatic failure screenshot, or a page that does not scroll at the top level	Run an explicit `capture: 'fullPage'` command and check the page’s scroll container
Image stops at a precise rectangle	An explicit `clip` option	Remove `clip` and compare, then check its bounds
Header or overlay repeats	Fixed or sticky positioning during vertical stitching	Temporarily adjust positioning, capture, and restore it; verify layout afterward
Bottom content is blank or stale	Lazy loading or changing page state during asynchronous capture	Trigger loading and wait for the target content before capturing
Right side of a wide page is missing	Horizontal overflow outside the vertical full-page capture	Build a minimal reproduction and verify current-version behavior; test the relevant scrolled element or a layout adjustment
Cutoff appears only with a huge viewport or grid	A layout- or environment-specific capture issue	Reduce viewport dimensions, record the environment, and compare modes in a minimal reproduction
Dimensions look unexpectedly scaled	Viewport configuration or screenshot scaling	Inspect effective dimensions; change `scale` only when the output supports that diagnosis

Performance, reliability, and cost

Performance: Full-page capture involves multiple scroll positions and image stitching. Longer pages can therefore take more capture work than a viewport screenshot. The sources provide no universal duration guarantee; measure representative pages in your own CI environment.
Reliability: Stabilize the page and make data, fonts, and layout deterministic. Record browser, operating system, Cypress version, viewport, and capture options so intermittent or environment-specific cutoffs can be reproduced.
Cost: Cypress’s screenshot command is part of your Cypress test workflow. If you use a separate hosted screenshot service, check its current plan and billing terms directly. ScreenshotNeo’s free plan has 1,000 shots per month with no card; paid plans are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free, and every feature is on every plan.

FAQ

Does `fullPage` capture horizontal overflow?

The documented method scrolls vertically from top to bottom. A reported issue describes incomplete horizontal representation, so verify your current version with a minimal page that reproduces the overflow.

Should I always set `scale: true`?

No. It is an available setting, not a documented universal correction for cut-off content. First identify whether the defect is cropping, layout, capture mode, or timing.

Can Cypress compare the screenshot to a baseline?

cy.screenshot() captures an image but does not compare it. Cypress documents visual testing integrations for teams that need baseline comparison and review workflows; those integrations are options for visual regression, not guaranteed fixes for a capture cutoff.