cypress-testing-library - Framework Patterns

Framework Mode - cypress-testing-library

Folder Structure

cypress-testing-library-project/
├── cypress/
│   ├── e2e/                  # Test specs using Cypress Testing Library
│   │   ├── login.cy.js       # Example test file
│   │   └── dashboard.cy.js
│   ├── support/              # Support commands and setup
│   │   ├── commands.js       # Custom Cypress commands
│   │   └── e2e.js            # Global setup for tests
│   └── fixtures/             # Test data files (JSON, etc.)
├── cypress.config.js         # Cypress configuration file
├── package.json              # Project dependencies and scripts
└── README.md

Test Framework Layers

• Test Specs (cypress/e2e): Contains test files using Cypress Testing Library queries to interact with UI elements by role, label, text, etc.
• Support Layer (cypress/support): Holds custom commands and global setup. Here you import and configure @testing-library/cypress to extend Cypress commands.
• Fixtures: Static test data files to keep test data separate from test logic.
• Configuration: The cypress.config.js file manages environment settings, base URLs, and browser options.

Configuration Patterns

• Environment Variables: Use cypress.env.json or env section in cypress.config.js to store credentials and environment-specific data securely.
• Base URL: Define baseUrl in cypress.config.js for easy switching between dev, staging, and production.
• Browser Selection: Configure browsers via CLI or cypress.config.js to run tests in Chrome, Firefox, or Edge.
• Setup Testing Library: Import @testing-library/cypress/add-commands in cypress/support/e2e.js to add Testing Library commands globally.

Test Reporting and CI/CD Integration

• Test Reports: Use Cypress built-in reporter or add plugins like mochawesome for detailed HTML reports.
• CI/CD Integration: Run Cypress tests in pipelines (GitHub Actions, GitLab CI, Jenkins) using npx cypress run.
• Artifacts: Save screenshots and videos on test failures for debugging.
• Parallelization: Use Cypress Dashboard service or CI parallel jobs to speed up test runs.

Best Practices

• Use Testing Library Queries: Prefer queries like getByRole, findByLabelText to select elements as a user would, improving test reliability.
• Keep Tests Independent: Each test should set up its own state and not rely on others.
• Custom Commands: Encapsulate repetitive actions in cypress/support/commands.js for reuse and clarity.
• Clear Test Data: Use fixtures and reset state between tests to avoid flaky results.
• Accessibility Focus: Testing Library encourages accessible selectors, promoting better app accessibility.

Self Check

Where in this framework structure would you add a new custom command to select a user profile button by its accessible name?

Key Result

Organize Cypress tests using Testing Library queries in e2e specs, configure commands in support, and manage environments in cypress.config.js.