4.6TypeScript Page Objects

The same patterns apply in TypeScript with Playwright:

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

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

    async login(email: string, password: string): Promise<DashboardPage> {
        await this.page.fill('[name="email"]', email);
        await this.page.fill('[name="password"]', password);
        await this.page.click('[type="submit"]');
        await this.page.waitForURL("/dashboard");
        return new DashboardPage(this.page);
    }

    async getErrorMessage(): Promise<string> {
        return await this.page.textContent(".error-message") ?? "";
    }
}