First Cypress test - Framework Patterns

Framework Mode - First Cypress test

Folder Structure

  cypress/
  ├── e2e/                  # Test files go here
  │   └── example.cy.js     # Your first test file
  ├── fixtures/             # Test data files (JSON, etc.)
  ├── support/              # Custom commands and reusable code
  │   ├── commands.js       # Custom Cypress commands
  │   └── e2e.js            # Support file loaded before tests
  cypress.config.js         # Cypress configuration file
  package.json              # Project dependencies and scripts
  

Test Framework Layers

• Test Layer (cypress/e2e): Contains test scripts that describe user actions and assertions.
• Support Layer (cypress/support): Holds reusable commands and setup code to keep tests clean.
• Fixtures Layer (cypress/fixtures): Stores static test data like JSON files for data-driven tests.
• Configuration (cypress.config.js): Defines environment settings, base URLs, and test options.

Configuration Patterns

Use cypress.config.js to set base URL, test retries, and browser options.

Manage environments by defining env variables inside the config or via CLI.

Store sensitive data like credentials in environment variables or cypress.env.json (excluded from version control).

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

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

Test Reporting and CI/CD Integration

Cypress generates detailed test reports in the terminal and browser.

Use plugins like mochawesome for HTML reports.

Integrate Cypress tests in CI/CD pipelines (GitHub Actions, Jenkins) by running npx cypress run.

Fail builds automatically if tests fail, ensuring quality before deployment.

Best Practices

• Keep tests independent and repeatable; avoid relying on previous test state.
• Use cypress/support/commands.js to create reusable custom commands.
• Use fixtures for test data to separate data from test logic.
• Use explicit assertions to verify expected outcomes clearly.
• Run tests in headless mode in CI for faster feedback.

Self Check

Where in this folder structure would you add a new test file for a login feature?

Answer: Add the new test file inside the cypress/e2e/ folder, for example cypress/e2e/login.cy.js.

Key Result

Organize Cypress tests with clear folders for tests, support code, fixtures, and config for maintainable automation.