TypeScript support for custom commands in Cypress - Framework Patterns

Framework Mode - TypeScript support for custom commands

Folder Structure

  cypress/
  ├── e2e/                  # Test specs written in TypeScript
  │   └── example.cy.ts
  ├── support/              # Support files and custom commands
  │   ├── commands.ts       # Custom commands definitions
  │   ├── index.ts          # Support file to import commands and setup
  │   └── types.d.ts        # TypeScript declaration for custom commands
  ├── fixtures/             # Test data files
  │   └── example.json
  cypress.config.ts          # Cypress configuration in TypeScript
  tsconfig.json              # TypeScript configuration
  package.json
  

Test Framework Layers

• Test Specs (cypress/e2e): Write tests using custom commands with full TypeScript support.
• Custom Commands (cypress/support/commands.ts): Define reusable commands extending Cypress commands.
• Type Declarations (cypress/support/types.d.ts): Extend Cypress namespace to add typings for custom commands.
• Support Index (cypress/support/index.ts): Import custom commands and setup global hooks.
• Configuration (cypress.config.ts): Configure Cypress settings, including TypeScript support.

Configuration Patterns

• TypeScript Setup: Use tsconfig.json to configure compiler options for Cypress and support files.
• Custom Commands Declaration: Use cypress/support/types.d.ts to declare custom commands in the Cypress namespace for IntelliSense and type checking.
• Import Commands: Import commands.ts in index.ts to register commands globally.
• Environment Variables: Use cypress.config.ts to manage environment-specific settings and credentials securely.

Test Reporting and CI/CD Integration

• Use Cypress built-in reporters or plugins like mochawesome for detailed HTML and JSON reports.
• Configure cypress.config.ts to enable video recording and screenshots on failure for better debugging.
• Integrate Cypress tests in CI/CD pipelines (GitHub Actions, GitLab CI, Jenkins) using npx cypress run with TypeScript support.
• Publish reports as artifacts in CI to track test results over time.

Best Practices

• Strong Typing: Always declare custom commands in types.d.ts to get autocomplete and avoid runtime errors.
• Single Responsibility: Keep custom commands focused on one task for easier maintenance and reuse.
• Import Commands Once: Import all custom commands in support/index.ts to ensure they are available globally.
• Use Fixtures: Combine custom commands with fixtures for data-driven testing.
• Keep Config Clean: Manage environment variables and browser options in cypress.config.ts for flexibility.

Self Check

Where would you add a new custom command for logging in a user with TypeScript support in this framework structure?

Key Result

Organize Cypress tests with TypeScript by defining custom commands in support files with proper type declarations for strong typing and global availability.