Skip to content

Fully implement .playwright-mcp/page.yml with route model, readiness checks, and automation flows #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Copilot wants to merge 3 commits into
base: feat/create-playwright-mcp-config
Choose a base branch
from
+223 −0
Open

Fully implement .playwright-mcp/page.yml with route model, readiness checks, and automation flows #71

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
138d833
chore: plan page.yml implementation for playwright-mcp
Copilot Apr 14, 2026
99b8b1d
feat: fully implement playwright-mcp page.yml with substantial route …
Copilot Apr 14, 2026
4058006
fix: address review comments for page.yml implementation
Copilot Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
223 changes: 223 additions & 0 deletions .playwright-mcp/page.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,224 @@
version: 1
name: claude-code-agent-monitor
description: >
Playwright MCP page model for the Claude Code Agent Monitor dashboard.
This file defines stable navigation targets, readiness checks, and
high-value interaction flows for browser automation and validation.

app:
base_url: http://localhost:5173
production_url: http://localhost:4820
shell:
sidebar_brand: Agent Dashboard
nav_items:
- Dashboard
- Agent Board
- Sessions
- Activity Feed
- Analytics
- Workflows
- Settings
websocket_indicators:
live: Live
disconnected: Disconnected

readiness:
default_timeout_ms: 15000
checks:
- type: text
value: Agent Dashboard
required: true
- type: text_any
values: [Live, Disconnected]
required: true
- type: nav_labels
values: [Dashboard, Agent Board, Sessions, Activity Feed, Analytics, Workflows, Settings]

pages:
dashboard:
route: /
title_text: Dashboard
summary_text: Real-time overview of Claude Code agent activity
primary_actions:
- Refresh
- View Board
key_blocks:
- Total Sessions
- Active Agents
- Active Subagents
- Events Today
- Total Events
- Total Cost
- Recent Activity
empty_states:
- No active agents
- No activity yet

agent_board:
route: /kanban
title_text: Agent Board
expected_columns:
- Working
- Connected
- Idle
Comment on lines +61 to +63
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

expected_columns ordering doesn’t match the UI: the Kanban board columns render in the order Idle, Connected, Working, Completed, Error (see client/src/pages/KanbanBoard.tsx:16). If the Playwright MCP consumer asserts column order, this will fail—update the list to match the rendered order (or clarify/order-agnostic semantics if supported).

Suggested change
- Working
- Connected
- Idle
- Idle
- Connected
- Working

Copilot uses AI. Check for mistakes.
- Completed
- Error
empty_state: No agents tracked yet

sessions:
route: /sessions
title_text: Sessions
search_placeholder: Search sessions...
filters:
- All
- Active
- Completed
- Error
- Abandoned
row_navigation: /sessions/:id
empty_state: No sessions found

session_detail:
route_pattern: /sessions/:id
expected_sections:
- Session Overview
- Agent Hierarchy
Comment on lines +84 to +85
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The session_detail.expected_sections values don’t match the actual headings on the Session Detail page. The UI uses headings like “Agents”, “Cost Breakdown”, and “Event Timeline” (see client/src/pages/SessionDetail.tsx), and does not render “Session Overview” or “Agent Hierarchy” as section titles, so section-visibility assertions will be unreliable.

Suggested change
- Session Overview
- Agent Hierarchy
- Agents
- Cost Breakdown

Copilot uses AI. Check for mistakes.
- Event Timeline
interactions:
- Expand nested agent tree when present
- Verify timeline entries are ordered newest-first

activity_feed:
route: /activity
title_text: Activity Feed
stream_text: Real-time stream of all agent events
controls:
- Pause
- Resume
- Refresh
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

activity_feed.controls includes a “Refresh” control, but the Activity Feed refresh button is icon-only with no visible text or accessible name (see client/src/pages/ActivityFeed.tsx:113-115). Any automation that clicks by text/role+name “Refresh” will fail; consider modeling it via a stable attribute (e.g., add an aria-label/title in the app) or update the page model/flows to target the icon-only button correctly.

Suggested change
- Refresh

Copilot uses AI. Check for mistakes.
- Previous
- Next
empty_state: No activity yet

analytics:
route: /analytics
title_text: Analytics
primary_actions:
- Refresh
- Export JSON
expected_cards:
- Total Tokens
- Input Tokens
- Output Tokens
- Estimated Cost
Comment on lines +108 to +113
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Analytics page model doesn’t match the current UI: the export button label is “Export” (not “Export JSON”), and the “expected_cards” list includes items like “Input Tokens”/“Output Tokens”/“Estimated Cost” that don’t appear as top-level card labels (see client/src/pages/Analytics.tsx:585-592 and stat pill labels). This will cause false failures when asserting actions/cards; update the model to reflect the actual visible labels.

Suggested change
- Export JSON
expected_cards:
- Total Tokens
- Input Tokens
- Output Tokens
- Estimated Cost
- Export
expected_cards:
- Total Tokens

