Why assertions verify expected behavior in Cypress - Framework Benefits

Framework Mode - Why assertions verify expected behavior

Folder Structure of a Cypress Test Project

  cypress/
  ├── e2e/                # Test files with assertions
  │   └── login.spec.js
  ├── fixtures/           # Test data files (JSON)
  │   └── users.json
  ├── support/            # Custom commands and utilities
  │   ├── commands.js
  │   └── e2e.js
  cypress.config.js       # Cypress configuration file
  package.json            # Project dependencies and scripts
  

Test Framework Layers in Cypress

• Test Layer (e2e/): Contains test scripts where assertions verify expected behavior, e.g., checking if a button is visible or a URL is correct.
• Support Layer (support/): Holds reusable commands and helper functions to keep tests clean and DRY (Don't Repeat Yourself).
• Fixtures Layer (fixtures/): Stores static test data like user credentials or sample inputs.
• Configuration (cypress.config.js): Defines environment settings like base URL, browser options, and timeouts.

Configuration Patterns in Cypress

Use cypress.config.js to set base URLs and environment variables for different environments (dev, staging, prod).

  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').

Test Reporting and CI/CD Integration

Cypress supports built-in test reports showing passed and failed assertions.

Integrate with CI/CD tools (GitHub Actions, Jenkins) to run tests automatically on code changes.

Use reporters like mochawesome for detailed HTML reports.

  # Example GitHub Actions snippet
  name: Cypress Tests
  on: [push]
  jobs:
    test:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v3
        - uses: cypress-io/github-action@v5
          with:
            start: npm start
            wait-on: 'http://localhost:3000'
            wait-on-timeout: 60
  

Best Practices for Assertions in Cypress

• Clear Expected Behavior: Write assertions that clearly state what the app should do, like should('be.visible') or should('contain.text', 'Welcome').
• Use Explicit Assertions: Avoid vague checks; assert exact values or states to catch bugs early.
• Keep Tests Independent: Each test should verify its own expected behavior without relying on others.
• Use Custom Commands: Encapsulate common assertions in commands to keep tests readable.
• Fail Fast: Assertions help tests fail immediately when behavior is wrong, saving debugging time.

Self-Check Question

Where in this Cypress framework structure would you add a new assertion to verify the login button is visible?

Key Result

Assertions in Cypress tests verify expected behavior by checking actual app states against expected outcomes in test scripts.