cy.first(), cy.last(), cy.eq() in Cypress - Framework Patterns

Framework Mode - cy.first(), cy.last(), cy.eq()

Folder Structure

  cypress/
  ├── e2e/                  # Test files
  │   ├── example.spec.js   # Example test using cy.first(), cy.last(), cy.eq()
  ├── fixtures/             # Test data files (JSON)
  ├── support/              # Custom commands and reusable utilities
  │   ├── commands.js       # Custom Cypress commands
  │   └── e2e.js            # Global setup for tests
  ├── pages/                # Page Object files
  │   └── examplePage.js    # Page object with element selectors
  cypress.config.js          # Cypress configuration file
  

Test Framework Layers

• Test Layer (cypress/e2e/): Contains test scripts that use .first(), .last(), and .eq() to select elements from lists or groups.
• Page Object Layer (cypress/pages/): Encapsulates selectors and actions for page elements, exposing collections for tests to apply .first(), .last(), .eq().
• Support Layer (cypress/support/): Holds reusable commands and setup code to keep tests clean and DRY (Don't Repeat Yourself).
• Configuration Layer (cypress.config.js): Manages environment settings, base URLs, and browser options.

Configuration Patterns

Use cypress.config.js to define:

• Base URL: Set the website URL to avoid repeating it in tests.
• Environment Variables: Store credentials or environment-specific data using env property.
• Browser Selection: Configure which browsers to run tests on via CLI or config.

Example snippet from cypress.config.js:

  import { defineConfig } from 'cypress'

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

Test Reporting and CI/CD Integration

• Use built-in Cypress Dashboard or plugins like mochawesome for detailed HTML reports.
• Integrate Cypress tests into CI/CD pipelines (GitHub Actions, Jenkins, GitLab CI) to run tests automatically on code changes.
• Configure test retries and screenshots/videos on failure for easier debugging.

Best Practices

• Use Page Objects: Keep selectors in page files and use .first(), .last(), .eq() in tests for clarity.
• Explicit Assertions: Always assert expected element state after selecting with .first() or .eq().
• Readable Tests: Use descriptive test names and comments when selecting elements by position.
• Handle Dynamic Lists: Use .first(), .last(), and .eq() carefully when list length can change.
• Reuse Selectors: Avoid hardcoding indexes; prefer semantic selectors or data attributes.

Self Check

Where in this folder structure would you add a new page object file for a list component that you want to test using .first(), .last(), and .eq()?

Key Result

Organize Cypress tests with clear folder layers, use page objects for selectors, and apply .first(), .last(), .eq() in tests for precise element selection.