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/change-pin.spec.ts

@@ -6,6 +6,17 @@ import { E2E_PIN } from '../../e2e-constants'
 const BACKEND = 'http://localhost:5000'
 const NEW_PIN = '5678'
 
+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' })
+}
+
 async function setPinDirectly(request: APIRequestContext, pin: string): Promise<void> {
   // Request a new code, retrieve it via test endpoint, verify it, then set the pin
   await request.post(`${BACKEND}/user/request-pin-setup`)
@@ -25,6 +36,7 @@ test.describe('User Profile – Change Parent PIN', () => {
 
   test('Change Parent PIN link navigates to PIN setup page', async ({ page }) => {
     await page.goto('/parent/profile')
+    await openAccountSection(page)
 
     await page.getByRole('button', { name: 'Change Parent PIN' }).click()
 
@@ -35,6 +47,7 @@ test.describe('User Profile – Change Parent PIN', () => {
   test('Back from PIN setup page returns to profile', async ({ page }) => {
     // Navigate from the profile page so browser history exists
     await page.goto('/parent/profile')
+    await openAccountSection(page)
     await page.getByRole('button', { name: 'Change Parent PIN' }).click()
     await expect(page).toHaveURL(/\/parent\/pin-setup/)