cy.clear() for input fields in Cypress - Framework Patterns

Framework Mode - cy.clear() for input fields

Folder Structure

  cypress/
  ├── e2e/                  # Test files
  │   ├── login.cy.js       # Example test for login page
  │   └── form.cy.js        # Tests for form inputs
  ├── fixtures/             # Test data files (JSON)
  │   └── user.json
  ├── support/              # Support files and commands
  │   ├── commands.js       # Custom commands (e.g., cy.clearInput)
  │   └── e2e.js            # Global setup
  ├── pages/                # Page Object files
  │   └── loginPage.js      # Login page selectors and actions
  └── cypress.config.js     # Cypress configuration
  

Test Framework Layers

• Test Layer: Contains test scripts using cy.clear() to clear input fields before typing or asserting.
• Page Object Layer: Encapsulates selectors and actions for input fields, e.g., clearInput() method that calls cy.get(selector).clear().
• Support Layer: Custom commands extending Cypress, e.g., cy.clearInput() for reusable clearing logic.
• Fixtures Layer: Holds test data like user info to fill inputs after clearing.
• Config Layer: Manages environment settings, base URLs, and browser options.

Configuration Patterns

• cypress.config.js: Define baseUrl, defaultCommandTimeout, and environment variables.
• Environment Variables: Use env property to store credentials or flags for clearing inputs conditionally.
• Custom Commands: Add cy.clearInput() in support/commands.js to standardize clearing inputs across tests.
• Test Data: Use fixtures to load input values after clearing fields.

  // cypress.config.js example snippet
  import { defineConfig } from 'cypress'
  export default defineConfig({
    e2e: {
      baseUrl: 'https://example.com',
      env: {
        clearInputsBeforeTyping: true
      },
      setupNodeEvents(on, config) {
        // implement node event listeners here
      }
    }
  })
  

Test Reporting and CI/CD Integration

• Use built-in Cypress Dashboard or third-party reporters (e.g., Mochawesome) to generate clear reports showing if cy.clear() steps passed.
• Integrate Cypress tests in CI pipelines (GitHub Actions, Jenkins) to run tests on every push or pull request.
• Fail tests if input clearing or typing fails, ensuring input fields are properly reset before use.
• Use screenshots and video recording features to visually confirm input clearing during test runs.

Best Practices

• Always clear input fields before typing: Prevents leftover text causing flaky tests.
• Use custom commands: Wrap cy.clear() in cy.clearInput() for readability and reuse.
• Explicit selectors: Use stable selectors (data-cy or data-testid) to locate inputs reliably.
• Wait for input readiness: Ensure input is visible and enabled before clearing to avoid errors.
• Combine with assertions: After clearing, assert input is empty to catch issues early.

Self Check

Where in this folder structure would you add a new custom command cy.clearInput() to standardize clearing input fields?

Key Result

Use a layered Cypress framework with page objects, custom commands, and clear input handling for reliable tests.