Hidden elements handling in Cypress - Framework Patterns

Framework Mode - Hidden elements handling

Folder Structure

cypress/
├── e2e/
│   ├── hiddenElements.spec.js      # Test files for hidden elements
│   └── otherTests.spec.js
├── fixtures/
│   └── testData.json               # Test data files
├── support/
│   ├── commands.js                 # Custom commands including hidden element helpers
│   └── e2e.js                     # Global support file
cypress.config.js                  # Cypress configuration file

Test Framework Layers

• Test Layer (e2e/): Contains test scripts that interact with the UI, including tests that check hidden elements using Cypress commands like should('not.be.visible') or force actions.
• Support Layer (support/): Houses reusable custom commands and utilities, such as commands to check or interact with hidden elements using { force: true } option.
• Fixtures Layer (fixtures/): Stores test data used by tests, e.g., data to trigger hidden elements or states.
• Configuration (cypress.config.js): Defines environment settings, base URLs, browser options, and test retries.

Configuration Patterns

• Environment Variables: Use env in cypress.config.js to store sensitive data or flags to enable hidden element tests.
• Browser Settings: Configure browsers in cypress.config.js to test hidden elements across Chrome, Firefox, etc.
• Test Retries: Enable retries for flaky hidden element tests to improve stability.
• Custom Command Options: Use { force: true } in commands like click() to interact with hidden elements.

Test Reporting and CI/CD Integration

• Use Cypress built-in reporters or plugins like mochawesome for detailed HTML reports showing hidden element test results.
• Integrate Cypress tests into CI/CD pipelines (GitHub Actions, Jenkins) to run hidden element tests on every commit.
• Configure screenshots and video recording on test failures to capture hidden element interaction issues.
• Use tags or test grouping to run only hidden element tests when needed.

Best Practices for Hidden Elements Handling

• Use explicit assertions like should('not.be.visible') to verify hidden elements instead of relying on absence.
• Use { force: true } option carefully to interact with hidden elements only when necessary.
• Encapsulate hidden element interactions in custom commands to keep tests clean and reusable.
• Test hidden elements across different browsers and viewports to catch responsive design issues.
• Use waits or retries smartly to handle dynamic visibility changes without flaky tests.

Self Check

Where in this folder structure would you add a new custom command to click a hidden button?

Key Result

Organize Cypress tests with clear layers and use force options and custom commands to handle hidden elements reliably.