Full-page screenshots in Cypress - Framework Patterns

Framework Mode - Full-page screenshots

Folder Structure

cypress/
├── e2e/                  # Test specs
│   └── fullPageScreenshot.cy.js
├── fixtures/             # Test data files
│   └── example.json
├── support/              # Custom commands and reusable code
│   ├── commands.js       # Custom commands like full-page screenshot
│   └── e2e.js            # Global support file
cypress.config.js         # Cypress configuration
package.json             # Project dependencies and scripts

Test Framework Layers

• Test Specs (cypress/e2e): Contains test files that run scenarios, e.g., capturing full-page screenshots.
• Support Layer (cypress/support): Holds reusable commands and setup code. For full-page screenshots, custom commands can be added here.
• Fixtures (cypress/fixtures): Stores test data files, like JSON, to keep tests clean and data-driven.
• Configuration (cypress.config.js): Defines environment settings, browser options, and screenshot behavior.
• Utilities: Can be added inside support or a separate folder for helper functions if needed.

Configuration Patterns

• Environment Variables: Use cypress.env.json or env section in cypress.config.js to store URLs, credentials, or flags.
• Browser Settings: Configure browser launch options in cypress.config.js to support different browsers.
• Screenshot Settings: Customize full-page screenshot behavior with capture: 'fullPage' option in test commands.
• Test Tags or Suites: Use describe blocks or custom tags to organize tests that require full-page screenshots.

Test Reporting and CI/CD Integration

• Screenshot Artifacts: Full-page screenshots are saved automatically on test failure or manually via commands, useful for debugging.
• Reporters: Integrate with reporters like mochawesome to embed screenshots in HTML reports.
• CI/CD Pipelines: Configure pipelines (GitHub Actions, Jenkins, etc.) to run Cypress tests and collect screenshots as build artifacts.
• Dashboard Service: Use Cypress Dashboard for advanced test insights and screenshot storage.

Framework Design Principles

1. Use Custom Commands: Create a reusable command for full-page screenshots to keep tests clean and consistent.
2. Explicit Waits: Ensure the page is fully loaded before capturing screenshots to avoid partial captures.
3. Organize Screenshots: Store screenshots in a clear folder structure with meaningful names for easy retrieval.
4. Use Environment Configs: Control when to take full-page screenshots (e.g., only on failures or specific environments) via config.
5. Keep Tests Independent: Each test should handle its own screenshot logic without relying on others.

Self Check

Where would you add a new custom command to capture a full-page screenshot in this Cypress framework structure?

Key Result

Organize Cypress tests with clear folder structure, use custom commands for full-page screenshots, and integrate reporting for effective debugging.