Problem Description
It is difficult for non-technical team members (like Product Managers) to verify exactly which UI paths are covered by tests, or to debug which flow sequence was actually traversed during a test run without scrolling through logs.
Proposed Solution
Create a CLI tool with two components:
- Static Flowchart Generator (
playwright-sugar-diagram gen):
Parses playbook files and exports a static Mermaid flowchart representing all defined UI paths, outcomes, and transitions, embedding collapsible HTML code blocks containing the selectors.
- Dynamic Traversal Overlay (
playwright-sugar-diagram visualize --log=run.jsonl):
Parses playwright execution logs and generates an overlay diagram. It highlights the exact execution path taken by a specific test run (e.g. coloring the Editor path green, Read-Only yellow, and No-Access red).
Problem Description
It is difficult for non-technical team members (like Product Managers) to verify exactly which UI paths are covered by tests, or to debug which flow sequence was actually traversed during a test run without scrolling through logs.
Proposed Solution
Create a CLI tool with two components:
playwright-sugar-diagram gen):Parses playbook files and exports a static Mermaid flowchart representing all defined UI paths, outcomes, and transitions, embedding collapsible HTML code blocks containing the selectors.
playwright-sugar-diagram visualize --log=run.jsonl):Parses playwright execution logs and generates an overlay diagram. It highlights the exact execution path taken by a specific test run (e.g. coloring the Editor path green, Read-Only yellow, and No-Access red).