proxmox/docs/04-configuration/UDM_PRO_ADD_BUTTON_IDENTIFICATION_GUIDE.md

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)

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

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

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:

// 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

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:

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