Day 43 of 100: Typed Classes — The Real Page Object Shape

Day 43 of 100 — 100 Days of Playwright with TypeScript Challenge. Phase: TypeScript. 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.

---

Day 18’s classes, now typed. This is the literal shape of production Page Objects.

Typed Class

// Mirroring real Playwright types:
type Page = { goto(url: string): Promise };
type Locator = { fill(v: string): Promise; click(): Promise };

class LoginPage {
  readonly page: Page;                // readonly — set once in ctor
  private readonly url = '/login';    // private — internal only

  constructor(page: Page) {
    this.page = page;
  }

  async goto(): Promise {
    await this.page.goto(this.url);
  }

  async login(email: string, password: string): Promise {
    console.log(`login ${email}`);
    // await this.emailInput.fill(email); ...
  }
}

Parameter Properties — Less Boilerplate

class DashboardPage {
  // declares AND assigns this.page in one line:
  constructor(private readonly page: Page) {}

  async open() { await this.page.goto('/dashboard'); }
}

Why readonly Matters

• readonly page → nobody reassigns the fixture mid-test
• private url → tests cannot bypass page methods with raw URLs
• Compile-time guarantees that conventions hold across a 50-file suite

Tomorrow (Day 44): Access modifiers and abstract classes.