test-improvements

name	test-improvements
description	Use after code edits, bug fixes, or feature additions in the Gofannon Mk III web app to verify the change end-to-end with a localhost browser flow, automatic test authentication when safe, frontend console capture, Firebase or emulator backend log review, screenshots, cleanup, and a pass/fail report.

Test Improvements

Use this skill when the user wants to test a recent code change, bug fix, or feature improvement in the Gofannon Mk III web app. This skill coordinates browser automation with backend log collection to verify that changes work end-to-end.

Prerequisites

• Chrome/Chromium must be running with --remote-debugging-port=9222
• The local dev server should be running (usually Vite on localhost:5173)
• Firebase CLI (firebase) must be available for backend log access

Steps

1. Connect to the browser

Use browser_connect to attach to the Chrome DevTools Protocol on port 9222.

2. Discover the correct dev server port

Before navigating, verify which port the frontend is actually running on:

• Primary: http://localhost:5173 (Vite default)
• Fallbacks to try if 5173 is down: http://localhost:3000, http://localhost:8080, http://localhost:5000, http://localhost:5003, http://localhost:8000

Use browser_navigate with waitUntil=domcontentloaded and a short timeout to probe. Stop at the first responding URL and report which port succeeded.

Important: Use http:// for localhost, not https://, to avoid ERR_SSL_PROTOCOL_ERROR.

3. Authenticate (localhost only)

If the dev server is running on localhost, authentication must be handled automatically so tests can bypass the whitelist gate:

1. Create a random test user via browser_eval using Firebase Auth's anonymous sign-in or email/password creation:

   // Option A: Anonymous sign-in
   const { signInAnonymously } = await import('firebase/auth');
   const userCredential = await signInAnonymously(window.__auth);
   
   // Option B: Email/password (if anon is disabled)
   const { createUserWithEmailAndPassword } = await import('firebase/auth');
   const randomEmail = `test-${Date.now()}@example.com`;
   const userCredential = await createUserWithEmailAndPassword(window.__auth, randomEmail, 'TestPassword123!');
   

   Save the uid and email for cleanup.

2. Bypass whitelisting by directly writing to Firestore via browser_eval or a local Firebase Admin script:

   // Via browser_eval using Firestore SDK
   const { doc, setDoc } = await import('firebase/firestore');
   await setDoc(doc(window.__db, 'users', uid), {
     isAdmin: false,
     isWhitelisted: true,
     email: email,
     createdAt: Date.now()
   });
   

   If the Firestore SDK is not exposed on window, use a temporary local Node script with Firebase Admin instead.

3. Refresh the page so the app picks up the new auth state and profile.

Note: Only do this on localhost. Never auto-create admin/test users against production.

4. Understand what changed

Ask the user (or infer from recent edits / AGENTS.md / git status) what feature or fix needs testing. Determine:

• Which page or route to start on
• What UI elements to interact with
• What state change or API call to expect
• What success looks like vs. what failure looks like

If the user already described the change in the current session context, proceed without re-asking.

5. Navigate and exercise the app

Using Playwright CDP tools, simulate a realistic user flow:

1. Navigate to the starting route.
2. Wait for key elements to appear (networkidle or domcontentloaded).
3. Click buttons, fill forms, or trigger actions relevant to the improvement.
4. Wait for navigation, modal open, toast notification, or API response.
5. Capture any visible errors, toasts, or 404s.

Take a screenshot after each significant state change and save it to /tmp/gofannon-test-<step>.png.

6. Collect frontend logs

Use browser_console to capture:

• error logs (mandatory)
• warning logs (if relevant)
• log / info logs (optional, if debugging)

If the page was just loaded, you may need to reload with browser_reload and re-exercise the flow so logs are captured in the current CDP session, or use browser_eval to run window.console.error etc. and collect them.

Alternatively, use browser_eval to execute:

JSON.stringify((window.__consoleLogs || []).slice(-100))

if the app buffers logs; otherwise rely on CDP Runtime.consoleAPICalled events.

7. Collect backend logs

Run one or more of the following CLI commands (whichever is available in this project):

# Firebase Functions logs (last 50 lines, recent 5 minutes)
firebase functions:log --limit=50

# OR more targeted gcloud logging
 gcloud logging read "resource.type=cloud_function" --limit=50 --format=json

# OR if using Firebase Functions v2 / Cloud Run
 gcloud logging read "resource.type=cloud_run_revision" --limit=50 --format=json

# OR tail local emulator logs if running locally
 cat /tmp/firebase-*.log 2>/dev/null | tail -n 100

If firebase functions:log fails because the project is not deployed yet, fall back to local emulator logs or the dev server terminal output.

8. Clean up test user

After tests complete (pass or fail), delete the random test user:

1. Delete the Firestore user document:

   # Via Firebase CLI if emulator is running
   curl -X DELETE "http://localhost:8080/emulator/v1/projects/${PROJECT_ID}/databases/(default)/documents/users/${UID}"
   
   # Or via Firebase Admin script
   

2. Delete the Firebase Auth account:

   # Via Firebase Auth REST API (emulator)
   curl -X POST "http://localhost:9099/identitytoolkit.googleapis.com/v1/accounts:delete?key=fake-key" \
     -H "Content-Type: application/json" \
     -d "{\"localId\":\"${UID}\"}"
   

If cleanup fails, log the leftover UID so the user can remove it manually.

9. Report results

Summarize in a concise markdown table:

Check	Result
Dev server port	localhost:XXXX
Test user created	✅ <uid> / ❌
App loads without console errors	✅ / ❌
User flow exercised	(describe)
Backend errors	✅ none / ❌ (list)
Test user cleaned up	✅ / ❌
Screenshots	/tmp/gofannon-test-*.png

Attach the screenshots to your response.

Failure modes and recovery

• Browser not on 9222: Start a headless Chrome instance automatically with:

  google-chrome-stable --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug --headless
  

  Wait a moment for it to boot, then retry browser_connect. If google-chrome-stable is not found, fall back to chromium-browser or chromium.
• No dev server responding: List the ports probed and ask the user to start the dev server (npm run dev)
• Firebase CLI not found: Suggest installing it or use gcloud directly
• CDP connection drops: Retry browser_connect once

Example invocation

/skill:test-improvements

or naturally:

Test the login fix I just pushed