9.6Component Objects

Reusable UI components that appear across multiple pages:

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

  async search(query: string) {
    await this.page.getByRole('searchbox').fill(query);
    await this.page.getByRole('searchbox').press('Enter');
  }

  async getCartCount(): Promise<number> {
    const text = await this.page.getByTestId('cart-count').textContent();
    return parseInt(text ?? '0');
  }
}

class ProductPage {
  readonly header: HeaderComponent;

  constructor(private page: Page) {
    this.header = new HeaderComponent(page);
  }

  async addToCart() {
    await this.page.getByRole('button', { name: 'Add to Cart' }).click();
  }
}