Full-page screenshots in Cypress - Build an Automation Script

Capture full-page screenshot of the homepage

Preconditions (2)

Step 1: Open the browser and navigate to the homepage URL 'https://example.cypress.io'

Step 2: Wait for the page to fully load

Step 3: Take a full-page screenshot of the homepage

✅ Expected Result: A full-page screenshot image file is saved in the Cypress screenshots folder capturing the entire homepage content

Automation Requirements - Cypress

Assertions Needed:

Verify the screenshot file is created after the test runs

Best Practices:

Use cy.visit() to open the page

Use cy.screenshot() with the 'fullPage' option set to true

Use descriptive screenshot names

Avoid hardcoded waits; rely on Cypress automatic waits

Automated Solution

Cypress

describe('Full-page screenshot test', () => {
  it('should capture a full-page screenshot of the homepage', () => {
    cy.visit('https://example.cypress.io');
    // Cypress automatically waits for page load
    cy.screenshot('homepage-fullpage', { capture: 'fullPage' });
  });
});

This test opens the homepage URL using cy.visit(). Cypress waits automatically for the page to load fully before proceeding. Then, cy.screenshot() is called with the option { capture: 'fullPage' } to capture the entire page, not just the visible viewport. The screenshot is saved with the name homepage-fullpage in the default Cypress screenshots folder.

This approach avoids hardcoded waits and uses Cypress best practices for reliable and maintainable tests.

Common Mistakes - 3 Pitfalls

{'mistake': "Using cy.screenshot() without the 'fullPage' option", 'why_bad': 'Only the visible part of the page is captured, missing content below the fold', 'correct_approach': "Always specify { capture: 'fullPage' } to capture the entire page"}

Adding fixed waits like cy.wait(5000) before taking screenshot

Using invalid or non-descriptive screenshot names

Bonus Challenge

Now add data-driven testing to capture full-page screenshots of three different URLs

Show Hint