The Navigator

Mission Role & Focus

The Navigator specializes in behavioral integration validation, automating browser interaction tests to verify complex user flows and feature interactions.

The Target Feature

Add an interactive Topic Detail Drawer that slides in from the right when clicking a topic card, displaying details, a voter list, and a comment input form.

The Agent Friction

Testing multi-step user actions, transition animations, modal overlays, and keyboard events is brittle and prone to false positives when mocked in unit tests without a real browser context.

Explorer Setup & Pointers

• Initialize Playwright: Run the initialization command in your boilerplate directory:

  pnpm create playwright

• Write a Baseline Spec: Write a simple test file tests/drawer-flow.spec.ts asserting that clicking a topic card opens the drawer, and submitting a comment updates the details pane.
• Integrate with the Agent: Set up a command loop instructing the agent to run Playwright in headless mode (npx playwright test) after writing code. Tell it to analyze trace reports or terminal errors if the tests fail.

Mission Objectives

1. Initialize Playwright E2E testing in your local workspace.
2. Write failing E2E specifications for the detail drawer.
3. Have the agent implement the drawer component and resolve any E2E interaction failures in a closed-loop.
4. Discuss in the Show-and-Tell how browser-native E2E testing guides agents through complex state transitions.