Debugging End-to-End Flows

Prompt Copilot to run the next-step skill and move to the ai-training-debugging-3 branch.

• ai-training-debugging-3

Open

Open

✏️ Exercise: Using the Playwright Browser

Before diving into a full-stack bug, take a few minutes to get comfortable with Copilot's browser integration. Copilot can open a URL in the integrated Playwright browser inside VS Code, take screenshots, and interact with the page just like a user would.

1. Prompt Copilot

   • Open the browser to bitovi.com
     Open

     
     Open

     

      

2. Have it take a picture

   • Take a screenshot and tell me what you see
     Open

     

      

3. Try any interaction

   • Click a button or type in a form

Full Stack Bug

Open BUG_REPORT.md and replicate the bug in the browser.

Open

The scenario: when a user submits a comment on a support case, it gets saved to the database in ALL CAPS. The comment looks correct while typing and briefly appears normal after submission — before the page refreshes and shows it in uppercase. Strangely, all unit tests and all end-to-end tests pass. No existing test catches this behavior.

Open

The challenge is that the bug could live anywhere in the three-tier stack:

• Frontend bug — a JavaScript transformation happening before the API call

• Backend bug — the server modifying the text before writing it to the database

• Database bug — something happening at the storage layer

Without knowing which layer is responsible, this is the kind of bug that's easy to overlook and hard to trace manually. That's what the next exercise is designed to address.

✏️ Exercise: Fixing the Bug

Open BUG_REPORT.md

• Prompt Copilot

  • /debug-e2e BUG_REPORT.md

Open

1. Environment

• Copilot kills any existing terminals and restarts both servers

  • This gives the current chat full visibility into server logs

  • Backend terminal and frontend terminal are now connected to this chat

Open

2. Replicate the Bug

• Copilot opens the app in the integrated Playwright browser inside VS Code

• Steps through the bug scenario like a user

Open

3. Add Debug Logs

• Copilot traces the full flow:

  • form submit → mutation → API call → server → database

• Inserts console.log at each stage to capture what the text looks like at that point

Open

Open

4. Write a Failing Test

• Copilot writes a Playwright end-to-end test that replicates the bug

• The test fails right now, which is correct

• If the bug ever comes back, this test will catch it immediately

Open

5. Run Test & Read Logs

• Copilot runs the Playwright test in the integrated browser

Open

• Reads console output from the frontend and the backend simultaneously

Open

Open

• Pinpoints exactly which file and which line is causing the issue

6. Fix the Bug

• The logs identified the exact location — the fix is surgical

• Copilot edits only the files that need to change

Open

7. Verify Fix

• Copilot runs the Playwright test in the integrated browser

• Confirms the test now passes

• The debug loop closes

8. Remove Logs

• Copilot strips out all the temporary console.log statements

• The codebase is back to clean, with one addition: the regression test

Open

Next: Debugging Databases & SQLPreview