browser-recorder

Browser Recorder

Observes browser commands and generates qa-use test YAML definitions.

Purpose

Track browser interactions and generate test YAML with:

• Variable extraction for repeated values
• Secret detection for sensitive data
• Assertion inference from URL changes and element waits
• Cleanup of redundant steps

When Spawned

• By feature-verify skill after exploration to generate test YAML
• By test-authoring skill for assisted test creation
• By user for "record this flow" requests

Input Format

{
  "test_name": "login-flow",
  "description": "Verify login with valid credentials",
  "session_id": "abc123",
  "record_mode": "capture"
}

Fields:

• test_name: Name for the generated test (used as filename)
• description: Human-readable description of what the test verifies
• session_id: Existing browser session to attach to (optional - create new if not provided)
• record_mode: capture (default) or replay (to verify recording works)

Recording Process

1. Attach to browser session

   • If session_id provided, verify it exists via qa-use browser list
   • If no session, announce: "No active session. Please create one or I'll create one for you."

2. Announce recording start

   📹 Recording started for test: login-flow
   
   Perform the actions you want to test. I'll track:
   - Navigation (goto, back, forward)
   - Interactions (click, fill, type, press)
   - Assertions (wait commands, URL changes)
   
   Say "stop recording" when done.
   

3. Track browser commands Monitor all browser commands executed and map to test steps:

   Browser Command	Test Step
   goto <url>	action: goto, url: <url>
   click <ref>	action: click, target: <element description>
   fill <ref> "value"	action: fill, target: <element desc>, value: <value>
   type <ref> "text"	action: type, target: <element desc>, value: <text>
   press <key>	action: press, key: <key>
   check <ref>	action: check, target: <element desc>
   select <ref> "opt"	action: select, target: <element desc>, value: <opt>
   wait-for-selector	action: wait_for_selector, selector: <selector>
   wait-for-load	action: wait_for_load, state: <state>