Using Cypress 5.0, my screenshots only capture the visible area, not the full page. How can I capture a full-page screenshot?

General Discussions
,
1

I am using Cypress 5.0 and have configured the screenshots folder in cypress.json. When running tests using the Cypress runner API programmatically, I set the viewport values to config.viewportWidth = 1080 and config.viewportHeight = 1024.

The issue I’m facing is that the screenshots captured are not of the full page. My web page has scrolling, but the screenshot only captures the visible area. How can I capture a full-page screenshot in Cypress?

Here is my cypress.json configuration:

{
    "projectId": "yvs41u",
    "video": false,
    "integrationFolder": "integration-tests/experiences",
    "testFiles": "**/*.js",
    "fixturesFolder": false,
    "pluginsFile": "plugins/index.js",
    "supportFile": "support/index.js",
    "screenshotsFolder": "build/reports",
    "videosFolder": "build/reports",
    "videoUploadOnPasses": false,
    "trashAssetsBeforeRuns": false,
    "reporter": "mochawesome",
    "chromeWebSecurity": false,
    "reporterOptions": {
        "charts": true,
        "html": false,
        "json": true,
        "reportDir": "cypress/reports/mochawesome",
        "reportTitle": "Archie Integration Testing Suite",
        "reportFilename": "report",
        "overwrite": false,
        "inline": true,
        "inlineAssets": true,
        "timestamp": "dd-mmm-yyyy-HH-MM-ss"
    }
}
2

Hello Punamhans,

By default, Cypress captures only the viewport when taking screenshots. To capture the entire page, you need to configure the screenshot to use the fullPage option:

Cypress.Screenshot.defaults({ capture: 'fullPage' });
cy.screenshot();

With these settings, Cypress will capture the entire page in the screenshot. This can be particularly useful when you need to capture elements below the fold or when the page contains scrolling content.

For further details and examples, you can refer to the Cypress documentation on the screenshot API:

3

Hey Punamhabs,

If you find capturing full-page screenshots in Cypress challenging, you can consider using a dedicated screenshot tool or service.

Tools like Puppeteer, Selenium, or even browser extensions like Fireshot can capture full-page screenshots easily. You can integrate these tools into your Cypress tests to capture full-page screenshots when needed.