334 lines
13 KiB
JavaScript
334 lines
13 KiB
JavaScript
|
#!/usr/bin/env node
|
|||
|
|
/**
|
|||
|
|
* Map Routing Page Structure
|
|||
|
|
*
|
|||
|
|
* This script fully maps the UDM Pro routing page structure to understand:
|
|||
|
|
* - All sections and their locations
|
|||
|
|
* - Button placements and contexts
|
|||
|
|
* - How the page changes based on state
|
|||
|
|
* - Form locations and structures
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { chromium } from 'playwright';
|
|||
|
|
import { readFileSync } from 'fs';
|
|||
|
|
import { join } from 'path';
|
|||
|
|
import { homedir } from 'os';
|
|||
|
|
|
|||
|
|
// Load environment variables
|
|||
|
|
const envPath = join(homedir(), '.env');
|
|||
|
|
function loadEnvFile(filePath) {
|
|||
|
|
try {
|
|||
|
|
const envFile = readFileSync(filePath, 'utf8');
|
|||
|
|
const envVars = envFile.split('\n').filter(
|
|||
|
|
(line) => line.includes('=') && !line.trim().startsWith('#')
|
|||
|
|
);
|
|||
|
|
for (const line of envVars) {
|
|||
|
|
const [key, ...values] = line.split('=');
|
|||
|
|
if (key && values.length > 0 && /^[A-Z_][A-Z0-9_]*$/.test(key.trim())) {
|
|||
|
|
let value = values.join('=').trim();
|
|||
|
|
if (
|
|||
|
|
(value.startsWith('"') && value.endsWith('"')) ||
|
|||
|
|
(value.startsWith("'") && value.endsWith("'"))
|
|||
|
|
) {
|
|||
|
|
value = value.slice(1, -1);
|
|||
|
|
}
|
|||
|
|
process.env[key.trim()] = value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
} catch {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loadEnvFile(envPath);
|
|||
|
|
|
|||
|
|
const UDM_URL = process.env.UNIFI_UDM_URL || 'https://192.168.0.1';
|
|||
|
|
const USERNAME = process.env.UNIFI_BROWSER_USERNAME || process.env.UNIFI_USERNAME || 'unifi_api';
|
|||
|
|
const PASSWORD = process.env.UNIFI_BROWSER_PASSWORD || process.env.UNIFI_PASSWORD;
|
|||
|
|
|
|||
|
|
console.log('🗺️ UDM Pro Routing Page Structure Mapper');
|
|||
|
|
console.log('==========================================\n');
|
|||
|
|
|
|||
|
|
if (!PASSWORD) {
|
|||
|
|
console.error('❌ UNIFI_PASSWORD must be set in ~/.env');
|
|||
|
|
process.exit(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
(async () => {
|
|||
|
|
const browser = await chromium.launch({ headless: false });
|
|||
|
|
const context = await browser.newContext({ ignoreHTTPSErrors: true });
|
|||
|
|
const page = await context.newPage();
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
console.log('1. Logging in...');
|
|||
|
|
await page.goto(UDM_URL, { waitUntil: 'networkidle' });
|
|||
|
|
await page.waitForSelector('input[type="text"]');
|
|||
|
|
await page.fill('input[type="text"]', USERNAME);
|
|||
|
|
await page.fill('input[type="password"]', PASSWORD);
|
|||
|
|
await page.click('button[type="submit"]');
|
|||
|
|
await page.waitForTimeout(5000);
|
|||
|
|
|
|||
|
|
console.log('2. Navigating to Routing page...');
|
|||
|
|
// Wait for dashboard to load first
|
|||
|
|
await page.waitForTimeout(3000);
|
|||
|
|
|
|||
|
|
// Navigate to routing page
|
|||
|
|
await page.goto(`${UDM_URL}/network/default/settings/routing`, { waitUntil: 'networkidle' });
|
|||
|
|
await page.waitForTimeout(5000);
|
|||
|
|
|
|||
|
|
// Wait for routing-specific content
|
|||
|
|
await page.waitForSelector('body', { timeout: 10000 });
|
|||
|
|
|
|||
|
|
// Check if we're actually on the routing page
|
|||
|
|
const currentUrl = page.url();
|
|||
|
|
console.log(` Current URL: ${currentUrl}`);
|
|||
|
|
|
|||
|
|
if (currentUrl.includes('/login')) {
|
|||
|
|
console.log(' ⚠️ Still on login page, waiting for redirect...');
|
|||
|
|
await page.waitForURL('**/settings/routing**', { timeout: 15000 }).catch(() => {});
|
|||
|
|
await page.waitForTimeout(5000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Wait for API calls to complete
|
|||
|
|
await page.waitForResponse(response =>
|
|||
|
|
response.url().includes('/rest/routing') ||
|
|||
|
|
response.url().includes('/settings/routing'),
|
|||
|
|
{ timeout: 10000 }
|
|||
|
|
).catch(() => {});
|
|||
|
|
|
|||
|
|
await page.waitForTimeout(5000); // Final wait for full render
|
|||
|
|
|
|||
|
|
console.log('3. Mapping page structure...\n');
|
|||
|
|
|
|||
|
|
// Get comprehensive page structure
|
|||
|
|
const pageStructure = await page.evaluate(() => {
|
|||
|
|
const structure = {
|
|||
|
|
url: window.location.href,
|
|||
|
|
title: document.title,
|
|||
|
|
sections: [],
|
|||
|
|
buttons: [],
|
|||
|
|
forms: [],
|
|||
|
|
tables: [],
|
|||
|
|
textContent: {},
|
|||
|
|
layout: {},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Find all major sections
|
|||
|
|
const sectionSelectors = [
|
|||
|
|
'main',
|
|||
|
|
'section',
|
|||
|
|
'[role="main"]',
|
|||
|
|
'[class*="container" i]',
|
|||
|
|
'[class*="section" i]',
|
|||
|
|
'[class*="panel" i]',
|
|||
|
|
'[class*="content" i]',
|
|||
|
|
'[class*="page" i]',
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
sectionSelectors.forEach(selector => {
|
|||
|
|
const elements = document.querySelectorAll(selector);
|
|||
|
|
elements.forEach((el, index) => {
|
|||
|
|
const rect = el.getBoundingClientRect();
|
|||
|
|
if (rect.width > 100 && rect.height > 100) {
|
|||
|
|
const text = el.textContent?.trim().substring(0, 200) || '';
|
|||
|
|
structure.sections.push({
|
|||
|
|
selector,
|
|||
|
|
index,
|
|||
|
|
tag: el.tagName,
|
|||
|
|
className: el.className || '',
|
|||
|
|
id: el.id || '',
|
|||
|
|
text: text,
|
|||
|
|
position: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
|
|||
|
|
hasButtons: el.querySelectorAll('button').length,
|
|||
|
|
hasForms: el.querySelectorAll('form').length,
|
|||
|
|
hasTables: el.querySelectorAll('table').length,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Find all buttons with full context
|
|||
|
|
const buttons = Array.from(document.querySelectorAll('button, [role="button"], a[class*="button" i]'));
|
|||
|
|
buttons.forEach((btn, index) => {
|
|||
|
|
const rect = btn.getBoundingClientRect();
|
|||
|
|
if (rect.width > 0 && rect.height > 0) {
|
|||
|
|
const styles = window.getComputedStyle(btn);
|
|||
|
|
if (styles.display !== 'none' && styles.visibility !== 'hidden') {
|
|||
|
|
// Get parent context
|
|||
|
|
let parent = btn.parentElement;
|
|||
|
|
let parentContext = '';
|
|||
|
|
let depth = 0;
|
|||
|
|
while (parent && depth < 5) {
|
|||
|
|
const parentText = parent.textContent?.trim() || '';
|
|||
|
|
const parentClass = parent.className || '';
|
|||
|
|
if (parentText.length > 0 && parentText.length < 100) {
|
|||
|
|
parentContext = parentText + ' > ' + parentContext;
|
|||
|
|
}
|
|||
|
|
if (parentClass.includes('route') || parentClass.includes('routing') ||
|
|||
|
|
parentClass.includes('table') || parentClass.includes('header')) {
|
|||
|
|
parentContext = `[${parentClass.substring(0, 50)}] > ` + parentContext;
|
|||
|
|
}
|
|||
|
|
parent = parent.parentElement;
|
|||
|
|
depth++;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
structure.buttons.push({
|
|||
|
|
index,
|
|||
|
|
tag: btn.tagName,
|
|||
|
|
text: btn.textContent?.trim() || '',
|
|||
|
|
className: btn.className || '',
|
|||
|
|
id: btn.id || '',
|
|||
|
|
ariaLabel: btn.getAttribute('aria-label') || '',
|
|||
|
|
dataTestId: btn.getAttribute('data-testid') || '',
|
|||
|
|
position: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
|
|||
|
|
parentContext: parentContext.substring(0, 200),
|
|||
|
|
isVisible: true,
|
|||
|
|
isEnabled: !btn.disabled,
|
|||
|
|
hasIcon: btn.querySelector('svg') !== null,
|
|||
|
|
iconOnly: !btn.textContent?.trim() && btn.querySelector('svg') !== null,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Find all forms
|
|||
|
|
const forms = Array.from(document.querySelectorAll('form'));
|
|||
|
|
forms.forEach((form, index) => {
|
|||
|
|
const rect = form.getBoundingClientRect();
|
|||
|
|
if (rect.width > 0 && rect.height > 0) {
|
|||
|
|
const inputs = Array.from(form.querySelectorAll('input, select, textarea'));
|
|||
|
|
structure.forms.push({
|
|||
|
|
index,
|
|||
|
|
id: form.id || '',
|
|||
|
|
className: form.className || '',
|
|||
|
|
action: form.action || '',
|
|||
|
|
method: form.method || '',
|
|||
|
|
inputs: inputs.map(input => ({
|
|||
|
|
type: input.type || input.tagName,
|
|||
|
|
name: input.name || '',
|
|||
|
|
placeholder: input.placeholder || '',
|
|||
|
|
id: input.id || '',
|
|||
|
|
})),
|
|||
|
|
position: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Find all tables
|
|||
|
|
const tables = Array.from(document.querySelectorAll('table'));
|
|||
|
|
tables.forEach((table, index) => {
|
|||
|
|
const rect = table.getBoundingClientRect();
|
|||
|
|
if (rect.width > 0 && rect.height > 0) {
|
|||
|
|
const headers = Array.from(table.querySelectorAll('th')).map(th => th.textContent?.trim() || '');
|
|||
|
|
const rows = Array.from(table.querySelectorAll('tbody tr')).length;
|
|||
|
|
structure.tables.push({
|
|||
|
|
index,
|
|||
|
|
className: table.className || '',
|
|||
|
|
id: table.id || '',
|
|||
|
|
headers,
|
|||
|
|
rowCount: rows,
|
|||
|
|
position: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
|
|||
|
|
hasButtons: table.querySelectorAll('button').length,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Get page text content for context
|
|||
|
|
const bodyText = document.body.textContent || '';
|
|||
|
|
structure.textContent = {
|
|||
|
|
hasStaticRoutes: bodyText.includes('Static Routes') || bodyText.includes('Static Route'),
|
|||
|
|
hasRoutes: bodyText.includes('Route') && !bodyText.includes('Router'),
|
|||
|
|
hasAdd: bodyText.includes('Add') || bodyText.includes('Create') || bodyText.includes('New'),
|
|||
|
|
hasTable: bodyText.includes('table') || document.querySelector('table') !== null,
|
|||
|
|
fullText: bodyText.substring(0, 1000),
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return structure;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('📄 Page Structure:');
|
|||
|
|
console.log('='.repeat(80));
|
|||
|
|
console.log(`URL: ${pageStructure.url}`);
|
|||
|
|
console.log(`Title: ${pageStructure.title}`);
|
|||
|
|
console.log(`\nText Context:`);
|
|||
|
|
console.log(` Has "Static Routes": ${pageStructure.textContent.hasStaticRoutes}`);
|
|||
|
|
console.log(` Has "Route": ${pageStructure.textContent.hasRoutes}`);
|
|||
|
|
console.log(` Has "Add/Create": ${pageStructure.textContent.hasAdd}`);
|
|||
|
|
console.log(` Has Table: ${pageStructure.textContent.hasTable}`);
|
|||
|
|
|
|||
|
|
console.log(`\n📦 Sections (${pageStructure.sections.length}):`);
|
|||
|
|
pageStructure.sections.forEach((section, i) => {
|
|||
|
|
console.log(`\n${i + 1}. ${section.tag}.${section.className.substring(0, 50)}`);
|
|||
|
|
console.log(` Position: (${section.position.x}, ${section.position.y}) ${section.position.width}x${section.position.height}`);
|
|||
|
|
console.log(` Buttons: ${section.hasButtons}, Forms: ${section.hasForms}, Tables: ${section.hasTables}`);
|
|||
|
|
console.log(` Text: "${section.text.substring(0, 100)}"`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log(`\n🔘 Buttons (${pageStructure.buttons.length}):`);
|
|||
|
|
pageStructure.buttons.forEach((btn, i) => {
|
|||
|
|
console.log(`\n${i + 1}. Button ${btn.index}:`);
|
|||
|
|
console.log(` Tag: ${btn.tag}`);
|
|||
|
|
console.log(` Text: "${btn.text}"`);
|
|||
|
|
console.log(` Class: ${btn.className.substring(0, 80)}`);
|
|||
|
|
console.log(` ID: ${btn.id || 'none'}`);
|
|||
|
|
console.log(` Aria Label: ${btn.ariaLabel || 'none'}`);
|
|||
|
|
console.log(` Position: (${btn.position.x}, ${btn.position.y}) ${btn.position.width}x${btn.position.height}`);
|
|||
|
|
console.log(` Icon Only: ${btn.iconOnly}, Has Icon: ${btn.hasIcon}`);
|
|||
|
|
console.log(` Enabled: ${btn.isEnabled}`);
|
|||
|
|
console.log(` Context: ${btn.parentContext.substring(0, 150)}`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log(`\n📋 Tables (${pageStructure.tables.length}):`);
|
|||
|
|
pageStructure.tables.forEach((table, i) => {
|
|||
|
|
console.log(`\n${i + 1}. Table ${table.index}:`);
|
|||
|
|
console.log(` Class: ${table.className.substring(0, 80)}`);
|
|||
|
|
console.log(` Headers: ${table.headers.join(', ')}`);
|
|||
|
|
console.log(` Rows: ${table.rowCount}`);
|
|||
|
|
console.log(` Buttons: ${table.hasButtons}`);
|
|||
|
|
console.log(` Position: (${table.position.x}, ${table.position.y})`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log(`\n📝 Forms (${pageStructure.forms.length}):`);
|
|||
|
|
pageStructure.forms.forEach((form, i) => {
|
|||
|
|
console.log(`\n${i + 1}. Form ${form.index}:`);
|
|||
|
|
console.log(` Inputs: ${form.inputs.length}`);
|
|||
|
|
form.inputs.forEach((input, j) => {
|
|||
|
|
console.log(` ${j + 1}. ${input.type} name="${input.name}" placeholder="${input.placeholder}"`);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Identify potential Add button
|
|||
|
|
console.log(`\n🎯 Potential Add Button Analysis:`);
|
|||
|
|
console.log('='.repeat(80));
|
|||
|
|
const iconOnlyButtons = pageStructure.buttons.filter(b => b.iconOnly);
|
|||
|
|
const buttonsNearRoutes = pageStructure.buttons.filter(b =>
|
|||
|
|
b.parentContext.toLowerCase().includes('route') ||
|
|||
|
|
b.parentContext.toLowerCase().includes('routing') ||
|
|||
|
|
b.parentContext.toLowerCase().includes('table')
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
console.log(`Icon-only buttons: ${iconOnlyButtons.length}`);
|
|||
|
|
iconOnlyButtons.forEach((btn, i) => {
|
|||
|
|
console.log(` ${i + 1}. ${btn.className.substring(0, 60)} - Position: (${btn.position.x}, ${btn.position.y})`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log(`\nButtons near routes/table: ${buttonsNearRoutes.length}`);
|
|||
|
|
buttonsNearRoutes.forEach((btn, i) => {
|
|||
|
|
console.log(` ${i + 1}. "${btn.text}" - ${btn.className.substring(0, 60)}`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('\n\n⏸️ Page is open in browser. Inspect manually if needed.');
|
|||
|
|
console.log('Press Ctrl+C to close...\n');
|
|||
|
|
|
|||
|
|
// Keep browser open
|
|||
|
|
await page.waitForTimeout(60000);
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('❌ Error:', error.message);
|
|||
|
|
await page.screenshot({ path: 'map-error.png', fullPage: true });
|
|||
|
|
} finally {
|
|||
|
|
await browser.close();
|
|||
|
|
}
|
|||
|
|
})();
|