Typed Page Objects for Playwright

Decorator-driven, lazy locator chains in plain TypeScript classes.

Before / after

// Before — selectors duplicated, structure invisible
await page.getByTestId("CheckoutPage").getByTestId("PromoCodeInput").fill("SAVE20");
await page.getByTestId("CheckoutPage").getByRole("button", { name: "Apply" }).click();

// After — typed, composable, reusable
await checkoutPage.applyPromoCode("SAVE20");

What it is

A locator-composition layer, not a framework. Decorators scope a class to a Playwright locator; child decorators resolve relative to that scope. The accessor type determines output: raw Locator, a custom control, or a built-in PageObject.

No inheritance required for basic use
Lazy locator chains rebuild only when accessed
Three output styles coexist in the same suite
TypeScript-first, ECMAScript decorators

Three output styles

Raw Locator

Minimal abstraction. Decorate accessors, get typed Locator properties. Read the guide

Custom Controls

Wrap selectors with your own control classes — typed methods, no inheritance. Read the guide

Built-In POM

PageObject / ListPageObject for wait helpers, soft assertions, filter chains. Read the guide

Next steps

Install

Add the package and configure TypeScript. Installation

Quick start

A working example in under five minutes. Quick Start

Choose a style

Decide between plain classes, fragments, and built-in POM. Choosing a Style

API reference

Complete decorator and class API tables. API