Cypress installation (npm install cypress) - Framework Patterns

Framework Mode - Cypress installation (npm install cypress)

Folder Structure

my-cypress-project/
├── cypress/
│   ├── e2e/               # Test files (end-to-end tests)
│   │   └── example.cy.js  # Sample 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
├── node_modules/          # Installed npm packages
├── package.json           # Project metadata and dependencies
└── package-lock.json      # Exact versions of installed packages

Test Framework Layers

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

Configuration Patterns

Use cypress.config.js to manage settings like:

• Base URL: Define the main website URL to avoid repeating it in tests.
• Environment Variables: Store sensitive data like usernames or API keys securely using env property or .env files.
• Test Files Pattern: Specify which files Cypress should consider as tests.

Example snippet from cypress.config.js:

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'https://example.com',
    env: {
      username: 'testuser',
      password: 'securePass123'
    },
    specPattern: 'cypress/e2e/**/*.cy.js'
  }
})

Test Reporting and CI/CD Integration

• Built-in Cypress Reporter: Shows test results in the terminal and interactive GUI.
• Third-party Reporters: Integrate with tools like Mochawesome for detailed HTML reports.
• CI/CD Integration: Run Cypress tests automatically on platforms like GitHub Actions, GitLab CI, or Jenkins using npx cypress run.
• Artifacts: Save screenshots and videos on test failures for debugging.

Best Practices

• Use npm to install Cypress: Run npm install cypress --save-dev to add Cypress as a development dependency.
• Keep tests isolated: Each test should be independent to avoid flaky results.
• Use support files: Put reusable commands and setup code in cypress/support to keep tests clean.
• Manage sensitive data securely: Use environment variables instead of hardcoding credentials.
• Run tests in CI/CD: Automate test runs on code changes to catch issues early.

Self Check

Where in this folder structure would you add a new test file for verifying the login functionality?

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

Key Result

Cypress test framework organizes tests in cypress/e2e, reusable code in support, and config in cypress.config.js, installed via npm.