Day 17 of 100: The this Keyword — Demystified for Page Objects

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

---

this confuses everyone. For QA you need one rule: in class methods, this is the instance. That covers Page Objects.

this in Classes (The Case You Need)

class LoginPage {
  constructor(page) {
    this.page = page;          // instance property
    this.url = '/login';
  }
  async goto() {
    console.log('navigating to ' + this.url);  // this = the instance
  }
}

const lp = new LoginPage('fakePage');
lp.goto(); // navigating to /login

Where this Breaks

const obj = {
  name: 'suite',
  regular() { return this.name; },     // 'suite'
  arrow: () => this?.name,             // undefined — arrows have no own this
};

// Detached method loses this:
const fn = obj.regular;
// fn() — this is undefined in strict mode

Practical Rules

• Page Object methods: regular methods, access fixtures via this.page
• Callbacks inside methods: arrow functions inherit the method’s this
• Never pass detached methods around — wrap in arrows: () => lp.goto()

Tomorrow (Day 18): Classes — the blueprint for Page Objects.