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.

Practice

1. Which testing tool is known for its fast setup and mainly supports Chrome-family browsers?

easy

A. Selenium

B. Cypress

C. Playwright

D. JUnit

Solution

1. Step 1: Understand tool browser support

   Cypress is designed for fast tests mainly in Chrome-family browsers.

2. Step 2: Compare with other tools

   Selenium supports many browsers but requires more setup; Playwright supports multiple browsers with modern features.

3. Final Answer:

   Cypress -> Option B

4. Quick Check:

   Fast Chrome tests = Cypress [OK]

Hint: Fast Chrome-only tests? Think Cypress [OK]

Common Mistakes:

• Confusing Selenium as fastest setup
• Thinking Playwright only supports Chrome
• Selecting unrelated tools like JUnit

2. Which of the following is a correct statement about Selenium?

easy

A. Selenium supports multiple programming languages and browsers.

B. Selenium is limited to Chrome browser only.

C. Selenium only supports JavaScript language.

D. Selenium requires no setup before running tests.

Solution

1. Step 1: Recall Selenium features

   Selenium supports many programming languages like Java, Python, JavaScript, and many browsers.

2. Step 2: Eliminate incorrect options

   It is not limited to JavaScript or Chrome, and it requires setup.

3. Final Answer:

   Selenium supports multiple programming languages and browsers. -> Option A

4. Quick Check:

   Multi-language, multi-browser = Selenium [OK]

Hint: Selenium = many languages + browsers [OK]

Common Mistakes:

• Thinking Selenium supports only JavaScript
• Believing Selenium works without setup
• Assuming Selenium is Chrome-only

3. Consider this statement: "Playwright supports running tests on Chromium, Firefox, and WebKit browsers." Which tool does this describe?

medium

A. Playwright

B. Selenium

C. TestCafe

D. Cypress

Solution

1. Step 1: Identify browser support

   Playwright supports Chromium, Firefox, and WebKit browsers natively.

2. Step 2: Match with tool features

   Cypress mainly supports Chromium-based browsers; Selenium supports many but not WebKit directly; TestCafe is different.

3. Final Answer:

   Playwright -> Option A

4. Quick Check:

   Multi-browser including WebKit = Playwright [OK]

Hint: WebKit support means Playwright [OK]

Common Mistakes:

• Assuming Cypress supports WebKit
• Confusing Selenium with Playwright browser support
• Selecting unrelated tools like TestCafe

4. You wrote a test script using Cypress but it fails to run on Firefox browser. What is the most likely reason?

medium

A. Your Firefox browser version is outdated.

B. You need to install Playwright to run Cypress tests on Firefox.

C. Cypress requires Selenium to run on Firefox.

D. Cypress does not support Firefox well yet.

Solution

1. Step 1: Understand Cypress browser support

   Cypress primarily supports Chromium browsers; Firefox support is experimental and limited.

2. Step 2: Evaluate other options

   Cypress does not depend on Selenium or Playwright; outdated browser or installing Playwright is unrelated.

3. Final Answer:

   Cypress does not support Firefox well yet. -> Option D

4. Quick Check:

   Limited Firefox support = Cypress issue [OK]

Hint: Cypress Firefox support is limited [OK]

Common Mistakes:

• Thinking Cypress needs Selenium for Firefox
• Blaming browser version without checking support
• Assuming Playwright is needed for Cypress tests

5. You want to write end-to-end tests that run fast, support multiple browsers including Safari, and allow writing tests in JavaScript or Python. Which tool should you choose?

hard

A. Cypress

B. Selenium

C. Playwright

D. Mocha

Solution

1. Step 1: Analyze browser support needs

   Safari support requires WebKit engine support, which Playwright provides.

2. Step 2: Consider language support and speed

   Playwright supports JavaScript and Python and offers fast test execution with modern features.

3. Step 3: Compare with other tools

   Cypress is fast but limited to Chromium browsers and JavaScript; Selenium supports many languages but is slower; Mocha is a test framework, not a browser automation tool.

4. Final Answer:

   Playwright -> Option C

5. Quick Check:

   Multi-browser + multi-language + speed = Playwright [OK]

Hint: Multi-browser and language support? Choose Playwright [OK]

Common Mistakes:

• Choosing Cypress for Safari support
• Picking Selenium for speed over Playwright
• Confusing Mocha as a browser automation tool