bpmn-browser-testing
Tests BPMN modeler webviews in a browser using Playwright automation.
Install
mkdir -p .claude/skills/bpmn-browser-testing && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17615" && unzip -o skill.zip -d .claude/skills/bpmn-browser-testing && rm skill.zipInstalls to .claude/skills/bpmn-browser-testing
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Interact with the BPMN modeler webview running in a browser using Playwright MCP tools. Use this skill whenever the user asks to test, inspect, or interact with the BPMN modeler in a browser — including adding/modifying BPMN elements, checking the properties panel, verifying UI behavior, or debugging the webview. Also trigger when the user mentions "open the modeler in a browser", "add a task/event/gateway", "check the properties panel", or any visual/interactive testing of the BPMN webview.Key capabilities
- →Interact with bpmn-js modeler webviews in a browser
- →Place BPMN elements from the palette onto the canvas
- →Use the context pad for element actions
- →Change BPMN element types
- →Read and interact with the properties panel
- →Select existing elements on the SVG canvas
How it works
The skill interacts with a bpmn-js modeler webview using Playwright MCP tools, simulating user actions like clicking palette entries, placing elements on the canvas, using context pads, and interacting with the properties panel. It uses snapshots for HTML elements and screenshots for SVG canvas elements.
Inputs & outputs
When to use bpmn-browser-testing
- →Testing BPMN modeler components
- →Debugging property panel interactions
- →Automating BPMN element placement tests
About bpmn-browser-testing
Interacts with bpmn-js modeler webviews to verify UI interactions, element addition, and properties panel behavior. It automates testing of SVG-based BPMN editors in a live browser environment.
>
When not to use it
- →When bpmn-js palette entries require standard HTML drag-and-drop
- →When the `BpmnModeler` class instance needs to be accessed directly via `window`
- →When relying solely on accessibility snapshots for SVG canvas elements
Prerequisites
Limitations
- →bpmn-js palette entries do NOT work with standard HTML drag-and-drop
- →The `BpmnModeler` class instance is NOT exposed on `window`
- →SVG canvas elements are not directly addressable via accessibility snapshots
How it compares
This skill provides specific interaction patterns for the bpmn-js modeler, accounting for its custom drag implementation and SVG-based canvas, enabling precise testing and interaction that generic browser automation might not achieve.
Compared to similar skills
bpmn-browser-testing side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| bpmn-browser-testing (this skill) | 0 | 2mo | Review | Advanced |
| webapp-testing | 353 | 4mo | Review | Intermediate |
| ui-ux-expert-skill | 91 | 10mo | Review | Advanced |
| accessibility | 42 | 6mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Miragon
View all by Miragon →You might also like
webapp-testing
anthropics
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
accessibility
tech-leads-club
Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
playwright-browser-automation
lackeyjb
Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.
svelte-expert
Raudbjorn
Expert Svelte/SvelteKit development assistant for building components, utilities, and applications. Use when creating Svelte components, SvelteKit applications, implementing reactive patterns, handling state management, working with stores, transitions, animations, or any Svelte/SvelteKit development task. Includes comprehensive documentation access, code validation with svelte-autofixer, and playground link generation.
browser-daemon
noiv
Persistent browser automation via Playwright daemon. Keep a browser window open and send it commands (navigate, execute JS, inspect console). Perfect for interactive debugging, development, and testing web applications. Use when you need to interact with a browser repeatedly without opening/closing it.