Fully implement `.playwright-mcp/page.yml` with route model, readiness checks, and automation flows by Copilot · Pull Request #71 · hoangsonww/Claude-Code-Agent-Monitor

Copilot · 2026-04-14T00:52:42Z

/.playwright-mcp/page.yml was effectively empty, leaving Playwright MCP without a usable page contract for this app. This PR adds a substantial, repository-specific page definition that models the dashboard shell, primary routes, and high-value interaction flows.

Scope and page contract
- Added a complete v1 config for the Claude Code Agent Monitor app (dev and production base URLs, shell metadata, sidebar nav model, websocket state labels).
- Defined global readiness checks to establish deterministic page startup conditions.
Route-level coverage
- Added explicit definitions for all major UI routes: Dashboard, Agent Board, Sessions, Session Detail, Activity Feed, Analytics, Workflows, Settings, and Not Found.
- Captured route-specific expectations (titles, key sections, controls, empty states, filters, and critical actions).
Automation flows
- Added reusable flows for:
  - full sidebar smoke navigation,
  - sessions search + drill-in,
  - activity pause/resume behavior,
  - workflows refresh/export interactions,
  - settings safety/destructive-action confirmation visibility.
Stability guidance
- Added locator/wait strategy guidance (role/name-first selectors, content-based assertions, network-idle + settle timings) to reduce brittle browser automation.

pages:
  sessions:
    route: /sessions
    title_text: Sessions
    search_placeholder: Search sessions...
    filters: [All, Active, Completed, Error, Abandoned]
    row_navigation: /sessions/:id

flows:
  sessions_search_and_open:
    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

Agent-Logs-Url: https://github.com/hoangsonww/Claude-Code-Agent-Monitor/sessions/d7cc1e51-ef9e-4216-99d8-ac823768a42d Co-authored-by: hoangsonww <[email protected]>

…and flow config Agent-Logs-Url: https://github.com/hoangsonww/Claude-Code-Agent-Monitor/sessions/d7cc1e51-ef9e-4216-99d8-ac823768a42d Co-authored-by: hoangsonww <[email protected]>

Agent-Logs-Url: https://github.com/hoangsonww/Claude-Code-Agent-Monitor/sessions/d7cc1e51-ef9e-4216-99d8-ac823768a42d Co-authored-by: hoangsonww <[email protected]>

Copilot

Pull request overview

Adds a full Playwright MCP page model for the Claude Code Agent Monitor UI, defining routes, readiness checks, and reusable automation flows intended to make browser automation more deterministic and app-specific.

Changes:

Defines app shell metadata (base URLs, sidebar model, WebSocket indicator labels) and global readiness checks.
Adds route/page definitions for major UI surfaces (dashboard, sessions, activity, analytics, workflows, settings, not-found).
Adds reusable automation flows for navigation smoke tests and key interactions (sessions drill-in, activity pause/resume, workflows refresh/export, settings safety checks).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-14T00:57:30Z

.playwright-mcp/page.yml

+      - Session Overview
+      - Agent Hierarchy


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 · 2026-04-14T00:57:30Z

.playwright-mcp/page.yml

+    controls:
+      - Pause
+      - Resume
+      - Refresh


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 · 2026-04-14T00:57:31Z

.playwright-mcp/page.yml

+      - Export JSON
+    expected_cards:
+      - Total Tokens
+      - Input Tokens
+      - Output Tokens
+      - Estimated Cost


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 · 2026-04-14T00:57:31Z

.playwright-mcp/page.yml

+    route: /__playwright_mcp_invalid_route__
+    expected_text:
+      - 404
+      - Page Not Found


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 · 2026-04-14T00:57:31Z

.playwright-mcp/page.yml

+      - Working
+      - Connected
+      - Idle


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 · 2026-04-14T00:57:31Z

.playwright-mcp/page.yml

+    status_tabs:
+      - Active Only
+      - Completed
+      - All


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 · 2026-04-14T00:57:32Z

.playwright-mcp/page.yml

+      - All
+    primary_actions:
+      - Refresh data
+      - Export as JSON


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 · 2026-04-14T00:57:32Z

.playwright-mcp/page.yml

+      - click Refresh data
+      - click Export as JSON


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 · 2026-04-14T00:57:32Z

.playwright-mcp/page.yml

+    expected_sections:
+      - Model Pricing
+      - Hook Configuration
+      - Data Export


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 AI and others added 3 commits April 14, 2026 00:49

chore: plan page.yml implementation for playwright-mcp

138d833

Agent-Logs-Url: https://github.com/hoangsonww/Claude-Code-Agent-Monitor/sessions/d7cc1e51-ef9e-4216-99d8-ac823768a42d Co-authored-by: hoangsonww <[email protected]>

feat: fully implement playwright-mcp page.yml with substantial route …

99b8b1d

…and flow config Agent-Logs-Url: https://github.com/hoangsonww/Claude-Code-Agent-Monitor/sessions/d7cc1e51-ef9e-4216-99d8-ac823768a42d Co-authored-by: hoangsonww <[email protected]>

fix: address review comments for page.yml implementation

4058006

Agent-Logs-Url: https://github.com/hoangsonww/Claude-Code-Agent-Monitor/sessions/d7cc1e51-ef9e-4216-99d8-ac823768a42d Co-authored-by: hoangsonww <[email protected]>

Copilot AI assigned Copilot and hoangsonww Apr 14, 2026

Copilot created this pull request from a session on behalf of hoangsonww April 14, 2026 00:52 View session

hoangsonww marked this pull request as ready for review April 14, 2026 00:52

Copilot AI review requested due to automatic review settings April 14, 2026 00:52

Copilot started reviewing on behalf of hoangsonww April 14, 2026 00:53 View session

hoangsonww added bug Something isn't working documentation Improvements or additions to documentation duplicate This issue or pull request already exists enhancement New feature or request help wanted Extra attention is needed good first issue Good for newcomers labels Apr 14, 2026

hoangsonww added this to Claude Code AI Agents Monitor Project Board Apr 14, 2026

github-project-automation bot moved this to Backlog in Claude Code AI Agents Monitor Project Board Apr 14, 2026

Copilot AI reviewed Apr 14, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

Fully implement `.playwright-mcp/page.yml` with route model, readiness checks, and automation flows#71
Copilot wants to merge 3 commits intofeat/create-playwright-mcp-configfrom
copilot/implement-page-yml-in-playwright-mcp

Copilot AI commented Apr 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Copilot AI commented Apr 14, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants