Test naming conventions in Cypress - Framework Patterns

Framework Mode - Test naming conventions

Folder Structure for Cypress Test Project

  cypress/
  ├── e2e/                  # Test files organized by feature or module
  │   ├── login.cy.js       # Login feature tests
  │   ├── dashboard.cy.js   # Dashboard feature tests
  │   └── userProfile.cy.js # User profile tests
  ├── fixtures/             # Test data files (JSON, etc.)
  │   └── users.json
  ├── support/              # Support files for commands and utilities
  │   ├── commands.js       # Custom Cypress commands
  │   └── index.js          # Support file loaded before tests
  └── plugins/              # Plugins for Cypress
      └── index.js
  cypress.config.js         # Cypress configuration file
  package.json              # Project dependencies and scripts
  

Test Framework Layers in Cypress

• Test Layer (e2e/): Contains test files named clearly to describe the feature and scenario, e.g., login.cy.js.
• Support Layer (support/): Holds reusable commands and utilities to keep tests clean and DRY (Don't Repeat Yourself).
• Fixtures Layer (fixtures/): Stores test data files to separate data from test logic.
• Plugins Layer (plugins/): Extends Cypress functionality if needed.
• Configuration: Central place to set environment variables, base URLs, and browser settings.

Configuration Patterns for Cypress

Use cypress.config.js to manage settings like base URL, test retries, and environment variables.

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

  export default defineConfig({
    e2e: {
      baseUrl: 'https://example.com',
      env: {
        username: 'testuser',
        password: 'password123'
      },
      retries: 2,
      setupNodeEvents(on, config) {
        // implement node event listeners here
      }
    }
  })
  

Use environment variables for sensitive data and different environments (dev, staging, prod).

Test Reporting and CI/CD Integration

• Integrate Cypress with CI tools like GitHub Actions, Jenkins, or GitLab CI to run tests automatically on code changes.
• Use Cypress Dashboard or plugins like mochawesome for detailed test reports with screenshots and videos.
• Configure reports to show test names clearly, reflecting the naming conventions for easy understanding.

Best Practices for Test Naming Conventions in Cypress

1. Be Descriptive: Test file names and test case names should clearly describe what is tested, e.g., login.cy.js or should display error on invalid password.
2. Use Consistent Format: Use lowercase with dots or camelCase for file names, and write test names in plain English sentences.
3. Group by Feature: Organize tests by feature or module to keep structure clean and easy to navigate.
4. Include Expected Behavior: Test names should state the expected outcome to make reports readable.
5. Avoid Ambiguity: Avoid vague names like test1.cy.js or checkFeature.cy.js.

Self Check Question

Where in this folder structure would you add a new test file for the "Shopping Cart" feature?

Key Result

Organize Cypress tests by feature with clear, descriptive file and test names for easy maintenance and reporting.