Add end-to-end tests for parent item management

- Implement tests for creating, editing, and deleting chores, kindness acts, and penalties.
- Add tests to verify conversion of default items to user items and restoration of system defaults upon deletion.
- Ensure proper cancellation of creation and editing actions.
- Create a comprehensive plan document outlining the test scenarios and expected behaviors.

frontend/vue-app/e2e/mode_parent/tasks/test-simple-chore.spec.ts

@@ -0,0 +1,51 @@
+import { test, expect } from '@playwright/test'
+
+test('Simple chore creation test', async ({ page }) => {
+  // Navigate to chores
+  await page.goto('/parent/tasks/chores')
+
+  // Click the Create Chore FAB
+  await page.getByRole('button', { name: 'Create Chore' }).click()
+
+  // Wait for form to load
+  await expect(page.locator('text=Chore Name')).toBeVisible()
+
+  // Fill form using custom evaluation
+  await page.evaluate(() => {
+    // Fill name
+    const nameInput = document.querySelector('input[type="text"], input:not([type])')
+    if (nameInput) {
+      nameInput.value = 'Simple Chore Test'
+      nameInput.dispatchEvent(new Event('input', { bubbles: true }))
+      nameInput.dispatchEvent(new Event('change', { bubbles: true }))
+    }
+
+    // Fill points
+    const pointsInput = document.querySelector('input[type="number"]')
+    if (pointsInput) {
+      pointsInput.value = '5'
+      pointsInput.dispatchEvent(new Event('input', { bubbles: true }))
+      pointsInput.dispatchEvent(new Event('change', { bubbles: true }))
+    }
+
+    // Click first image to select it
+    const firstImage = document.querySelector('img[alt*="Image"]')
+    if (firstImage) {
+      firstImage.click()
+    }
+  })
+
+  // Wait a moment for validation to trigger
+  await page.waitForTimeout(500)
+
+  // Click Create button
+  await page.getByRole('button', { name: 'Create' }).click()
+
+  // Verify we're back on the list page and item was created
+  // locate the name element, then move up to the row container
+  const choreName = page.locator('text=Simple Chore Test').first()
+  const choreRow = choreName.locator('..')
+  await expect(choreRow).toBeVisible()
+  // the row container should display the correct points value
+  await expect(choreRow.locator('text=5 pts')).toBeVisible()
+})