CurrenciCombo/.agents/skills/testing-transactflow/SKILL.md

Testing TransactFlow IDE

Overview

TransactFlow is a React 18 + TypeScript + Vite app using @xyflow/react for a drag-and-drop graph editor. It deploys as a static frontend site (no backend).

Deployed URL

https://dist-dgoompqy.devinapps.com

Local Dev

cd /home/ubuntu/repos/transaction-builder
npm install
npm run dev  # starts on localhost:5174

Testing Approach

Tool Selection

• Browser tool: Use for most UI interactions (clicking, typing, verifying DOM state via console). Works well for buttons, inputs, tabs, dropdowns.
• Playwright CDP: Required for drag-and-drop testing. React Flow's drag-and-drop uses native browser events that synthetic DOM events cannot replicate. Connect via chromium.connectOverCDP('http://127.0.0.1:<port>'). The Chrome CDP port may be ephemeral — find it with ss -tlnp 2>/dev/null | grep chrome.
• Browser console: Use document.querySelector/querySelectorAll for DOM assertions. Returns exact counts and text content for verification.

Key Patterns

React Controlled Inputs

React controlled inputs (<input value={state} onChange={...}>) cannot be cleared via element.value = '' + synthetic events. React manages the value internally. Workaround: Reload the page to reset state rather than fighting React's control.

devinid Drift After DOM Changes

The browser tool assigns devinid attributes based on current DOM state. After significant DOM changes (collapsing accordions, opening modals, switching tabs), cached devinids become invalid. Workaround: Re-query the HTML or reload the page after major DOM mutations to get fresh devinids.

Keyboard Shortcuts (Ctrl+K, Ctrl+B, etc.)

Browser automation tools may intercept Ctrl+K before it reaches the page. Synthetic KeyboardEvent dispatch on window also might not trigger React's state updates reliably. Workaround: Use the UI button that triggers the same action (e.g., Command Palette icon button instead of Ctrl+K).

Command Palette

The command palette overlay renders as .command-palette with input .command-palette-input and results .command-palette-results. Commands are .command-item elements with .command-label text. The palette input might not have a visible devinid in truncated HTML — search the full page HTML file for placeholder="Type a command".

Component Architecture (for test assertions)

• TitleBar: Mode selector (.mode-selector / .mode-dropdown / .mode-option), search bar, validate/simulate/execute buttons
• ActivityBar: 10 .activity-btn icon buttons
• LeftPanel: Search input, filter buttons (All/Favorites/Recent), .component-category with .category-header and .category-items, .component-item elements
• Canvas: React Flow container, .canvas-empty-content (shown when nodes.length === 0), .canvas-inspector with node/connection counts
• RightPanel: .chat-header-agent shows active agent name, .agent-tab buttons for switching, .chat-message.user and .chat-message.agent for messages, agent responses have 800ms delay
• BottomPanel: .bottom-tab buttons, .system-800-card (6 cards), .settlement-table (4 rows), .audit-content with .audit-entry elements
• CommandPalette: .command-palette-overlay, .command-palette, .command-item, .command-label

Test Data (hardcoded in source)

• Default favorites: Transfer, Swap, KYC (Set in LeftPanel.tsx)
• 7 component categories, 56 total components
• 7 agent types: Builder, Compliance, Routing, ISO-20022, Settlement, Risk, Documentation
• 6 system status cards in 800 System tab
• 4 settlement queue rows (includes TX-2024-0847)
• Audit trail contains SESSION_START and ENGINE_LOAD events
• 4 session modes: Sandbox, Simulate, Live, Compliance Review
• Builder agent responds with "Transfer" (when input doesn't contain "swap") or "Swap" (when it does)
• Compliance agent responds with "No policy violations"

Devin Secrets Needed

None — this is a purely frontend static site with no auth required.

Common Issues

• If Chrome CDP port is not 29229, the browser was launched with --remote-debugging-port=0 (random). Restart browser via browser(action="restart") and find the new port.
• React Flow nodes require native browser drag events. Use Playwright's dragTo() method, not synthetic DragEvent dispatch.
• After page reload, all React state resets (nodes cleared, chat history cleared, filters reset to defaults). Plan test sequences accordingly.