Should you use the Page Object Model in Playwright?

The Page Object Model wraps a page's structure and actions behind a class. It was essential in frameworks where selectors were scattered and brittle. Playwright locators are already robust and composable, so a page object is mainly a way to name repeated workflows, not a mandatory layer.

import type { Page } from "@playwright/test";

export class LoginPage {
  constructor(private readonly page: Page) {}

  async open() {
    await this.page.goto("/login");
  }

  email() {
    return this.page.getByLabel("Email");
  }

  password() {
    return this.page.getByLabel("Password");
  }

  signIn() {
    return this.page.getByRole("button", { name: "Sign in" });
  }
}

When it helps and when it hurts

• Helpful when many tests repeat the same multi-step workflow
• Helpful when a page has a large, stable set of related controls
• Harmful when it becomes a god object with every selector on the site
• Harmful when it hides assertions inside methods and makes failures opaque
• Composable with fixtures, which can inject a page object into tests

test("signs in", async ({ page }) => {
  const login = new LoginPage(page);
  await login.open();
  await login.email().fill("asha@example.com");
  await login.password().fill("correct-horse");
  await login.signIn().click();

  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
});

If the page object returns locators, tests stay flexible and compose them differently. If every method returns void and asserts internally, a test cannot tell what failed without reading the class. Prefer small page components or fixtures over a giant base page.