Day 19 of 100: Inheritance vs Composition — Why Playwright Avoids Base Classes

Day 19 of 100 — 100 Days of Playwright with TypeScript Challenge. Phase: JavaScript Fundamentals. JavaScript (Days 1-33) → TypeScript (Days 34-63) → Playwright (Days 64-96) → AI Framework Capstone (Days 97-100).

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

extends shares behavior between classes. Useful to understand — and to know why modern Playwright avoids deep inheritance.

Inheritance Syntax

class BasePage {
  constructor(page) { this.page = page; }
  async screenshot(name) { console.log('shot: ' + name); }
}

class LoginPage extends BasePage {
  constructor(page) {
    super(page);              // call parent constructor first
    this.url = '/login';
  }
  async login() {
    await this.screenshot('before-login');  // inherited method
  }
}

Why Composition Wins in Playwright

// Instead of inheriting, compose components:
class Navbar {
  constructor(page) { this.page = page; }
  async clickMenu() { /* ... */ }
}

class DashboardPage {
  constructor(page) {
    this.page = page;
    this.navbar = new Navbar(page);   // HAS-A, not IS-A
  }
}
// dashboard.navbar.clickMenu() — clear ownership, no fragile chains

• Selenium-era frameworks: BasePage → AbstractPage → LoginPage chains broke constantly
• Playwright fixtures replace base classes entirely (Day 75-76)
• Rule: inherit at most one level; compose everything else

Tomorrow (Day 20): Error handling — try/catch and custom errors.