trading_bot_v3/MULTI_LAYOUT_TROUBLESHOOTING.md

Multi-Layout Screenshot Troubleshooting Guide

Issue Description

The multi-layout screenshot functionality is only capturing screenshots from the DIY module and not properly switching to the AI module. This indicates that the layout switching logic needs refinement for the current TradingView UI.

How Multi-Layout Screenshots Work

Current Implementation Flow

1. Initial Screenshot: Takes a screenshot of the current/default layout
2. Layout Iteration: For each layout in config.layouts array:
   • Calls tradingViewAutomation.switchLayout(layout)
   • Calls tradingViewAutomation.waitForLayoutLoad(layout)
   • Takes a screenshot with layout name in filename
   • Continues to next layout

File Naming Convention

• Default layout: {symbol}_{timeframe}_{timestamp}_default.png
• Specific layouts: {symbol}_{timeframe}_{layout}_{timestamp}.png

Debugging Layout Switching Issues

Step 1: Enable Debug Logging

The switchLayout method already includes extensive logging. Look for these messages:

🎛️ Switching to {layout} layout...
🎯 Found {layout} layout element: {selector} with text: {text}
✅ Successfully switched to {layout} layout
⚠️ Could not find {layout} layout switcher

Step 2: Inspect Browser Console

When running the application, check the browser console for:

• Layout switching attempts
• Element detection results
• Any JavaScript errors during layout switching

Step 3: Manual TradingView Inspection

To find the correct selectors for AI and DIY modules:

1. Open TradingView in a browser
2. Log in and navigate to a chart
3. Look for AI and DIY module buttons/tabs
4. Right-click and "Inspect Element"
5. Note the actual HTML structure and attributes

Common Selectors to Check

Look for elements with these characteristics:

• data-name attributes containing "ai", "diy", "module", or "layout"
• class names with "ai", "diy", "module", "tab", or "button"
• title or aria-label attributes mentioning AI or DIY
• Button elements in the top toolbar or side panels

Updating Selectors for Current TradingView UI

Current Selectors in switchLayout Method

The method searches for these selector patterns:

const layoutSwitcherSelectors = [
  // Top toolbar layout buttons
  '[data-name="chart-layout"]',
  '[data-name="layout-switcher"]',
  '.tv-layout-switcher',
  '.chart-layout-switcher',
  
  // Module/layout tabs
  '[data-name="module-switcher"]',
  '.module-switcher',
  '.tv-module-tabs',
  '.tv-chart-tabs',
  
  // Modern TradingView UI selectors
  '[data-testid*="layout"]',
  '[data-testid*="module"]',
  '[data-testid*="ai"]',
  '[data-testid*="diy"]',
  
  // Header/toolbar buttons
  '.tv-header__button',
  '.tv-toolbar__button',
  '.tv-chart-header__button',
  
  // Generic interactive elements
  '[role="tab"]',
  '[role="button"]',
  'button',
  '.tv-button',
  
  // Specific content-based selectors
  '[title*="AI"]',
  '[title*="DIY"]',
  '[aria-label*="AI"]',
  '[aria-label*="DIY"]',
  '[data-tooltip*="AI"]',
  '[data-tooltip*="DIY"]',
  
  // Menu items
  '.tv-dropdown-behavior__item',
  '.tv-menu__item',
  '.tv-context-menu__item'
]

How to Add New Selectors

If you find different selectors through inspection:

1. Edit /lib/tradingview-automation.ts
2. Find the switchLayout method
3. Add new selectors to the layoutSwitcherSelectors array
4. Test the updated implementation

Example of adding a new selector:

const layoutSwitcherSelectors = [
  // ... existing selectors ...
  
  // Add your new selectors here
  '[data-module-name="ai-analysis"]',
  '[data-module-name="diy-builder"]',
  '.chart-module-ai',
  '.chart-module-diy'
]

Testing Multi-Layout Functionality

Method 1: Using API Endpoints

# Update settings to include both layouts
curl -X POST http://localhost:3000/api/settings \
  -H "Content-Type: application/json" \
  -d '{"symbol": "SOLUSD", "timeframe": "240", "layouts": ["ai", "diy"]}'

# Trigger analysis with multiple layouts  
curl -X POST http://localhost:3000/api/analyze \
  -H "Content-Type: application/json" \
  -d '{"symbol": "SOLUSD", "timeframe": "240", "layouts": ["ai", "diy"], "useExisting": false}'

Method 2: Using Test Scripts

# Run the multi-layout API test
node test-multi-layout-api.js

Method 3: Dashboard Interface

1. Open the dashboard at http://localhost:3000
2. Go to Developer Settings
3. Set layouts to include both "ai" and "diy"
4. Trigger an analysis
5. Check the screenshots directory for multiple files

Expected Results

Successful Multi-Layout Capture

You should see multiple screenshot files:

screenshots/
├── SOLUSD_240_1234567890_default.png
├── SOLUSD_240_ai_1234567890.png
└── SOLUSD_240_diy_1234567890.png

API Response

The API should return:

{
  "screenshots": [
    "SOLUSD_240_1234567890_default.png",
    "SOLUSD_240_ai_1234567890.png", 
    "SOLUSD_240_diy_1234567890.png"
  ],
  "layoutsAnalyzed": ["ai", "diy"]
}

Common Issues and Solutions

Issue: Only DIY Screenshots Captured

Cause: AI module selector not found or layout switching failed
Solution:

1. Check if AI module is visible/enabled in TradingView
2. Inspect and update AI module selectors
3. Verify AI module is available for your TradingView account

Issue: No Layout Switching Occurs

Cause: All layout selectors are outdated
Solution:

1. Inspect current TradingView UI structure
2. Update selectors in switchLayout method
3. Add fallback keyboard shortcuts

Issue: Screenshots Identical Despite Layout Names

Cause: Layout switching appears successful but UI doesn't actually change
Solution:

1. Increase wait time in waitForLayoutLoad method
2. Add visual verification that layout actually changed
3. Check if modules need to be manually enabled in TradingView

Advanced Debugging

Enable Verbose Layout Detection

Add this to the beginning of switchLayout method for more detailed logging:

// Take debug screenshot before switching
await this.takeDebugScreenshot(`before_switch_to_${layoutType}`)

// Log all visible buttons/tabs for debugging
const allButtons = await this.page.locator('button, [role="button"], [role="tab"]').all()
for (const button of allButtons) {
  const text = await button.textContent().catch(() => '')
  const title = await button.getAttribute('title').catch(() => '')
  if (text || title) {
    console.log(`🔍 Found button/tab: "${text}" title: "${title}"`)
  }
}

Visual Layout Verification

Add visual verification after layout switching:

// After successful layout switch, verify visually
const layoutElements = await this.page.locator('[class*="ai"], [class*="diy"], [data-name*="ai"], [data-name*="diy"]').all()
console.log(`📊 Found ${layoutElements.length} layout-specific elements after switch`)

Next Steps

1. Run the test scripts to see current behavior
2. Check browser console logs for layout switching attempts
3. Inspect TradingView UI to find correct selectors
4. Update selectors in the switchLayout method if needed
5. Test again to verify multi-layout functionality

The multi-layout framework is already in place and working correctly. The issue is likely just selector specificity for the current TradingView UI structure.