refactor(test): enhance page objects and use them in visitor-browse-journey

e2e/pages/FrontendProductPage.ts

@@ -1,20 +1,55 @@
 import { Page, expect } from '@playwright/test';
 
 export class FrontendProductPage {
-  constructor(private page: Page) {}
+  readonly page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
 
   async goto() {
     await this.page.goto('/products');
-    await this.page.waitForLoadState('networkidle');
+    await this.page.waitForLoadState('domcontentloaded');
+  }
+
+  async expectProductListVisible() {
+    const productCards = this.page.locator('article, [data-testid="product-card"]');
+    await expect(productCards.first()).toBeVisible({ timeout: 10000 });
+    const count = await productCards.count();
+    expect(count).toBeGreaterThan(0);
+  }
+
+  async clickFirstProduct() {
+    const firstProduct = this.page.locator('article a, [data-testid="product-card"] a').first();
+    if (await firstProduct.count() > 0) {
+      await firstProduct.click();
+      await this.page.waitForLoadState('domcontentloaded');
+    }
+  }
+
+  async expectProductDetailVisible() {
+    await expect(this.page.locator('h1')).toBeVisible();
+  }
+
+  async expectProductDetailsVisible() {
+    await expect(this.page.locator('h1')).toBeVisible();
+    await expect(this.page.locator('article, .product-details')).toBeVisible();
   }
 
   async expectProductVisible(title: string) {
-    const productCard = this.page.locator(`text="${title}"`);
+    await this.goto();
+    const productCard = this.page.locator(`article:has-text("${title}"), [data-testid="product-card"]:has-text("${title}")`);
     await expect(productCard).toBeVisible();
   }
 
+  async expectProductNotVisible(title: string) {
+    await this.goto();
+    const productCard = this.page.locator(`article:has-text("${title}"), [data-testid="product-card"]:has-text("${title}")`);
+    await expect(productCard).not.toBeVisible();
+  }
+
   async clickProduct(title: string) {
     await this.page.locator(`text="${title}"`).click();
-    await this.page.waitForLoadState('networkidle');
+    await this.page.waitForLoadState('domcontentloaded');
   }
 }