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/create-child/validation.spec.ts

@@ -14,6 +14,11 @@ test.describe('Create Child', () => {
 
     // Navigate to parent list and wait for it to fully load before clicking Add Child
     await gotoParentList(page)
+    // Dismiss tutorial overlay if present — it intercepts pointer events
+    const skip = page.getByRole('button', { name: 'Skip tour' })
+    if (await skip.isVisible({ timeout: 1000 }).catch(() => false)) {
+      await skip.click()
+    }
     await page.getByRole('button', { name: 'Add Child' }).click()
     await expect(page.getByRole('heading', { name: 'Create Child' })).toBeVisible()
   })
@@ -30,7 +35,7 @@ test.describe('Create Child', () => {
   test('Reject submission when Name is whitespace only', async ({ page }) => {
     // 2. Enter only spaces in Name, enter '7' in Age - Create remains disabled
     const createButton = page.getByRole('button', { name: 'Create' })
-    await page.getByLabel('Name').fill('   ')
+    await page.getByRole('textbox', { name: 'Name' }).fill('   ')
     await page.getByLabel('Age').fill('7')
 
     await expect(createButton).toBeDisabled()
@@ -39,7 +44,7 @@ test.describe('Create Child', () => {
 
   test('Reject submission when Age is empty', async ({ page }) => {
     // 2. Enter 'Charlie', clear Age - Create button should be disabled
-    await page.getByLabel('Name').fill('Charlie')
+    await page.getByRole('textbox', { name: 'Name' }).fill('Charlie')
     await page.getByLabel('Age').clear()
 
     await expect(page.getByRole('button', { name: 'Create' })).toBeDisabled()
@@ -49,7 +54,7 @@ test.describe('Create Child', () => {
   test('Reject negative age', async ({ page }) => {
     // 2. Enter 'Dave', enter '-1' - Create remains disabled
     const createButton = page.getByRole('button', { name: 'Create' })
-    await page.getByLabel('Name').fill('Dave')
+    await page.getByRole('textbox', { name: 'Name' }).fill('Dave')
     await page.getByLabel('Age').fill('-1')
 
     await expect(createButton).toBeDisabled()
@@ -57,7 +62,7 @@ test.describe('Create Child', () => {
   })
 
   test('Enforce maximum Name length of 64 characters', async ({ page, request }) => {
-    const nameInput = page.getByLabel('Name')
+    const nameInput = page.getByRole('textbox', { name: 'Name' })
     const ageInput = page.getByLabel('Age')
     const createButton = page.getByRole('button', { name: 'Create' })
 
@@ -85,7 +90,7 @@ test.describe('Create Child', () => {
 
   test('Reject age greater than 120', async ({ page }) => {
     // 2. Enter 'Eve', enter '121' in Age - Create button should be disabled
-    await page.getByLabel('Name').fill('Eve')
+    await page.getByRole('textbox', { name: 'Name' }).fill('Eve')
     await page.getByLabel('Age').fill('121')
 
     await expect(page.getByRole('button', { name: 'Create' })).toBeDisabled()