cypress-real-events for native events - Framework Patterns

Framework Mode - cypress-real-events for native events

Folder Structure

  cypress-real-events-project/
  ├── cypress/
  │   ├── e2e/                  # Test specs
  │   │   └── example.cy.js     # Example test using real events
  │   ├── support/              # Support files and commands
  │   │   ├── commands.js       # Custom commands including real events
  │   │   └── e2e.js            # Support file to import plugins
  │   └── fixtures/             # Test data files
  ├── cypress.config.js         # Cypress configuration file
  ├── package.json              # Project dependencies and scripts
  └── README.md                 # Project overview
  

Test Framework Layers

• Test Specs (cypress/e2e/): Contains test files that use cypress-real-events to simulate native user interactions like real clicks, typing, and hover.
• Support Layer (cypress/support/): Holds custom commands and setup code. Here you import cypress-real-events plugin and add commands to use native events easily.
• Fixtures (cypress/fixtures/): Stores static test data such as JSON files for data-driven testing.
• Configuration (cypress.config.js): Defines environment settings, browser options, and plugin integration.
• Utilities (optional): Helper functions or reusable code can be added here if needed.

Configuration Patterns

Use cypress.config.js to manage settings:

• Environment Variables: Define env object for URLs, credentials, or flags.
• Browser Settings: Specify default browser or allow CLI override.
• Plugin Integration: Import cypress-real-events in cypress/support/e2e.js with import 'cypress-real-events/support'.
• Custom Commands: Add commands in commands.js to wrap real events for easy reuse.

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

  export default defineConfig({
    e2e: {
      baseUrl: 'https://example.com',
      supportFile: 'cypress/support/e2e.js',
      env: {
        username: 'testuser',
        password: 'password123'
      }
    }
  })
  

Test Reporting and CI/CD Integration

• Test Reports: Use Cypress built-in reporter or integrate with mochawesome for detailed HTML reports.
• Video and Screenshots: Enable Cypress video recording and screenshots on failure for debugging native event tests.
• CI/CD: Run Cypress tests with cypress-real-events in pipelines (GitHub Actions, Jenkins, GitLab CI) by installing dependencies and running npx cypress run.
• Headless and Headed Modes: Tests can run headless or headed to visually verify native event interactions.

Framework Design Principles

1. Use Real User Events: Prefer cypress-real-events commands like realClick() and realType() to simulate actual user behavior instead of default Cypress events.
2. Keep Tests Independent: Each test should set up its own state to avoid flaky results when using native events.
3. Explicit Waits: Use Cypress built-in waits or assertions to ensure elements are ready before firing real events.
4. Custom Commands: Wrap real events in custom commands for readability and reuse.
5. Accessibility Considerations: Test keyboard navigation and focus management with real keyboard events.

Self Check

Where would you add a new custom command to simulate a native double-click event using cypress-real-events in this framework structure?

Answer: In the cypress/support/commands.js file, so it can be reused across all tests.

Key Result

Use cypress-real-events plugin integrated in support files to simulate native user interactions in Cypress tests.