Function capture_dom_structure

browser_utils/debug_utils.py:74–154

Capture human-readable DOM tree structure. Unlike raw HTML, this provides a clean, indented tree view showing: - Element hierarchy - IDs and classes - Important attributes (disabled, value, etc.) Args: page: Playwright page instance Returns: str: Human

(page: AsyncPage)

async def capture_dom_structure(page: AsyncPage) -> str:
    """
    Capture human-readable DOM tree structure.

    Unlike raw HTML, this provides a clean, indented tree view showing:
    - Element hierarchy
    - IDs and classes
    - Important attributes (disabled, value, etc.)

    Args:
        page: Playwright page instance

    Returns:
        str: Human-readable DOM tree structure
    """
    try:
        dom_tree = await page.evaluate("""() => {
            function getTreeStructure(element, indent = '', depth = 0, maxDepth = 15) {
                // Prevent infinite recursion
                if (depth > maxDepth) {
                    return indent + '... (max depth reached)\\n';
                }

                let result = indent + element.tagName;

                // Add ID
                if (element.id) {
                    result += `#${element.id}`;
                }

                // Add classes
                if (element.className && typeof element.className === 'string') {
                    const classes = element.className.trim().split(/\\s+/).filter(c => c);
                    if (classes.length > 0) {
                        result += '.' + classes.join('.');
                    }
                }

                // Add important attributes
                const importantAttrs = ['aria-label', 'type', 'role', 'data-test-id'];
                for (const attr of importantAttrs) {
                    const val = element.getAttribute(attr);
                    if (val) {
                        result += ` [${attr}="${val}"]`;
                    }
                }

                // Add state attributes
                if (element.disabled !== undefined) {
                    result += ` [disabled=${element.disabled}]`;
                }
                if (element.hasAttribute('aria-disabled')) {
                    result += ` [aria-disabled=${element.getAttribute('aria-disabled')}]`;
                }

                // Add value for input elements (truncated)
                if (element.value && typeof element.value === 'string') {
                    const truncated = element.value.substring(0, 50);