How to Take a Full-Page Website Screenshot Using Cypress in India
Use Cypress’s built-in `cy.screenshot()` command with `capture: 'fullPage'` to save the whole rendered page. Learn how to make captures reliable and find the output.
Use Cypress’s built-in cy.screenshot() command with { capture: 'fullPage' }. Cypress scrolls the application under test from top to bottom, captures successive views, and stitches them into one image. Wait for the page state you need before capturing; then find the file in cypress/screenshots by default.
cy.visit('/page-to-capture')
// Replace this with an assertion that represents your page's ready state.
cy.get('[data-testid="page-ready"]').should('be.visible')
cy.screenshot('page-full', { capture: 'fullPage' })
The selector is an example. Use a real heading, loaded content, or another application condition that means the page is ready for your test. The same Cypress API applies in India; the location does not change the command.
1. Capture the full page reliably
Add the capture to a Cypress test after navigation and after the application reaches the state you want to save. For a layout that depends on screen width, set the viewport before visiting the route.
describe('page screenshots', () => {
it('captures the full report page', () => {
cy.viewport(1440, 900)
cy.visit('/reports/monthly')
cy.get('main h1').should('be.visible')
cy.get('[data-testid="report-row"]').should('have.length.greaterThan', 0)
cy.screenshot('monthly-report-full', { capture: 'fullPage' })
})
})
Replace the route and assertions with your application’s. If content depends on an API request, you can wait for an aliased request and then assert that the resulting content is visible:
cy.intercept('GET', '/api/reports/monthly').as('monthlyReport')
cy.visit('/reports/monthly')
cy.wait('@monthlyReport')
cy.get('[data-testid="report-ready"]').should('be.visible')
cy.screenshot('monthly-report-full', { capture: 'fullPage' })
Waiting for a meaningful condition is more dependable than a blind fixed delay: it ties the screenshot to the application state the test cares about. Cypress notes that the application can change around the time an asynchronous screenshot is captured, so establish the intended state first.
2. Choose the right capture mode
| Mode | What it captures | Use it for |
|---|---|---|
fullPage |
The application under test from top to bottom, captured while scrolling and stitched together. | A whole-page artifact. |
viewport |
The application content visible in the current viewport. | A screenshot of the current visible state. |
runner |
The browser viewport with the Cypress Command Log. | A view that includes Cypress runner context. |
For a clean full-page image, specify fullPage explicitly. Cypress uses runner capture for automatic failure screenshots, so an automatic failure artifact is not equivalent to a manually requested full-page capture.
3. Set the viewport and output location
The default Cypress viewport is 1000 by 660 pixels. Set a viewport in the test when the page’s responsive layout matters:
cy.viewport(1440, 900)
cy.visit('/page-to-capture')
cy.get('main').should('be.visible')
cy.screenshot('desktop-page', { capture: 'fullPage' })
Cypress also accepts named viewport presets through cy.viewport(). A viewport preset controls the application viewport dimensions; it does not simulate a physical device’s pixel ratio. In particular, Cypress documents that devicePixelRatio is not simulated. Do not treat a mobile-sized viewport as proof of identical rendering on a phone.
Screenshots are saved to cypress/screenshots by default. Cypress organizes output in relation to the spec path and test name when a name is not supplied. Give the screenshot a descriptive name to make artifacts easier to identify. The screenshots folder can be changed through Cypress configuration; consult the configuration reference for the option supported by your installed version.
4. Make visual captures repeatable
- Keep the viewport dimensions the same across runs.
- Use controlled or stable test data when the page content can change.
- Wait for the meaningful content and state, rather than relying on elapsed time alone.
- Account for content that changes over time; mask or stabilize a genuinely dynamic region if your visual comparison workflow supports it.
- Keep the rendering environment consistent where visual differences matter. Operating systems, browser versions, display scaling, and fonts can affect rendered output.
Full-page capture is a scroll-and-stitch operation. The exact resulting image dimensions depend on the rendered page and browser environment, so do not infer a guaranteed pixel height from the viewport alone. Fixed and sticky elements can also behave differently across pages during scrolling; inspect the artifact for the page you are capturing rather than assuming every such element will appear in one universal position.
5. Run the test and locate the artifact
Run the relevant spec using your project’s usual Cypress command. Manual calls to cy.screenshot() work in both interactive and run mode. Cypress’s automatic failure screenshots are produced during cypress run, not cypress open, and automatic failure capture is configurable.
Look in cypress/screenshots unless your project changes the screenshot folder. In CI, screenshots from runs can also be viewed in Cypress Cloud; whether those artifacts are available depends on your project’s setup.
6. Troubleshooting
| Symptom | Likely cause | What to do |
|---|---|---|
| The image only shows the visible screen. | The capture used the viewport mode or omitted the intended mode. | Call cy.screenshot('name', { capture: 'fullPage' }). |
| The image is missing content or shows a loading state. | The screenshot ran before the application finished rendering the required content. | Wait for a specific heading, loaded element, or aliased request, then assert the resulting page state before capturing. |
| The screenshot includes Cypress controls or the Command Log. | The capture is a runner screenshot, often an automatic failure artifact. | Make a manual screenshot call with capture: 'fullPage' for the page artifact. |
| The screenshot is saved somewhere unexpected. | The project may have changed its screenshot folder, or Cypress is organizing output by spec and test name. | Check Cypress configuration and the spec’s output path under the configured screenshots folder. Supply a descriptive screenshot name. |
| Images or lower-page content are absent. | Content may load only after scrolling, or may depend on an unfinished request or changing application state. | Wait for the content’s actual ready condition before capturing. Check the resulting artifact; full-page capture scrolls and stitches, but page-specific loading behavior still matters. |
| A mobile screenshot differs from a real phone. | A viewport size is not a full physical-device simulation. | Use the viewport to test responsive dimensions, and remember Cypress does not simulate devicePixelRatio. |
| Visual output changes across machines. | Browser, operating system, display scaling, fonts, or changing data differ. | Keep the rendering environment and test data steady for comparisons; inspect dynamic regions separately. |
7. Performance, reliability, and cost
A full-page capture requires Cypress to scroll through the application and stitch screenshots. Very long pages and pages with substantial content therefore involve more capture work than a single viewport image. Keep the screenshot to the page and state your test needs, and avoid repeating captures unnecessarily.
For reliability, synchronize on application state and control data that changes between runs. For visual comparisons, differences in fonts, browser versions, operating systems, and display scaling can produce image changes even when the test logic is unchanged. The research sources do not establish a universal capture time, output-size limit, or cost for Cypress; those depend on the project and its execution environment.
Or skip the browser setup
If you need a website screenshot outside a Cypress test, ScreenshotNeo provides a screenshot API and MCP server. One GET request returns an image or PDF. Its capture options include full-page output, viewport and device presets, custom CSS and JavaScript, wait conditions, and more. See the ScreenshotNeo API documentation for parameters.
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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));
- Cookie banners, popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
- Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed. Response headers indicate the page verdict and billing status.
- An MCP server lets AI agents, including Claude and Cursor, take screenshots with tools for screenshots, page information, and PDF capture.
- 1,000 screenshots per month are free with no card. Paid plans start at $5 for 3,000 screenshots; every feature is on every plan.
Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.
Frequently asked questions
Does Cypress need a plugin for full-page screenshots?
No. Cypress’s built-in cy.screenshot() supports full-page capture through the capture option.
Does full-page mode capture the Cypress runner?
No. It captures the application under test. Runner mode includes the Cypress Command Log.
Does setting a mobile viewport emulate a phone’s pixel density?
No. Cypress states that devicePixelRatio is not simulated by its viewport API.
Can I use the screenshot for visual regression?
Yes, it can serve as an image artifact for a comparison workflow. Stable data, viewport dimensions, and rendering environments help make comparisons meaningful.


