chore/frontend/e2e/plans/parent-profile-button.plan.md

Parent Profile Button

Application Overview

In parent mode, the top right of the screen should display the parent's profile icon. When clicking this icon, a menu should appear giving options to select. This is a parent mode only test, and probably should be in it's own bucket of tests

Profile Button Badge:

• There are 2 modes for the parent profile button in parent mode: Temporary access and Permanent access.
• In temporary mode, there is no badge overlaying the profile icon button. This mode will revert back to child mode after after 1 minute or a reload of the site (see feat-parent-mode-expire.md)
• In permanent mode, there should be a lock emoji badge over the icon button. This lets the user know that parent mode is active for 2 days. Reloading the page still keeps permanent mode. (see feat-parent-mode-expire.md)

Profile Button Menu Options: When clicking the profile button, we should see the user's selected profile picture, name, and email. Verify those are present. Under this are options.

1. Profile
   • This option should take the user to the Edit Profile page. We just need to verify that page is there, testing the page will be for another plan.
2. Child Mode
   • Clicking this will take us out of parent mode and back to child mode. This can be verified by no longer having the view-selector navigation tab at the top-middle of the screen.
   • In Child mode, clicking the profile button again should prompt us for the parent PIN.
   • Entering the correct PIN will take us back into temporary parent mode. It will take us back into permanent parent mode if the checkbox is selected during PIN entry.
3. Sign Out
   • This will take us back to the landing page.

---

Implementation

Constants

E2E_FIRST_NAME and STORAGE_STATE_TEMP_PARENT were added to e2e/e2e-constants.ts. E2E_FIRST_NAME holds the first name of the seeded test user and is used to verify the name appears in the profile menu.

Auth Setup

e2e/auth-temp-parent.setup.ts was created to produce a temporary parent mode storage state (logs in and enters PIN without checking "Stay in parent mode"). It depends on setup so it runs after the database is seeded.

Playwright Projects (playwright.config.ts)

Two new isolated projects were added:

• chromium-profile-button — uses the standard permanent parent mode storage state. Runs all spec files under e2e/mode_parent/profile-button/.
• chromium-profile-button-temp — uses the temporary parent mode storage state. Runs the temporary-mode badge spec only.

Both projects are excluded from the catch-all chromium-tasks-rewards project.

Test Files

e2e/mode_parent/profile-button/profile-button.spec.ts ✅ IMPLEMENTED

Covers all permanent parent mode scenarios (7 tests):

1. Badge – 🔒 visible in permanent mode ✅
2. Menu – shows user name and email ✅
3. Menu → Profile navigates to User Profile page ✅
4. Menu → Child Mode exits parent mode ✅ (view-selector disappears, button label changes to "Parent login")
5. Menu → Child Mode re-entry without checkbox enters temporary mode ✅ (no 🔒 badge after re-entry)
6. Menu → Child Mode re-entry with checkbox enters permanent mode ✅ (🔒 badge visible after re-entry)
7. Menu → Sign Out navigates to landing page ✅ ("Sign In" nav button visible)

e2e/mode_parent/profile-button/profile-button-temporary.spec.ts ✅ IMPLEMENTED

Covers the temporary parent mode badge scenario (1 test):

1. Badge – no 🔒 badge in temporary mode ✅ (enters temp mode by exiting to child mode then re-entering PIN without "Stay" checkbox)