110 lines
3.5 KiB
TypeScript
110 lines
3.5 KiB
TypeScript
import type { Page } from "@playwright/test"
|
|
import { test as base, expect as pwExpect } from "@playwright/test"
|
|
|
|
export { expect, type Page, API_BASE, clickSpaLink } from "../e2e/fixtures"
|
|
import { expect } from "../e2e/fixtures"
|
|
|
|
type MobileFixtures = {}
|
|
|
|
export const test = base.extend<MobileFixtures>({
|
|
/**
|
|
* Override page fixture: BrowserSync domcontentloaded workaround.
|
|
*/
|
|
page: async ({ page }, use) => {
|
|
const origGoto = page.goto.bind(page)
|
|
const origReload = page.reload.bind(page)
|
|
|
|
page.goto = ((url: string, opts?: any) =>
|
|
origGoto(url, { waitUntil: "domcontentloaded", ...opts })) as typeof page.goto
|
|
page.reload = ((opts?: any) => origReload({ waitUntil: "domcontentloaded", ...opts })) as typeof page.reload
|
|
|
|
await use(page)
|
|
},
|
|
})
|
|
|
|
/**
|
|
* Wait for the SPA to be ready in mobile viewport.
|
|
*/
|
|
export async function waitForSpaReady(page: Page): Promise<string> {
|
|
await page.waitForLoadState("domcontentloaded")
|
|
await expect(page.locator("#appContainer")).not.toBeEmpty({ timeout: 15000 })
|
|
const url = page.url()
|
|
const match = url.match(/\/([a-z]{2})(\/|$)/)
|
|
return match?.[1] || "de"
|
|
}
|
|
|
|
/**
|
|
* Navigate to a route with language prefix.
|
|
*/
|
|
export async function navigateToRoute(page: Page, routePath: string): Promise<void> {
|
|
const url = page.url()
|
|
const match = url.match(/\/([a-z]{2})(\/|$)/)
|
|
const lang = match?.[1] || "de"
|
|
const fullPath = routePath === "/" ? `/${lang}` : `/${lang}${routePath}`
|
|
await page.goto(fullPath, { waitUntil: "domcontentloaded" })
|
|
await expect(page.locator("#appContainer")).not.toBeEmpty({ timeout: 15000 })
|
|
}
|
|
|
|
/** Check if viewport width is mobile (<768px) */
|
|
export function isMobileViewport(page: Page): boolean {
|
|
return (page.viewportSize()?.width ?? 0) < 768
|
|
}
|
|
|
|
/** Check if viewport width is tablet (768-1023px) */
|
|
export function isTabletViewport(page: Page): boolean {
|
|
const w = page.viewportSize()?.width ?? 0
|
|
return w >= 768 && w < 1024
|
|
}
|
|
|
|
/** Check if viewport width is below lg breakpoint (<1024px) */
|
|
export function isBelowLg(page: Page): boolean {
|
|
return (page.viewportSize()?.width ?? 0) < 1024
|
|
}
|
|
|
|
/**
|
|
* Open the hamburger/mobile navigation menu.
|
|
* Finds the first visible button with aria-expanded in the header.
|
|
*/
|
|
export async function openHamburgerMenu(page: Page): Promise<void> {
|
|
const hamburgers = page.locator("header button[aria-expanded]")
|
|
const count = await hamburgers.count()
|
|
let clicked = false
|
|
for (let i = 0; i < count; i++) {
|
|
const btn = hamburgers.nth(i)
|
|
if (await btn.isVisible()) {
|
|
await btn.click()
|
|
clicked = true
|
|
break
|
|
}
|
|
}
|
|
if (!clicked) {
|
|
throw new Error("No visible hamburger button found in header")
|
|
}
|
|
await page.waitForTimeout(500)
|
|
await page
|
|
.waitForFunction(
|
|
() => {
|
|
const btn = document.querySelector<HTMLButtonElement>("header button[aria-expanded='true']")
|
|
return btn !== null
|
|
},
|
|
{ timeout: 5000 }
|
|
)
|
|
.catch(() => {})
|
|
}
|
|
|
|
/**
|
|
* Close the hamburger menu via Escape key.
|
|
*/
|
|
export async function closeHamburgerMenuViaEscape(page: Page): Promise<void> {
|
|
await page.keyboard.press("Escape")
|
|
await page
|
|
.waitForFunction(
|
|
() => {
|
|
const btn = document.querySelector<HTMLButtonElement>("header button[aria-expanded='true']")
|
|
return btn === null
|
|
},
|
|
{ timeout: 5000 }
|
|
)
|
|
.catch(() => {})
|
|
}
|