Page Object Model in Playwright

import { Page, Locator, expect } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly email: Locator;
  readonly password: Locator;
  readonly submit: Locator;
  readonly error: Locator;

  constructor(page: Page) {
    this.page = page;
    this.email = page.getByLabel('Email');
    this.password = page.getByLabel('Password');
    this.submit = page.getByRole('button', { name: 'Sign in' });
    this.error = page.getByRole('alert');
  }

  async goto() {
    await this.page.goto('/login');
    await expect(this.page).toHaveTitle(/sign in/i);
  }

  async login(email: string, password: string) {
    await this.email.fill(email);
    await this.password.fill(password);
    await this.submit.click();
  }

  async expectError(text: string | RegExp) {
    await expect(this.error).toContainText(text);
  }
}

import { test } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

test('rejects bad password', async ({ page }) => {
  const login = new LoginPage(page);
  await login.goto();
  await login.login('a@b.co', 'wrong');
  await login.expectError(/invalid credentials/i);
});

export class Header {
  constructor(private page: Page) {}
  readonly userMenu = this.page.getByRole('button', { name: /account/i });
  async openProfile()  { await this.userMenu.click(); await this.page.getByRole('menuitem', { name: 'Profile' }).click(); }
  async signOut()      { await this.userMenu.click(); await this.page.getByRole('menuitem', { name: 'Sign out' }).click(); }
}

import { Header } from './Header';
export class DashboardPage {
  readonly header: Header;
  constructor(private page: Page) { this.header = new Header(page); }
  readonly revenueCard = this.page.getByTestId('revenue');
}

import { test as base } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';
import { DashboardPage } from './pages/DashboardPage';

type Pages = { loginPage: LoginPage; dashboardPage: DashboardPage };

export const test = base.extend<Pages>({
  loginPage:     async ({ page }, use) => use(new LoginPage(page)),
  dashboardPage: async ({ page }, use) => use(new DashboardPage(page)),
});
export { expect } from '@playwright/test';

import { test, expect } from '../fixtures';

test('shows revenue after login', async ({ loginPage, dashboardPage }) => {
  await loginPage.goto();
  await loginPage.login('demo@acme.co', 'demo');
  await expect(dashboardPage.revenueCard).toBeVisible();
});