✨ feat: add video tour functionality with helpers, configuration, and homepage walkthrough

video-tours/tours/fixtures.ts

@@ -0,0 +1,29 @@
+import { test as base, type Page } from "@playwright/test"
+import { injectVisibleCursor } from "../helpers"
+
+/**
+ * Extended test fixtures for video tours.
+ *
+ * - `tourPage`: A page with visible cursor overlay, ready for recording.
+ *
+ * Add project-specific setup (cookie consent, modals, etc.) here.
+ */
+type TourFixtures = {
+    tourPage: Page
+}
+
+export const tour = base.extend<TourFixtures>({
+    tourPage: async ({ page }, use) => {
+        // Inject visible cursor (must be before first goto)
+        await injectVisibleCursor(page)
+
+        // Override navigation to always use domcontentloaded (BrowserSync keeps WS open)
+        const origGoto = page.goto.bind(page)
+        page.goto = ((url: string, opts?: any) =>
+            origGoto(url, { waitUntil: "domcontentloaded", ...opts })) as typeof page.goto
+
+        await use(page)
+    },
+})
+
+export { expect } from "@playwright/test"

video-tours/tours/homepage.tour.ts

@@ -0,0 +1,49 @@
+import { tour } from "./fixtures"
+import { moveThenClick, smoothScroll } from "../helpers"
+
+/**
+ * Video tour: Homepage walkthrough
+ *
+ * Demonstrates the main page navigation:
+ * 1. Homepage overview with scroll
+ * 2. Navigation links
+ *
+ * Adapt the steps below when the UI changes.
+ * Run: yarn tour
+ */
+tour("Homepage Walkthrough", async ({ tourPage: page }) => {
+    tour.setTimeout(60000)
+
+    // ── 1. Homepage ──────────────────────────────────────────────────
+    await page.goto("/")
+    await page.waitForTimeout(2500)
+
+    // Scroll down to see page content
+    await smoothScroll(page, 400)
+    await page.waitForTimeout(2000)
+
+    // Scroll back up
+    await smoothScroll(page, 0)
+    await page.waitForTimeout(1000)
+
+    // ── 2. Navigate via links ────────────────────────────────────────
+    const navLinks = page.locator("nav a")
+    const count = await navLinks.count()
+
+    for (let i = 0; i < Math.min(count, 3); i++) {
+        const link = navLinks.nth(i)
+        if (await link.isVisible({ timeout: 2000 }).catch(() => false)) {
+            await moveThenClick(page, link)
+            await page.waitForTimeout(2000)
+
+            // Scroll a bit on each page
+            await smoothScroll(page, 300)
+            await page.waitForTimeout(1500)
+            await smoothScroll(page, 0)
+            await page.waitForTimeout(500)
+        }
+    }
+
+    // Final pause
+    await page.waitForTimeout(1500)
+})