24. Scalable Page Object Model in ES6

Enterprise Page Object Model in JavaScript

// pages/BasePage.js
export class BasePage {
  constructor(page) {
    this.page = page;
  }
  async goto(path) {
    await this.page.goto(path);
  }
}
// pages/LoginPage.js
import { BasePage } from "./BasePage.js";
export class LoginPage extends BasePage {
  constructor(page) {
    super(page);
    this.emailInput = page.getByLabel("Email");
    this.passwordInput = page.getByLabel("Password");
    this.submitBtn = page.getByRole("button", { name: "Sign In" });
  }
async login(email, password) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitBtn.click();
  }
}