Cypress vs Selenium vs Playwright comparison - Framework Approaches Compared

Framework Mode - Cypress vs Selenium vs Playwright comparison

Folder Structure

  Cypress Framework Structure:
  cypress/
  ├── e2e/                 # Test specs
  │   ├── login.cy.js
  │   └── dashboard.cy.js
  ├── fixtures/            # Test data files (JSON)
  │   └── users.json
  ├── support/             # Custom commands, reusable code
  │   ├── commands.js
  │   └── e2e.js
  cypress.config.js        # Main config file
  package.json             # Project dependencies and scripts

  Selenium Framework Structure (Java example):
  src/
  ├── main/
  │   └── java/
  │       └── pages/       # Page Object classes
  └── test/
      └── java/
          ├── tests/       # Test classes
          └── utils/       # Helper utilities
  pom.xml                  # Maven build and dependencies

  Playwright Framework Structure:
  tests/                   # Test files
  ├── login.spec.ts
  ├── dashboard.spec.ts
  playwright.config.ts     # Playwright config
  package.json             # Dependencies and scripts
  utils/                   # Helper functions
  

Test Framework Layers

• Test Specs: Actual test scripts that describe user actions and assertions.
• Page Objects / Selectors: Encapsulate page elements and actions for reuse and clarity.
• Support / Utilities: Helper functions, custom commands, and reusable code blocks.
• Configuration: Settings for environment, browser, timeouts, base URLs.
• Test Runner / Execution: The tool that runs tests and manages browser sessions.
• Reporting: Collects and shows test results in readable formats.

Comparison:

• Cypress: Runs inside the browser, easy setup, automatic waits, great for frontend testing.
• Selenium: Language agnostic, supports many browsers, requires more setup, good for complex scenarios.
• Playwright: Modern, supports multiple browsers, auto-waits, supports multiple languages, good for end-to-end testing.

Configuration Patterns

• Cypress: Use cypress.config.js to set baseUrl, env variables, browser options.
  Use cypress.env.json or environment variables for sensitive data like credentials.
• Selenium: Use property files or YAML for environment configs.
  Use test framework annotations (TestNG/JUnit) to pass parameters.
  Manage browser drivers and capabilities in setup code.
• Playwright: Use playwright.config.ts to define projects (browsers), base URLs, retries.
  Use environment variables or .env files for secrets.

Test Reporting and CI/CD Integration

• Cypress: Built-in dashboard service for detailed reports.
  Supports JUnit, Mochawesome reports.
  Integrates easily with CI tools like GitHub Actions, Jenkins.
• Selenium: Uses test framework reports (TestNG, JUnit XML reports).
  Can integrate Allure or ExtentReports for rich reports.
  Works well with CI/CD pipelines for automated runs.
• Playwright: Has built-in HTML reports.
  Supports JUnit XML output.
  Integrates with CI/CD tools like GitHub Actions, Azure Pipelines.

Best Practices

1. Use Page Object Model: Keep selectors and page actions separate from tests for maintainability.
2. Use Explicit Waits or Auto-Waits: Avoid flaky tests by waiting for elements or conditions.
3. Keep Tests Independent: Each test should run alone without relying on others.
4. Use Environment Configs: Separate test data and credentials from code.
5. Integrate Reporting and CI: Automate test runs and collect clear reports for quick feedback.

Self Check

In the Cypress framework structure shown, where would you add a new page object file for the Login page?

Key Result

Organize tests, page objects, configs, and reports clearly to build reliable, maintainable test automation.