# UDM Pro Add Button Identification Guide

**Last Updated:** 2026-01-14  
**Status:** Ready for Manual Identification

---

## Summary

We've built a comprehensive browser automation framework for UDM Pro static route configuration. The framework successfully:
- ✅ Authenticates and navigates to the routing page
- ✅ Maps page structure and understands UI elements
- ✅ Detects buttons using 50+ strategies
- ⚠️ **Needs:** Correct Add button selector identification

---

## Current Status

### What Works ✅
1. **Authentication:** Successfully logs in with `unifi_api` account
2. **Navigation:** Reaches `Settings → Routing & Firewall → Static Routes` page
3. **Page Mapping:** Understands page structure, buttons, tables, sections
4. **Button Detection:** Finds all buttons on page with full context
5. **Menu Handling:** Detects and handles dropdown menus
6. **Form Detection:** Recognizes when route form appears

### What Needs Identification ⚠️
The **Add Route button selector** - The script finds buttons but needs the correct one that opens the route form (not theme menu).

---

## Tools Created

### 1. Main Automation Script
**File:** `scripts/unifi/configure-static-route-playwright.js`
- Comprehensive automation with 50+ detection strategies
- Handles menus, forms, errors
- Screenshot capture at each step
- Pause mode for manual intervention

### 2. Visual Page Analyzer
**File:** `scripts/unifi/analyze-page-visually.js`
- Opens page in visible browser
- Highlights all buttons and tables
- Interactive testing of each button
- Identifies which button opens the form

### 3. Strategy Tester
**File:** `scripts/unifi/test-all-add-button-strategies.js`
- Systematically tests all buttons
- Tests keyboard shortcuts
- Tests clicking in different areas
- Reports which strategy works

### 4. Page Mappers
- `map-routing-page-structure.js` - Maps page sections
- `comprehensive-page-mapper.js` - Full page analysis
- `find-add-button-comprehensive.js` - Button finder

---

## How to Identify the Add Button

### Method 1: Use Visual Analyzer (Recommended)

```bash
cd /home/intlc/projects/proxmox
UNIFI_USERNAME=unifi_api UNIFI_PASSWORD='L@kers2010$$' \
  node scripts/unifi/analyze-page-visually.js
```

**Steps:**
1. Script opens browser and highlights all buttons in RED
2. Lists all buttons with their properties
3. Enter button number to test
4. Script clicks button and checks if form appears
5. When form appears, script reports the selector

### Method 2: Use Strategy Tester

```bash
cd /home/intlc/projects/proxmox
UNIFI_USERNAME=unifi_api UNIFI_PASSWORD='L@kers2010$$' \
  node scripts/unifi/test-all-add-button-strategies.js
```

**Steps:**
1. Script tests all buttons automatically
2. Tests keyboard shortcuts
3. Tests clicking in routes area
4. Reports which strategy worked

### Method 3: Manual Inspection

```bash
cd /home/intlc/projects/proxmox
UNIFI_USERNAME=unifi_api UNIFI_PASSWORD='L@kers2010$$' \
  HEADLESS=false PAUSE_MODE=true \
  node scripts/unifi/configure-static-route-playwright.js
```

**Steps:**
1. Script pauses at Static Routes page
2. Manually click the Add button
3. Note the button's:
   - Text content
   - Class name
   - ID
   - Position on page
   - Parent elements

### Method 4: Browser DevTools

1. Open browser DevTools (F12)
2. Navigate to Static Routes page
3. Use element inspector to find Add button
4. Right-click → Inspect
5. Note the selector (ID, class, or XPath)

---

## What to Look For

### Button Characteristics
The Add button likely has:
- **Icon-only** (no text, just an icon like + or plus)
- **Near routes table** or in table header
- **In toolbar** above routes list
- **Class names** containing: `add`, `create`, `new`, `plus`, `button`
- **Aria-label** containing: `add`, `create`, `new`, `route`

### Common Locations
1. **Table Header:** Top-right of routes table
2. **Toolbar:** Above the routes section
3. **Action Bar:** Right side of page
4. **Floating Button:** Bottom-right corner
5. **Menu:** Inside a dropdown menu

### What NOT to Click
- Theme buttons (open menu with "Light" option)
- Navigation buttons ("Go back to Home")
- Site switcher ("UDM Pro")
- Support buttons ("Submit Support Ticket")

---

## Once Button is Identified

### Update the Script

Add the selector to `scripts/unifi/configure-static-route-playwright.js`:

```javascript
// Add to the addButtonSelectors array (around line 648)
const addButtonSelectors = [
  // ... existing selectors ...
  'YOUR_NEW_SELECTOR_HERE',  // Add this
  '#your-button-id',          // Or ID
  'button.your-class-name',   // Or class
];
```

### Test the Update

```bash
cd /home/intlc/projects/proxmox
UNIFI_USERNAME=unifi_api UNIFI_PASSWORD='L@kers2010$$' \
  HEADLESS=true \
  node scripts/unifi/configure-static-route-playwright.js
```

---

## Alternative: Manual Completion Mode

If button identification is difficult, use pause mode:

```bash
cd /home/intlc/projects/proxmox
UNIFI_USERNAME=unifi_api UNIFI_PASSWORD='L@kers2010$$' \
  HEADLESS=false PAUSE_MODE=true \
  node scripts/unifi/configure-static-route-playwright.js
```

**What happens:**
1. Script navigates to Static Routes page
2. Pauses and waits for you to click Add button
3. Detects when form appears
4. Automatically fills form fields
5. Clicks Save
6. Verifies route was created

---

## Screenshots for Reference

Check screenshots in `scripts/unifi/screenshots/`:
- `06-static-routes-page.png` - Shows the Static Routes page
- `07-before-add-button.png` - Before searching for Add button
- `08-after-button-click-menu.png` - After clicking (if menu appears)

---

## Next Steps

1. **Run Visual Analyzer** to identify the button
2. **Update script** with correct selector
3. **Test automation** end-to-end
4. **Document** the selector for future use

---

## Support

If you need help:
1. Check screenshots in `scripts/unifi/screenshots/`
2. Review logs in script output
3. Use `HEADLESS=false` to see what's happening
4. Use `PAUSE_MODE=true` for manual intervention

---

**Last Updated:** 2026-01-14