cy.find() within parent in Cypress - Framework Patterns

Framework Mode - .find() within parent

Folder Structure

  cypress/
  ├── e2e/                  # Test files
  │   ├── login.cy.js       # Example test
  │   └── userProfile.cy.js
  ├── fixtures/             # Test data files (JSON)
  │   └── users.json
  ├── support/              # Custom commands and utilities
  │   ├── commands.js       # Custom Cypress commands
  │   └── e2e.js            # Global support file
  └── pages/                # Page Object files
      └── loginPage.js      # Login page selectors and actions
  cypress.config.js          # Cypress configuration file
  

Test Framework Layers

• Test Layer (cypress/e2e): Contains test scripts that use .find() within parent elements to locate nested elements reliably.
• Page Object Layer (cypress/pages): Encapsulates selectors and actions. Uses cy.get() and .find() to locate elements inside parent containers for better maintainability.
• Support Layer (cypress/support): Holds custom commands and reusable utilities to extend Cypress capabilities, e.g., custom commands wrapping .find().
• Fixtures Layer (cypress/fixtures): Stores test data in JSON files to support data-driven testing.
• Configuration Layer (cypress.config.js): Defines environment variables, base URLs, and browser settings.

Configuration Patterns

• Environment Variables: Use cypress.env.json or cypress.config.js to store URLs, credentials, and environment-specific data.
• Browser Settings: Configure browsers in cypress.config.js to run tests in Chrome, Firefox, or Edge.
• Base URL: Set baseUrl in config for easy navigation with cy.visit().
• Custom Commands: Define commands in cypress/support/commands.js to wrap common patterns like .find() within parents for cleaner tests.

Test Reporting and CI/CD Integration

• Test Reporting: Use built-in Cypress Dashboard or plugins like mochawesome for detailed HTML reports showing pass/fail results.
• CI/CD Integration: Integrate Cypress tests in pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests on code push or pull requests.
• Artifacts: Save screenshots and videos on test failures for debugging.

Framework Design Principles

• Use .find() within parent elements: This scopes element searches to a specific container, reducing flaky tests caused by duplicate selectors.
• Page Object Model: Keep selectors and actions in page files to avoid duplication and ease maintenance.
• Custom Commands: Wrap common .find() patterns in commands for readability and reuse.
• Explicit Assertions: Always assert element existence or state after .find() to catch failures early.
• Data-Driven Testing: Use fixtures to separate test data from test logic, improving clarity.

Self Check

Where in this folder structure would you add a new page object file for a "User Profile" page that uses .find() to locate nested elements?

Key Result

Use .find() within parent elements in page objects and tests to scope element searches and improve test reliability.