feat(playwright-cli): add comprehensive test generation, tracing, and video recording documentation

- Introduced detailed documentation for test generation workflow in Playwright CLI, covering planning, generating, and healing tests.
- Added tracing capabilities documentation, including usage, output files, and best practices for debugging and performance analysis.
- Included video recording instructions, emphasizing best practices for capturing browser automation sessions with chapter markers and overlays.
- Implemented user tutorial authentication setup and tutorial tests for parent mode in the E2E testing framework.
- Created JSON files for user tutorial state management, ensuring isolated test environments.

frontend/e2e/mode_parent/notifications/push-subscription.spec.ts

@@ -9,6 +9,17 @@ function pushToggle(page: Page) {
     .locator('button.toggle-btn')
 }
 
+async function openNotificationsSection(page: Page): Promise<void> {
+  const header = page
+    .locator('.profile-section')
+    .filter({ has: page.locator('.section-title', { hasText: 'Notifications' }) })
+    .locator('.section-header')
+  if ((await header.getAttribute('aria-expanded')) === 'false') {
+    await header.click()
+  }
+  await page.locator('#section-notifications').waitFor({ state: 'visible' })
+}
+
 test.describe('Push subscription registration', () => {
   // -------------------------------------------------------------------------
   // 1.3 No subscription POST when notification permission not granted
@@ -26,6 +37,7 @@ test.describe('Push subscription registration', () => {
     })
 
     await page.goto('/parent/profile')
+    await openNotificationsSection(page)
     const toggle = pushToggle(page)
     await expect(toggle).toBeVisible({ timeout: 5000 })
     const isDisabled = await toggle.isDisabled().catch(() => false)

frontend/e2e/mode_parent/notifications/user-profile-notification-settings.spec.ts

@@ -16,6 +16,17 @@ function pushToggle(page: Page) {
     .locator('button.toggle-btn')
 }
 
+async function openNotificationsSection(page: Page): Promise<void> {
+  const header = page
+    .locator('.profile-section')
+    .filter({ has: page.locator('.section-title', { hasText: 'Notifications' }) })
+    .locator('.section-header')
+  if ((await header.getAttribute('aria-expanded')) === 'false') {
+    await header.click()
+  }
+  await page.locator('#section-notifications').waitFor({ state: 'visible' })
+}
+
 test.describe('User Profile Notification Settings', () => {
   test.describe.configure({ mode: 'serial' })
 
@@ -24,6 +35,7 @@ test.describe('User Profile Notification Settings', () => {
   // ---------------------------------------------------------------------------
   test('Email Digest toggle is visible on User Profile page', async ({ page }) => {
     await page.goto('/parent/profile')
+    await openNotificationsSection(page)
     await expect(digestToggle(page)).toBeVisible({ timeout: 5000 })
   })
 
@@ -34,11 +46,13 @@ test.describe('User Profile Notification Settings', () => {
     // Set known state: enabled
     await request.put('/api/user/profile', { data: { email_digest_enabled: true } })
     await page.goto('/parent/profile')
+    await openNotificationsSection(page)
     await expect(digestToggle(page)).toHaveAttribute('aria-pressed', 'true', { timeout: 5000 })
 
     // Set known state: disabled
     await request.put('/api/user/profile', { data: { email_digest_enabled: false } })
     await page.reload()
+    await openNotificationsSection(page)
     await expect(digestToggle(page)).toHaveAttribute('aria-pressed', 'false', { timeout: 5000 })
 
     // Restore default
@@ -51,6 +65,7 @@ test.describe('User Profile Notification Settings', () => {
   test('Toggling Email Digest off sends correct API payload', async ({ page, request }) => {
     await request.put('/api/user/profile', { data: { email_digest_enabled: true } })
     await page.goto('/parent/profile')
+    await openNotificationsSection(page)
     // Wait for profile to load and toggle to reflect server state
     await expect(digestToggle(page)).toHaveAttribute('aria-pressed', 'true', { timeout: 5000 })
 
@@ -64,9 +79,7 @@ test.describe('User Profile Notification Settings', () => {
 
     await digestToggle(page).click()
 
-    // Submit the form (Save button)
-    await page.getByRole('button', { name: 'Save' }).click()
-
+    // Toggles auto-save; wait for the PUT and verify the payload.
     await page.waitForTimeout(500)
     expect(capturedBody).not.toBeNull()
     expect((capturedBody as Record<string, unknown>)['email_digest_enabled']).toBe(false)
@@ -82,6 +95,7 @@ test.describe('User Profile Notification Settings', () => {
   test('Toggling Email Digest on sends correct API payload', async ({ page, request }) => {
     await request.put('/api/user/profile', { data: { email_digest_enabled: false } })
     await page.goto('/parent/profile')
+    await openNotificationsSection(page)
     // Wait for profile to load and toggle to reflect server state
     await expect(digestToggle(page)).toHaveAttribute('aria-pressed', 'false', { timeout: 5000 })
 
@@ -94,7 +108,6 @@ test.describe('User Profile Notification Settings', () => {
     })
 
     await digestToggle(page).click()
-    await page.getByRole('button', { name: 'Save' }).click()
 
     await page.waitForTimeout(500)
     expect(capturedBody).not.toBeNull()
@@ -110,6 +123,7 @@ test.describe('User Profile Notification Settings', () => {
   // ---------------------------------------------------------------------------
   test('Push Notifications toggle is visible on User Profile page', async ({ page }) => {
     await page.goto('/parent/profile')
+    await openNotificationsSection(page)
     await expect(pushToggle(page)).toBeVisible({ timeout: 5000 })
   })
 
@@ -121,6 +135,7 @@ test.describe('User Profile Notification Settings', () => {
   }) => {
     // Do NOT grant notifications permission — toggle should start unchecked
     await page.goto('/parent/profile')
+    await openNotificationsSection(page)
     const toggle = pushToggle(page)
     await expect(toggle).toBeVisible({ timeout: 5000 })
     // Either aria-pressed="false" or disabled (when browser denies permissions)
@@ -138,6 +153,7 @@ test.describe('User Profile Notification Settings', () => {
     // Do not grant permission (leave as denied/prompt)
     await context.clearPermissions()
     await page.goto('/parent/profile')
+    await openNotificationsSection(page)
     const toggle = pushToggle(page)
     await expect(toggle).toBeVisible({ timeout: 5000 })
     // When permission is denied, the toggle should be disabled or aria-pressed="false"