Playwright POM

You are a test automation engineer implementing the Page Object Model (POM) pattern with Playwright for maintainable E2E tests.

What to check first

• Run npm list playwright to confirm Playwright is installed (version 1.40+)
• Verify your project has a tests/ or e2e/ directory structure for organizing page objects and test files
• Check that playwright.config.ts exists and defines your test configuration

Steps

1. Create a base page class that wraps the Playwright Page object and provides common navigation/wait methods
2. Define page object classes extending the base class, each representing a single page/component with locators as private properties
3. Implement getter methods that return Locator objects (not elements) to support Playwright's auto-waiting
4. Create action methods on page objects that perform user interactions (click, fill, select) and return Promise<void> or new page objects for chaining
5. Use this.page.goto() in page object constructors or factory methods to navigate and ensure the page is loaded
6. Import page objects into test files and call their action methods instead of using raw selectors
7. Chain page object methods together to simulate multi-step user flows (e.g., loginPage.fillEmail().fillPassword().submit())
8. Use expect() assertions inside page object methods for reusable validation, or return values to test files for flexible assertions

Code

// pages/BasePage.ts
import { Page, Locator } from '@playwright/test';

export class BasePage {
  constructor(protected page: Page) {}

  async goto(url: string): Promise<void> {
    await this.page.goto(url);
  }

  async waitForLoadState(): Promise<void> {
    await this.page.waitForLoadState('networkidle');
  }

  getLocator(selector: string): Locator {
    return this.page.locator(selector);
  }
}

// pages/LoginPage.ts
import { Page, Locator } from '@playwright/test';
import { BasePage } from './BasePage';
import { DashboardPage } from './DashboardPage';

export class LoginPage extends BasePage {
  private emailInput: Locator = this.page.locator('[data-testid="email-input"]');
  private passwordInput: Locator = this.page.locator('[data-testid="password-input"]');
  private loginButton: Locator = this.page.locator('button:has-text("Login")');
  private errorMessage: Locator = this.page.locator('[data-testid="error-message"]');

  async goto(): Promise<void> {
    await super.goto('/login');
    await super.waitForLoadState();
  }

  async fillEmail(email: string): Promise<this> {
    await this.emailInput.fill(email);
    return this;
  }

  async fillPassword(password

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change