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/user-profile/delete-account.spec.ts

@@ -3,11 +3,23 @@
 import { test, expect } from '@playwright/test'
 import { E2E_DELETE_EMAIL, E2E_DELETE_PASSWORD } from '../../e2e-constants'
 
+async function openAccountSection(page: import('@playwright/test').Page): Promise<void> {
+  const accountHeader = page
+    .locator('.profile-section')
+    .filter({ has: page.locator('.section-title', { hasText: 'Account' }) })
+    .locator('.section-header')
+  if ((await accountHeader.getAttribute('aria-expanded')) === 'false') {
+    await accountHeader.click()
+  }
+  await page.locator('#section-account').waitFor({ state: 'visible' })
+}
+
 test.describe('User Profile – Delete Account', () => {
   test.describe.configure({ mode: 'serial' })
 
   test('Delete My Account opens confirmation dialog', async ({ page }) => {
     await page.goto('/parent/profile')
+    await openAccountSection(page)
 
     await page.getByRole('button', { name: 'Delete My Account' }).click()
 
@@ -24,6 +36,7 @@ test.describe('User Profile – Delete Account', () => {
 
   test('Delete button stays disabled for incomplete email', async ({ page }) => {
     await page.goto('/parent/profile')
+    await openAccountSection(page)
     await page.getByRole('button', { name: 'Delete My Account' }).click()
     await expect(page.locator('.modal-title', { hasText: 'Delete Your Account?' })).toBeVisible()
 
@@ -36,6 +49,7 @@ test.describe('User Profile – Delete Account', () => {
 
   test('Delete button enables when matching email is entered', async ({ page }) => {
     await page.goto('/parent/profile')
+    await openAccountSection(page)
     await page.getByRole('button', { name: 'Delete My Account' }).click()
     await expect(page.locator('.modal-title', { hasText: 'Delete Your Account?' })).toBeVisible()
 
@@ -48,6 +62,7 @@ test.describe('User Profile – Delete Account', () => {
 
   test('Cancel closes the dialog without deleting the account', async ({ page }) => {
     await page.goto('/parent/profile')
+    await openAccountSection(page)
     await page.getByRole('button', { name: 'Delete My Account' }).click()
     await expect(page.locator('.modal-title', { hasText: 'Delete Your Account?' })).toBeVisible()
 
@@ -57,12 +72,13 @@ test.describe('User Profile – Delete Account', () => {
     await expect(
       page.locator('.modal-title', { hasText: 'Delete Your Account?' }),
     ).not.toBeVisible()
-    await expect(page.getByRole('heading', { name: 'User Profile' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Profile' })).toBeVisible()
     await expect(page).toHaveURL(/\/parent\/profile/)
   })
 
   test('Backdrop click does NOT close the delete dialog', async ({ page }) => {
     await page.goto('/parent/profile')
+    await openAccountSection(page)
     await page.getByRole('button', { name: 'Delete My Account' }).click()
     await expect(page.locator('.modal-title', { hasText: 'Delete Your Account?' })).toBeVisible()
 
@@ -77,6 +93,7 @@ test.describe('User Profile – Delete Account', () => {
     page,
   }) => {
     await page.goto('/parent/profile')
+    await openAccountSection(page)
     await page.getByRole('button', { name: 'Delete My Account' }).click()
     await expect(page.locator('.modal-title', { hasText: 'Delete Your Account?' })).toBeVisible()