expect() for BDD assertions in Cypress - Framework Patterns

Framework Mode - expect() for BDD assertions

Folder Structure

    cypress/
    ├── e2e/                  # Test specs using BDD style with expect()
    │   ├── login.cy.js       # Example test file
    │   └── userProfile.cy.js
    ├── support/              # Custom commands and reusable utilities
    │   ├── commands.js       # Custom Cypress commands
    │   └── index.js          # Support file loaded before tests
    ├── fixtures/             # Test data files (JSON)
    │   └── users.json
    cypress.config.js         # Cypress configuration file
    package.json              # Project dependencies and scripts
    

Test Framework Layers

• Test Specs (e2e/): Contains test files where expect() assertions are used in BDD style to verify app behavior.
• Support Layer (support/): Holds reusable commands and setup code to keep tests clean and DRY (Don't Repeat Yourself).
• Fixtures (fixtures/): Stores static test data to feed tests, improving maintainability and readability.
• Configuration (cypress.config.js): Central place to define environment settings, base URLs, and test options.

Configuration Patterns

Use cypress.config.js to manage environments and test settings:

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

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

Access environment variables in tests with Cypress.env('username').

Use --config-file CLI option to switch between environment configs (e.g., staging, production).

Test Reporting and CI/CD Integration

• Use built-in Cypress test runner for interactive test execution and real-time expect() assertion results.
• Integrate with mochawesome reporter for detailed HTML and JSON reports.
• Configure CI pipelines (GitHub Actions, Jenkins, GitLab CI) to run Cypress tests headlessly and collect reports.
• Fail builds automatically if any expect() assertion fails, ensuring quality gates.

Best Practices for Using expect() in Cypress

1. Write clear and simple assertions using expect() to describe expected outcomes in human-readable form.
2. Use explicit waits or Cypress commands like cy.get() with should() to ensure elements are ready before asserting.
3. Keep assertions focused: one expect() per logical check to make failures easy to diagnose.
4. Use custom messages or comments to explain the purpose of assertions for better test readability.
5. Reuse common assertion logic by creating custom commands or helper functions in support/.

Self Check

Where in this folder structure would you add a new helper function to assert that a user profile page displays the correct username using expect()?

Key Result

Use Cypress test specs with BDD-style expect() assertions organized alongside support utilities and configuration for clear, maintainable tests.