Clean Code: Page Object Model

The Page Object Model (POM) is a design pattern that creates an object repository for web UI elements.

Example

class HomePage {

  constructor(page) {
    this.page = page;
    this.loginBtn = page.locator('#login');
  }

  async goto() {
    await this.page.goto('https://careerraah.com');
  }
}

Benefit

If the login button ID changes, you only update it in one place (the Page class), not in every test.