Test Automation Frameworks: Selenium vs Cypress vs Playwright Compared

npm install selenium-webdriver
# Download ChromeDriver matching your Chrome version

const { Builder, By, until } = require('selenium-webdriver');

async function example() {
  const driver = await new Builder().forBrowser('chrome').build();

  try {
    await driver.get('https://example.com/login');

    // Find and interact with elements
    await driver.findElement(By.id('email')).sendKeys('user@example.com');
    await driver.findElement(By.id('password')).sendKeys('secret123');

    // Wait for element and click
    await driver.wait(
      until.elementIsVisible(driver.findElement(By.css('button[type="submit"]'))),
      5000
    );
    await driver.findElement(By.css('button[type="submit"]')).click();

    // Wait for navigation
    await driver.wait(until.urlContains('/dashboard'), 5000);
    console.log('Login successful!');
  } finally {
    await driver.quit();
  }
}

example();

npm install cypress --save-dev
npx cypress open

// cypress/e2e/login.cy.js
describe('Login', () => {
  beforeEach(() => {
    cy.visit('https://example.com/login');
  });

  it('logs in successfully', () => {
    cy.get('#email').type('user@example.com');
    cy.get('#password').type('secret123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
    cy.get('.welcome').should('contain', 'Welcome back');
  });

  it('shows error for invalid credentials', () => {
    cy.get('#email').type('wrong@example.com');
    cy.get('#password').type('wrongpass');
    cy.get('button[type="submit"]').click();
    cy.get('.error-message').should('be.visible');
  });

  it('validates empty fields', () => {
    cy.get('button[type="submit"]').click();
    cy.get('#email:invalid').should('exist');
  });
});

npm install @playwright/test
npx playwright install

// tests/login.spec.js
const { test, expect } = require('@playwright/test');

test.describe('Login', () => {
  test('logs in successfully', async ({ page }) => {
    await page.goto('https://example.com/login');
    await page.fill('#email', 'user@example.com');
    await page.fill('#password', 'secret123');
    await page.click('button[type="submit"]');
    await expect(page).toHaveURL(/\/dashboard/);
    await expect(page.locator('.welcome')).toHaveText('Welcome back');
  });

  test('handles network failure gracefully', async ({ page }) => {
    // Intercept and block login API
    await page.route('**/api/login', route => route.abort());

    await page.goto('/login');
    await page.fill('#email', 'user@example.com');
    await page.fill('#password', 'secret123');
    await page.click('button[type="submit"]');
    await expect(page.locator('.error')).toContainText('Network error');
  });

  test('mobile responsive layout', async ({ page }) => {
    // Test on mobile viewport
    await page.setViewportSize({ width: 375, height: 812 });
    await page.goto('/login');
    await expect(page.locator('.form-container')).toBeVisible();
    // Verify mobile layout
    const box = await page.locator('.form-container').boundingBox();
    expect(box.width).toBeLessThan(400);
  });
});

# .github/workflows/test.yml — Playwright example
name: E2E Tests
on:
  push:
    branches: [main]
  pull_request:

jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    services:
      app:
        image: myapp:latest
        ports:
          - 3000:3000

    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright
        run: npx playwright install --with-deps
      - name: Run tests
        run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 7

# Playwright — run across 4 workers
npx playwright test --workers=4

# Cypress — run in parallel (paid plan)
npx cypress run --parallel

# Selenium — Grid mode
java -jar selenium-server.jar hub
java -jar selenium-server.jar node --hub http://localhost:4444

// Selenium style
driver.findElement(By.id("email")).sendKeys("user@example.com");

// Playwright equivalent
page.fill("#email", "user@example.com");
// or
page.locator("#email").fill("user@example.com");

// BAD: selectors duplicated across tests
test('login', async ({ page }) => {
  await page.fill('#email', 'user@example.com');
  await page.fill('#password', 'secret123');
  await page.click('button[type="submit"]');
});

// GOOD: Page Object Model
class LoginPage {
  constructor(page) {
    this.page = page;
    this.emailInput = page.locator('#email');
    this.passwordInput = page.locator('#password');
    this.submitButton = page.locator('button[type="submit"]');
  }

  async login(email, password) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }
}

test('login', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.login('user@example.com', 'secret123');
});