Drag and drop file upload in Cypress - Framework Patterns

Framework Mode - Drag and drop file upload

Folder Structure

  cypress/
  ├── e2e/
  │   ├── dragDropUpload.spec.js       # Test files for drag and drop upload
  │   └── otherFeature.spec.js
  ├── fixtures/
  │   └── sampleFile.png               # Sample files for upload tests
  ├── support/
  │   ├── commands.js                  # Custom commands (e.g., drag and drop upload)
  │   ├── e2e.js                      # Global support file
  │   └── selectors.js                 # Locators for page elements
  └── cypress.config.js                # Cypress configuration file
  

Test Framework Layers

• Test Layer: Contains test scripts in cypress/e2e/ that use drag and drop upload commands.
• Page Objects / Selectors: Defined in cypress/support/selectors.js to keep locators organized and reusable.
• Custom Commands: In cypress/support/commands.js, implement reusable drag and drop file upload commands to simulate user actions.
• Fixtures: Store sample files in cypress/fixtures/ to use for upload testing.
• Configuration: cypress.config.js manages environment settings, base URL, and test options.

Configuration Patterns

• Environment Variables: Use cypress.env.json or cypress.config.js to set different URLs or credentials for dev, staging, and production.
• Browser Selection: Configure browsers in cypress.config.js or via CLI flags to test drag and drop across Chrome, Firefox, etc.
• File Paths: Use relative paths to cypress/fixtures/ for test files to keep tests portable and maintainable.
• Timeouts and Retries: Adjust in config to handle slow drag and drop UI responses.

Test Reporting and CI/CD Integration

• Use built-in Cypress Dashboard or plugins like mochawesome for detailed HTML reports showing pass/fail of drag and drop upload tests.
• Integrate Cypress tests into CI pipelines (GitHub Actions, Jenkins, GitLab CI) to run drag and drop upload tests on every commit or pull request.
• Configure screenshots and video recording on test failures to help debug drag and drop issues.
• Use tags or test grouping to run only drag and drop upload tests when needed.

Best Practices

• Use Custom Commands: Encapsulate drag and drop file upload logic in commands.js for reuse and clarity.
• Keep Locators Simple and Stable: Use data attributes (e.g., data-cy) for drag and drop targets to avoid brittle selectors.
• Use Fixtures for Test Files: Store upload files in fixtures to keep tests consistent and easy to update.
• Explicit Assertions: After upload, assert visible UI changes or API responses to confirm success.
• Handle Asynchronous UI: Use Cypress commands like should and wait to handle drag and drop delays reliably.

Self Check

Where would you add a new custom command to simulate drag and drop file upload in this Cypress framework structure?

Key Result

Organize Cypress drag and drop file upload tests with clear folder structure, custom commands, fixtures, and robust configuration.