How did you build the framework in Playwright?

When building a framework on Playwright, I usually start with creating a basic structure that includes:

• Configuration of the test environment (browsers, timeouts, reporters).
• Abstractions for UI interactions — Page Object Model (POM), where a separate class is created for each page or component with interaction methods.
• Utilities for common actions (login, navigation, waits).
• Integration with CI/CD for automatic test execution.

Example of a simple Page Object:

import { Page } from 'playwright';

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

  async navigate() {
    await this.page.goto('https://example.com/login');
  }

  async login(username: string, password: string) {
    await this.page.fill('#username', username);
    await this.page.fill('#password', password);
    await this.page.click('button[type=submit]');
  }
}

This approach allows easy extension of the framework, maintaining tests, and reusing code.