Create POM Test Design Pattern in Playwright

Larger test suites are harder to maintain. Multiple tests mean multiple locators and actions. Yes, I am sure most of us had to maintain Automation projects in instances like these, but rest assured, there is a fix to it. Here POM (Page Object Model) comes in handy.

import { Page, chromium } from "@playwright/test";

export class LoginPage {
  public page: Page;

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

  ///// LOCATORS-------------------------------------

  getEmailInput = () => this.page.locator('input[type="email"]');
  getPasswordInput = () => this.page.locator('input[type="password"]');
  getLoginButton = () => this.page.getByTestId("login");
  getResetPassLink = () => this.page.getByTestId("forgot-password");

  ///// ACTIONS---------------------------------------

  public async goToBaseUrl() {
    await this.page.goto("/", { waitUntil: "commit" });
  }

  public async clickLoginButton() {
    await this.getLoginButton().click();
  }

  public async fillEmail() {
    await this.getEmailInput().fill(testData.login.emailOwner);
  }
}

This way I can clearly debug issues and creat tests that are easy to read and maintain. Page Object Model is definetly my go to when working on more complex automation projects.