browse

Files (1)

• SKILL.md

SKILL.md (first lines)

# Browse: Browser Automation with Playwright CLI

General-purpose browser automation via `playwright-cli`. Uses accessibility tree snapshots
(YAML with element refs) instead of screenshots for fast, cheap interaction.

## Core Workflow

```
open URL  ->  snapshot  ->  interact (click/fill/etc)  ->  snapshot  ->  ...  ->  close
```

Every interaction follows this loop:

1. **Open** a page: `playwright-cli open https://example.com`
2. **Snapshot** to see the page structure: `playwright-cli snapshot`
3. **Read the snapshot** YAML to find element refs (e8, e21, etc.)
4. **Interact** using refs: `playwright-cli click e8` or `playwright-cli fill e12 "hello"`
5. **Snapshot again** to verify the result
6. **Close** when done: `playwright-cli close`

## Element Refs

Snapshots produce YAML files in `.playwright-cli/` with an accessibility tree. Each
interactive element gets a ref like `e8`, `e21`, `e134`. Use these refs for all interactions.

```bash
# Take snapshot — returns path to YAML file
playwright-cli snapshot

# Read the YAML to find elements
# (only read when you need to find refs — don't read after every action)
```

Example snapshot excerpt:
```yaml
- button "Sign In" [ref=e8]
- textbox "Email" [ref=e12]
- textbox "Password" [ref=e14]
- link "Forgot password?" [ref=e16]
```

Use refs directly: `playwright-cli click e8`, `playwright-cli fill e12 "user@example.com"`

## Common Patterns

### Navigation

```bash
playwright-cli open https://example.com       # Open URL in new browser
playwright-cli goto https://example.com/about  # Navigate existing browser
playwright-cli go-back                         # Browser back
playwright-cli go-forward                      # Browser forward
playwright-cli reload                          # Refresh page
```

### Form Filling

```bash
playwright-cli snapshot                        # Find form element refs
playwright-cli fill e12 "user@example.com"     # Fill text input
playwright-cli fill e14 "password123"          # Fill password
playwright-cli select e18 "option-value"       # Select dropdown
playwright-cli check e20                       # Check checkbox
playwright-cli uncheck e20                     # Uncheck checkbox
playwright-cli click e8                        # Submit button
playwright-cli snapshot                        # Verify result
```

### Data Extraction

```bash
playwright-cli snapshot                        # Capture page structure
# Read the YAML — all visible text content is in the accessibility tree
# For dynamic data, use eval:
playwright-cli eval "document.querySelector('.price').textContent"
```

### Snapshot Diff (Before/After Evidence)

Capture what changed in the accessibility tree after an action:

```bash
# 1. Take "before" snapshot
playwright-cli snapshot
# Note the file path from output, e.g. .playwright-cli/page-...-before.yml

# 2. Perform the action
playwright-cli click e8

# 3. Take "after" snapshot
playwright-cli snapshot
# Note the file path, e.g. .playwright-cli/page-...-after.yml

# 4. Diff the two snapshots
diff .playwright-cli/page-*-before.yml .playwright-cli/page-*-after.yml
```

This shows exactly what appeared, disappeared, or changed in the DOM — much more
precise than comparing screenshots. Use for:
- Verifying a button click produced the expected state change
- Confirming form submission updated the page
- Detecting unintended side effects (elements that changed when they shouldn't)
- Before/after evidence in QA reports

**Tip:** For named diffs, copy snapshots to meaningful filenames:
```bash
playwright-cli snapshot
cp .playwright-cli/page-*.yml /tmp/before-login.yml
playwright-cli click e15  # submit login
playwright-cli snapshot
cp .playwright-cli/page-*.yml /tmp/after-login.yml
diff /tmp/before-login.yml /tmp/after-login.yml
```

### Screenshots and Visual Verification

```bash
playwright-cli screenshot                      # Full page screenshot
playwright-cli screenshot e42                  # Screenshot specific element

From aitechnerd/ai-dev-team, MIT.

More from aitechnerd/ai-dev-team