Day 18 of 100: Classes — The Blueprint for Page Objects

Day 18 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.

---

Classes structure Page Objects, helpers, and data factories. The syntax that organizes frameworks.

Class Anatomy

class ApiHelper {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
  }

  buildUrl(path) {
    return this.baseUrl + path;
  }

  static fromEnv() {                 // factory without an instance
    return new ApiHelper(process.env.API_URL || 'http://localhost');
  }
}

const api = new ApiHelper('https://api.test.com');
api.buildUrl('/users');     // https://api.test.com/users
ApiHelper.fromEnv();        // static call

A Real Page Object Shape

class LoginPage {
  constructor(page) {
    this.page = page;
    // locators defined once, used everywhere
    // this.emailInput = page.getByLabel('Email');
  }

  async goto() { /* await this.page.goto('/login') */ }

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

Getters

class Config {
  get isCI() { return !!process.env.CI; }
}
new Config().isCI;  // property-style access, computed live

Tomorrow (Day 19): Inheritance and composition — and why Playwright prefers composition.