File download verification in Cypress - Framework Patterns

Framework Mode - File download verification

Folder Structure

  cypress/
  ├── e2e/
  │   ├── fileDownload.spec.js       # Test files for file download verification
  ├── fixtures/                      # Test data files
  ├── support/
  │   ├── commands.js                # Custom commands (e.g., file download helpers)
  │   ├── e2e.js                    # Global support for tests
  ├── downloads/                    # Folder where downloaded files are saved during tests
  cypress.config.js                 # Cypress configuration file
  package.json                     # Project dependencies and scripts
  

Test Framework Layers

• Test Layer: Located in cypress/e2e/, contains test scripts that verify file downloads by triggering downloads and checking files.
• Support Layer: In cypress/support/commands.js, includes custom commands to handle file download verification like checking file existence and content.
• Fixtures Layer: Holds test data if needed, such as expected file content or URLs.
• Downloads Folder: cypress/downloads/ is configured as the folder where Cypress saves downloaded files during tests for verification.
• Configuration Layer: cypress.config.js sets download folder, base URL, and other environment settings.

Configuration Patterns

• Download Folder Setup: Configure downloadsFolder in cypress.config.js to specify where files are saved.
• Base URL: Use baseUrl in config for environment flexibility.
• Environment Variables: Use env in config or CLI to manage credentials or URLs securely.
• Custom Commands: Define reusable commands in support/commands.js to check file existence and content after download.
• Clean Up: Optionally clear the downloads folder before tests to avoid false positives.

  // cypress.config.js example snippet
  import { defineConfig } from 'cypress'

  export default defineConfig({
    e2e: {
      baseUrl: 'https://example.com',
      downloadsFolder: 'cypress/downloads',
      setupNodeEvents(on, config) {
        // implement node event listeners here if needed
      },
    },
  })
  

Test Reporting and CI/CD Integration

• Test Reports: Use Cypress built-in reporter or integrate with mochawesome for detailed HTML reports showing pass/fail of file download tests.
• Screenshots and Videos: Enable screenshots and video recording in Cypress config to capture test runs, useful for debugging download failures.
• CI/CD Integration: Run Cypress tests in CI pipelines (GitHub Actions, Jenkins, GitLab CI) to verify file downloads on every code change.
• Artifacts: Save downloaded files or reports as build artifacts for audit and troubleshooting.

Best Practices

• Use Custom Commands: Encapsulate file existence and content checks in reusable Cypress commands for clarity and reuse.
• Clean Downloads Folder: Clear the downloads folder before each test to avoid false positives from old files.
• Explicit Waits: Use retries or waits to ensure the file has finished downloading before assertions.
• Validate File Content: Check not only file presence but also file size or content to confirm correct download.
• Keep Tests Independent: Each test should manage its own download and verification to avoid cross-test interference.

Self Check

Where would you add a new custom command to verify that a downloaded file exists and contains expected text?

Key Result

Organize Cypress tests with clear folder structure, custom commands for file checks, and config for download handling.