cy.contains() for text matching in Cypress - Framework Patterns

Framework Mode - cy.contains() for text matching

Folder Structure

    cypress/
    ├── e2e/
    │   ├── login.cy.js          # Test files using cy.contains() for text matching
    │   ├── dashboard.cy.js
    │   └── ...
    ├── fixtures/               # Static test data (JSON files)
    │   └── users.json
    ├── support/
    │   ├── commands.js         # Custom commands including cy.contains() wrappers
    │   ├── e2e.js              # Global setup for tests
    │   └── index.js
    └── cypress.config.js       # Cypress configuration file
    

Test Framework Layers

• Test Layer (e2e/): Contains test scripts that use cy.contains() to find elements by visible text. Example: clicking buttons or verifying messages.
• Support Layer (support/): Holds reusable commands and helpers. You can create custom commands wrapping cy.contains() for consistent text matching.
• Fixtures Layer (fixtures/): Stores test data like user info or expected text strings used in cy.contains() assertions.
• Configuration Layer: The cypress.config.js file sets base URLs, environment variables, and browser options.

Configuration Patterns

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

    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'). This helps when using cy.contains() to verify user-specific text.

Test Reporting and CI/CD Integration

• Use Cypress built-in reporter for clear pass/fail results of tests using cy.contains().
• Integrate with CI/CD pipelines (GitHub Actions, Jenkins) to run tests automatically on code changes.
• Generate HTML or JSON reports with plugins like mochawesome for detailed test results.
• Use screenshots and video recording on test failures to debug cy.contains() text matching issues.

Best Practices

1. Use exact or partial text carefully: cy.contains() can match partial text by default. Use regex or exact match options to avoid false positives.
2. Prefer semantic selectors: Combine cy.contains() with element selectors (e.g., cy.contains('button', 'Submit')) for more precise targeting.
3. Wrap cy.contains() in custom commands: For repeated text matching patterns, create reusable commands in support/commands.js.
4. Use fixtures for text data: Store expected text in fixture files to keep tests clean and maintainable.
5. Handle dynamic text carefully: When text changes dynamically, use assertions with retries or wait for elements before using cy.contains().

Self Check

Where in this folder structure would you add a new custom command that wraps cy.contains() to click a button by its text?

Key Result

Organize Cypress tests with clear folder layers, use cy.contains() in tests and custom commands, manage config via cypress.config.js, and integrate reporting in CI/CD.