File upload (cy.selectFile) in Cypress - Framework Patterns

Framework Mode - File upload (cy.selectFile)

Folder Structure

  cypress/
  ├── e2e/
  │   ├── fileUpload.spec.js       # Test files for file upload scenarios
  │   └── otherTests.spec.js
  ├── fixtures/
  │   └── sampleFile.txt           # Sample files used for upload tests
  ├── support/
  │   ├── commands.js              # Custom commands including file upload helpers
  │   └── e2e.js                   # Global support and setup
  cypress.config.js                # Cypress configuration file
  

Test Framework Layers

• Test Layer: Contains test specs like fileUpload.spec.js that use cy.selectFile() to simulate file uploads.
• Fixtures Layer: Stores sample files (e.g., sampleFile.txt) used in upload tests to simulate real user files.
• Support Layer: Includes commands.js where custom commands or helpers for file upload can be added for reuse.
• Configuration Layer: cypress.config.js manages environment settings, base URLs, and browser options.

Configuration Patterns

• Use cypress.config.js to set base URL and environment variables for different test environments (dev, staging, prod).
• Store file paths for upload in fixtures folder and reference them in tests using cy.fixture() or direct path in cy.selectFile().
• Use environment variables to switch browsers or toggle test modes (headless vs headed) via CLI or config.
• Keep sensitive data like credentials out of test files; use environment variables or Cypress.env() securely.

Test Reporting and CI/CD Integration

• Integrate Cypress with CI tools (GitHub Actions, Jenkins, GitLab CI) to run file upload tests automatically on code changes.
• Use Cypress Dashboard or plugins like mochawesome for detailed test reports showing pass/fail status of file upload tests.
• Configure screenshots and video recording in cypress.config.js to capture file upload test runs for debugging.
• Fail fast on upload errors to quickly identify broken file upload functionality.

Best Practices

• Keep sample upload files small and representative, stored in fixtures for easy reuse.
• Use cy.selectFile() with clear selectors and explicit assertions to verify upload success.
• Abstract file upload steps into custom commands in support/commands.js for cleaner tests.
• Test multiple file upload scenarios: single file, multiple files, invalid file types.
• Ensure tests clean up any uploaded files or reset state to avoid flaky tests.

Self Check

Where would you add a new sample file to test uploading a PDF document in this framework structure?

Key Result

Organize Cypress tests with clear folder layers: e2e tests, fixtures for files, support for commands, and config for environment settings.