Copilot uses AI. Check for mistakes.
- Total Sessions
- Total Agents

workflows:
route: /workflows
title_text: Workflows
status_tabs:
- Active Only
- Completed
- All
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

workflows.status_tabs includes “All”, but the UI tab label is “All Sessions” (see client/src/pages/Workflows.tsx:329-333). If automation toggles tabs by visible text, it will miss the “All Sessions” button—update the model to match the exact label.

Suggested change
- All
- All Sessions

Copilot uses AI. Check for mistakes.
primary_actions:
- Refresh data
- Export as JSON
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

workflows.primary_actions are modeled as “Refresh data” and “Export as JSON”, but the UI renders these as icon-only buttons with a title attribute and no visible text (see client/src/pages/Workflows.tsx:365-379). If the MCP runner clicks by button text / accessible name, these actions won’t be findable—either adjust the model/flows to target the icon buttons via their title (or another stable attribute), or add accessible labels in the UI.

Suggested change
- Export as JSON
- Export JSON

Copilot uses AI. Check for mistakes.
expected_sections:
- Agent Orchestration Graph
- Tool Execution Flow
- Agent Pipeline Graph
- Subagent Effectiveness
- Detected Workflow Patterns
- Model Delegation Flow
- Error Propagation Map
- Agent Concurrency Timeline
- Session Complexity Scatter
- Compaction Impact Analysis
- Session Drill-In

settings:
route: /settings
title_text: Settings
expected_sections:
- Model Pricing
- Hook Configuration
- Data Export
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

settings.expected_sections includes “Data Export”, but the Settings page uses a “Data Management” section and an “Export Data” link in the header (no “Data Export” heading exists in the UI). As written, section assertions may fail—update the expected section label(s) to match what’s actually rendered.

Suggested change
- Data Export
- Data Management

Copilot uses AI. Check for mistakes.
- Session Cleanup
- Clear All Data
- About
key_inputs:
- model_filter: claude-opus-4%
- model_name: Claude Opus 4
dangerous_actions_require_confirmation:
- Clear All Data

not_found:
route: /__playwright_mcp_invalid_route__
expected_text:
- 404
- Page Not Found
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not_found.expected_text expects “Page Not Found”, but the UI heading is “Page not found” (different capitalization) in client/src/pages/NotFound.tsx:21. If assertions are case-sensitive, this will fail—update the expected text to match the rendered string.

Suggested change
- Page Not Found
- Page not found

Copilot uses AI. Check for mistakes.

flows:
smoke_navigation:
description: Validate shell and every primary route.
steps:
- open /
- assert readiness checks
- click sidebar item Dashboard and assert title Dashboard
- click sidebar item Agent Board and assert title Agent Board
- click sidebar item Sessions and assert title Sessions
- click sidebar item Activity Feed and assert title Activity Feed
- click sidebar item Analytics and assert title Analytics
- click sidebar item Workflows and assert title Workflows
- click sidebar item Settings and assert title Settings

sessions_search_and_open:
description: Validate sessions page controls and row navigation.
steps:
- open /sessions
- fill Search sessions... with session
- toggle filters Active then All
- if a table row exists, click first row and assert route matches /sessions/:id

activity_pause_resume:
description: Validate feed buffering control UX.
steps:
- open /activity
- click Pause
- wait 2s
- click Resume
- assert Pause button becomes visible again

workflows_refresh_and_export:
description: Validate workflows controls and major sections.
steps:
- open /workflows
- assert all expected section titles are visible
- click Refresh data
- click Export as JSON
Comment on lines +198 to +199
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In workflows_refresh_and_export, the steps click “Refresh data” and “Export as JSON”, but those strings are not visible button text in the UI (they are only title tooltips on icon buttons). This step definition is likely to fail unless the runner supports tooltip/title-based targeting; consider rewriting the steps to use the actual locator strategy available (or ensure the UI exposes accessible names for these buttons).

Suggested change
- click Refresh data
- click Export as JSON
- click the icon button with title Refresh data
- click the icon button with title Export as JSON

Copilot uses AI. Check for mistakes.

settings_safety:
description: Validate access to settings and destructive gate visibility.
steps:
- open /settings
- assert sections Model Pricing and Hook Configuration are visible
- verify Clear All Data action is present and requires explicit confirmation

stability:
preferred_locators:
- role + accessible name
- visible heading text
- stable button text
discouraged_locators:
- autogenerated class names
- brittle nth-child selectors
waits:
navigation_idle: networkidle
post_action_ms: 150
websocket_settle_ms: 3000

notes:
- Use `app.base_url` in local dev and `app.production_url` for production smoke checks.
- Prefer validating both populated and empty-state UI where seed data is unavailable.
- Keep assertions content-focused so minor style changes do not break automation.
Loading