Add navigation helpers on breadcrumbs e2e component test to stop flaky behavior on webkit

Author: webstackdev

test/e2e/helpers/index.ts

@@ -15,6 +15,7 @@ export { clearConsentCookies } from '@test/e2e/helpers/browserState'
 export { BasePage } from '@test/e2e/helpers/pageObjectModels/BasePage'
 export { ComponentPersistencePage } from '@test/e2e/helpers/pageObjectModels/ComponentPersistencePage'
 export { HeadPage } from '@test/e2e/helpers/pageObjectModels/HeadPage'
+export { BreadCrumbPage } from '@test/e2e/helpers/pageObjectModels/BreadCrumbPage'
 export {
   setupCleanTestPage,
   setupTestPage,

test/e2e/helpers/pageObjectModels/BreadCrumbPage.ts

@@ -0,0 +1,70 @@
+/**
+ * Breadcrumb-specific Page Object Model
+ */
+import type { Page } from '@playwright/test'
+import { TestError } from '@test/errors'
+import { BasePage, setupTestPage } from '@test/e2e/helpers'
+
+export class BreadCrumbPage extends BasePage {
+  protected constructor(page: Page) {
+    super(page)
+  }
+
+  static override async init(page: Page): Promise<BreadCrumbPage> {
+    await page.addInitScript(() => {
+      window.isPlaywrightControlled = true
+    })
+    const instance = new BreadCrumbPage(page)
+    await instance.onInit()
+    return instance
+  }
+
+  async navigateToListingDetail(options: {
+    listingPath: string
+    linkSelector: string
+    minSegments: number
+    notFoundMessage: string
+  }): Promise<void> {
+    const { listingPath, linkSelector, minSegments, notFoundMessage } = options
+    await setupTestPage(this.page, listingPath)
+
+    const targetHref = await this.evaluate(({ selector, segments }) => {
+      const anchors = Array.from(document.querySelectorAll<HTMLAnchorElement>(selector))
+      const candidate = anchors.find(anchor => {
+        const href = anchor.getAttribute('href')
+        if (!href || !href.startsWith('/')) {
+          return false
+        }
+        const parts = href.split('/').filter(Boolean)
+        return parts.length >= segments
+      })
+      return candidate?.getAttribute('href') ?? null
+    }, { selector: linkSelector, segments: minSegments })
+
+    if (!targetHref) {
+      throw new TestError(notFoundMessage)
+    }
+
+    const waitForLoad = this.waitForPageLoad()
+    await this.navigateToPage(targetHref)
+    await waitForLoad
+  }
+
+  async openFirstArticleDetail(): Promise<void> {
+    await this.navigateToListingDetail({
+      listingPath: '/articles',
+      linkSelector: 'main a[href^="/articles/"]',
+      minSegments: 2,
+      notFoundMessage: 'Could not find article detail link on /articles',
+    })
+  }
+
+  async openFirstServiceDetail(): Promise<void> {
+    await this.navigateToListingDetail({
+      listingPath: '/services',
+      linkSelector: 'main a[href^="/services/"]',
+      minSegments: 2,
+      notFoundMessage: 'Could not find service detail link on /services',
+    })
+  }
+}

test/e2e/specs/04-components/breadcrumbs.spec.ts

@@ -5,36 +5,29 @@
  */
 
 import {
-  BasePage,
+  BreadCrumbPage,
   expect,
-  setupTestPage,
   test,
- } from '@test/e2e/helpers'
+} from '@test/e2e/helpers'
 
 test.describe('Breadcrumbs Component', () => {
   test('@ready breadcrumbs display on article pages', async ({ page: playwrightPage }) => {
-    const page = await BasePage.init(playwrightPage)
-    await setupTestPage(playwrightPage, '/articles')
-    await page.click('a[href*="/articles/"]')
-    await page.waitForLoadState('networkidle')
+    const page = await BreadCrumbPage.init(playwrightPage)
+    await page.openFirstArticleDetail()
 
     await page.expectElementVisible('nav[aria-label="Breadcrumb"]')
   })
 
   test('@ready breadcrumbs display on service pages', async ({ page: playwrightPage }) => {
-    const page = await BasePage.init(playwrightPage)
-    await setupTestPage(playwrightPage, '/services')
-    await page.click('a[href*="/services/"]')
-    await page.waitForLoadState('networkidle')
+    const page = await BreadCrumbPage.init(playwrightPage)
+    await page.openFirstServiceDetail()
 
     await page.expectElementVisible('nav[aria-label="Breadcrumb"]')
   })
 
   test('@ready breadcrumbs show correct path', async ({ page: playwrightPage }) => {
-    const page = await BasePage.init(playwrightPage)
-    await setupTestPage(playwrightPage, '/articles')
-    await page.click('a[href*="/articles/"]')
-    await page.waitForLoadState('networkidle')
+    const page = await BreadCrumbPage.init(playwrightPage)
+    await page.openFirstArticleDetail()
 
     const count = await page.countElements('nav[aria-label="Breadcrumb"] a')
     expect(count).toBeGreaterThan(0)
@@ -45,10 +38,8 @@ test.describe('Breadcrumbs Component', () => {
   })
 
   test('@ready breadcrumb links are clickable', async ({ page: playwrightPage }) => {
-    const page = await BasePage.init(playwrightPage)
-    await setupTestPage(playwrightPage, '/articles')
-    await page.click('a[href*="/articles/"]')
-    await page.waitForLoadState('networkidle')
+    const page = await BreadCrumbPage.init(playwrightPage)
+    await page.openFirstArticleDetail()
 
     await page.click('nav[aria-label="Breadcrumb"] a')
     await page.waitForLoadState('networkidle')
@@ -57,10 +48,8 @@ test.describe('Breadcrumbs Component', () => {
   })
 
   test('@ready current page is not a link', async ({ page: playwrightPage }) => {
-    const page = await BasePage.init(playwrightPage)
-    await setupTestPage(playwrightPage, '/articles')
-    await page.click('a[href*="/articles/"]')
-    await page.waitForLoadState('networkidle')
+    const page = await BreadCrumbPage.init(playwrightPage)
+    await page.openFirstArticleDetail()
 
     // Last item should have aria-current="page" on the span, not be a link
     await page.expectElementVisible('nav[aria-label="Breadcrumb"] li:last-child span[aria-current="page"]')
@@ -71,10 +60,8 @@ test.describe('Breadcrumbs Component', () => {
   })
 
   test('@ready breadcrumbs have proper separators', async ({ page: playwrightPage }) => {
-    const page = await BasePage.init(playwrightPage)
-    await setupTestPage(playwrightPage, '/articles')
-    await page.click('a[href*="/articles/"]')
-    await page.waitForLoadState('networkidle')
+    const page = await BreadCrumbPage.init(playwrightPage)
+    await page.openFirstArticleDetail()
 
     const itemCount = await page.countElements('nav[aria-label="Breadcrumb"] li')
     expect(itemCount).toBeGreaterThan(1)
@@ -85,10 +72,8 @@ test.describe('Breadcrumbs Component', () => {
   })
 
   test('@ready breadcrumbs use proper ARIA', async ({ page: playwrightPage }) => {
-    const page = await BasePage.init(playwrightPage)
-    await setupTestPage(playwrightPage, '/articles')
-    await page.click('a[href*="/articles/"]')
-    await page.waitForLoadState('networkidle')
+    const page = await BreadCrumbPage.init(playwrightPage)
+    await page.openFirstArticleDetail()
 
     await page.expectElementVisible('nav[aria-label="Breadcrumb"]')
 
@@ -97,22 +82,17 @@ test.describe('Breadcrumbs Component', () => {
   })
 
   test('@ready breadcrumbs are responsive', async ({ page: playwrightPage }) => {
-    const page = await BasePage.init(playwrightPage)
+    const page = await BreadCrumbPage.init(playwrightPage)
     await page.setViewport(375, 667)
-    await setupTestPage(playwrightPage, '/articles')
-
-    await page.click('a[href*="/articles/"]', { force: true }) // Bypass cookie dialog overlay
-    await page.waitForLoadState('networkidle')
+    await page.openFirstArticleDetail()
 
     await page.expectElementVisible('nav[aria-label="Breadcrumb"]')
   })
 
   test('@ready breadcrumbs have structured data', async ({ page: playwrightPage }) => {
     // Expected: Should include JSON-LD BreadcrumbList schema
-    const page = await BasePage.init(playwrightPage)
-    await setupTestPage(playwrightPage, '/articles')
-    await page.click('a[href*="/articles/"]')
-    await page.waitForLoadState('networkidle')
+    const page = await BreadCrumbPage.init(playwrightPage)
+    await page.openFirstArticleDetail()
 
     const jsonLd = await playwrightPage.locator('script[type="application/ld+json"]').allTextContents()
     const hasBreadcrumbSchema = jsonLd.some((json) => json.includes('BreadcrumbList'))
@@ -121,10 +101,8 @@ test.describe('Breadcrumbs Component', () => {
   })
 
   test('@ready breadcrumbs truncate long titles', async ({ page: playwrightPage }) => {
-    const page = await BasePage.init(playwrightPage)
-    await setupTestPage(playwrightPage, '/articles')
-    await page.click('a[href*="/articles/"]')
-    await page.waitForLoadState('networkidle')
+    const page = await BreadCrumbPage.init(playwrightPage)
+    await page.openFirstArticleDetail()
 
     const hasEllipsis = await playwrightPage.locator('nav[aria-label="Breadcrumb"] li').last().evaluate((el) => {
       const styles = window.getComputedStyle(el)