claude-ui-testlisted

# Claude UI test ## Guards - If no implementation context exists in the session, stop: `❌ No implementation context. Describe what you built first.` ## Analysis Review the session to identify what was built or changed. Categorize each change: - **Automatable:** interactions, state transitions, form submissions, keyboard navigation, conditional rendering, error states, empty states, loading states. These become Playwright e2e tests. - **Visual-only:** spacing, alignment, color, typography, layout proportions, animation timing. These become a manual checklist. Exclude anything already covered by unit or component tests written during implementation. ## E2e tests Write Playwright tests for all automatable changes. Follow these rules: - Add tests to the existing e2e test file. If none exists, create `e2e/ui.test.ts`. - Use the project's existing Playwright config and test patterns. Read them first. - Each test should perform a user action and assert the expected outcome. - Cover both happy path and key edge cases (empty state, error state, boundary input). - For Chrome extensions: load the unpacked extension via Playwright's `--load-extension` flag and use the extension's sidepanel or popup URL as the test target. - Run the tests after writing them. Fix failures before finishing. Test structure: ```typescript test('description of user flow', async ({ page }) => { // Arrange: navigate, set up state // Act: perform user action // Assert: verify expected outcome })