Screenshot capture (cy.screenshot) in Cypress - Framework Patterns

Framework Mode - Screenshot capture (cy.screenshot)

Folder Structure

  cypress/
  ├── e2e/                  # Test specs
  │   ├── login.cy.js       # Example test file
  │   └── dashboard.cy.js
  ├── fixtures/             # Test data files (JSON)
  │   └── users.json
  ├── support/              # Custom commands and utilities
  │   ├── commands.js       # Custom Cypress commands
  │   └── e2e.js            # Support file loaded before tests
  ├── screenshots/          # Automatically saved screenshots
  └── videos/               # Automatically saved videos
  cypress.config.js         # Cypress configuration file
  

Test Framework Layers

• Test Specs (e2e/): Contains test files where cy.screenshot() is called to capture screenshots during test execution.
• Support Layer (support/): Contains reusable commands and hooks to capture screenshots on test failures or at specific points.
• Fixtures (fixtures/): Holds test data used by tests but not directly related to screenshots.
• Configuration (cypress.config.js): Defines environment settings, screenshot options, and folder paths.
• Output Folders (screenshots/, videos/): Stores screenshots and videos generated during test runs.

Configuration Patterns

Use cypress.config.js to configure screenshot behavior:

  import { defineConfig } from 'cypress'

  export default defineConfig({
    e2e: {
      screenshotsFolder: 'cypress/screenshots',
      video: false, // optional
      screenshotOnRunFailure: true, // auto screenshot on failure
      env: {
        baseUrl: 'https://example.com',
        userEmail: '[e-mail]',
        userPassword: 'password123'
      }
    }
  })
  

Use environment variables or cypress.env.json for sensitive data.

Call cy.screenshot('name') in tests or hooks to capture screenshots at desired points.

Test Reporting and CI/CD Integration

• Screenshots are saved automatically in cypress/screenshots/ with folder structure matching test files.
• Integrate Cypress with CI tools (GitHub Actions, Jenkins, GitLab CI) to run tests and collect screenshots on failures.
• Use Cypress Dashboard service or third-party reporters to view test results and screenshots in one place.
• Configure CI to archive screenshots as artifacts for debugging failed tests.

Best Practices

1. Use descriptive screenshot names: Pass meaningful names to cy.screenshot('login-page') to easily identify screenshots.
2. Capture screenshots on failures: Enable screenshotOnRunFailure to automatically capture failures.
3. Keep screenshots organized: Use folder structure and naming conventions to avoid clutter.
4. Use screenshots for debugging: Review screenshots to understand UI state when tests fail.
5. Limit screenshots to important steps: Avoid excessive screenshots to save storage and speed up tests.

Self Check

Where in this folder structure would you add a custom command to capture a screenshot after every test step?

Key Result

Organize Cypress tests with clear folder structure and use cy.screenshot() in tests and support files for effective screenshot capture.