Force option for hidden elements in Cypress - Framework Patterns

Framework Mode - Force option for hidden elements

Folder Structure

    cypress/
    ├── e2e/
    │   ├── login.cy.js          # Test files using force option
    │   └── hiddenElements.cy.js # Tests interacting with hidden elements
    ├── fixtures/                # Test data files (JSON)
    ├── support/
    │   ├── commands.js          # Custom commands (e.g., force click wrappers)
    │   └── e2e.js               # Global support and configuration
    └── cypress.config.js        # Cypress configuration file
    

Test Framework Layers

• Test Layer (e2e/): Contains test scripts that use { force: true } option to interact with hidden or covered elements.
• Support Layer (support/commands.js): Defines reusable custom commands that wrap Cypress commands with { force: true } for hidden elements.
• Fixtures Layer (fixtures/): Holds test data to simulate different UI states where elements might be hidden.
• Configuration Layer (cypress.config.js): Manages environment settings and global timeouts to support tests involving hidden elements.

Configuration Patterns

Use cypress.config.js to set base URL, default command timeout, and environment variables.

    export default defineConfig({
      e2e: {
        baseUrl: 'https://example.com',
        defaultCommandTimeout: 8000,
        env: {
          username: 'testuser',
          password: 'password123'
        }
      }
    })
    

Pass { force: true } option directly in test commands when interacting with hidden elements, e.g., cy.get('#hidden-btn').click({ force: true }).

Test Reporting and CI/CD Integration

Integrate Cypress with CI/CD pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests automatically.

• Use cypress-mochawesome-reporter for detailed HTML reports showing which tests used { force: true }.
• Configure screenshots and video recording on test failures to help debug hidden element interactions.
• Example GitHub Actions snippet to run Cypress tests and upload reports:

    name: Cypress Tests
    on: [push, pull_request]
    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
          - name: Upload Test Report
            uses: actions/upload-artifact@v3
            with:
              name: cypress-report
              path: cypress/reports
    

Best Practices

1. Use { force: true } sparingly: Only when necessary to interact with hidden or covered elements to avoid masking real UI issues.
2. Prefer explicit waits and visibility checks: Try to wait for elements to become visible before forcing actions.
3. Wrap force clicks in custom commands: Create reusable commands in support/commands.js to keep tests clean and consistent.
4. Document why force is used: Add comments in tests explaining why { force: true } is needed for maintainability.
5. Use screenshots and videos: Capture UI state when forcing actions to help debug hidden element interactions.

Self Check

Where in this Cypress framework structure would you add a new custom command to click hidden elements using the force option?

Key Result

Use the force option in Cypress tests to interact with hidden elements, organized with custom commands and clear folder structure.