cy.get() with CSS selectors in Cypress - Framework Patterns

Framework Mode - cy.get() with CSS selectors

Folder Structure for Cypress Test Framework

    cypress/
    ├── e2e/                  # Test files using cy.get() with CSS selectors
    │   ├── login.cy.js       # Example test file
    │   └── dashboard.cy.js
    ├── fixtures/             # Test data files (JSON)
    │   └── users.json
    ├── support/              # Support files and custom commands
    │   ├── commands.js       # Custom cy.get() wrappers or helpers
    │   └── e2e.js            # Global setup for tests
    └── videos/               # Test run videos (auto-generated)

    cypress.config.js          # Cypress configuration file
    package.json               # Project dependencies and scripts
    

Test Framework Layers

• Test Layer: Files in cypress/e2e/ contain tests that use cy.get() with CSS selectors to find elements on the page.
• Support Layer: cypress/support/commands.js can hold custom commands that wrap cy.get() for reusable selectors.
• Fixtures Layer: Static test data in cypress/fixtures/ to separate data from test code.
• Configuration Layer: cypress.config.js manages environment settings, base URLs, and browser options.

Configuration Patterns

Use cypress.config.js to define:

• Base URL: Set baseUrl for easy cy.visit() calls.
• Environment Variables: Use env to store credentials or flags, accessed via Cypress.env().
• Browser Selection: Run tests in different browsers via CLI or config.
• Custom Command Setup: Add reusable cy.get() selectors in commands.js for maintainability.

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

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

Test Reporting and CI/CD Integration

• Use built-in Cypress Dashboard or third-party reporters (like Mochawesome) for detailed test reports.
• Configure package.json scripts to run tests headlessly in CI environments.
• Integrate with CI/CD pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests on code push or pull requests.
• Save screenshots and videos on test failures for easier debugging.

Best Practices for Using cy.get() with CSS Selectors

1. Use Data Attributes: Prefer selectors like [data-cy='submit-button'] instead of classes or IDs that may change.
2. Keep Selectors Simple: Avoid overly complex CSS selectors to reduce flakiness.
3. Use Custom Commands: Wrap common selectors in commands.js for reuse and easier maintenance.
4. Wait for Elements: Use Cypress automatic retries but add explicit waits if needed for dynamic content.
5. Organize Tests: Group tests logically in cypress/e2e/ and keep selectors consistent.

Self Check Question

Where in this folder structure would you add a new custom command that wraps cy.get() for a login button selector?

Key Result

Organize Cypress tests with clear folder layers, use data attribute selectors in cy.get(), and configure environments for reliable, maintainable automation.