init

test-app.js

@@ -0,0 +1,137 @@
+const { chromium } = require('playwright');
+
+(async () => {
+  const browser = await chromium.launch({ headless: false });
+  const page = await browser.newPage();
+  
+  // Enable console logging
+  page.on('console', msg => console.log(`[CONSOLE] ${msg.type()}: ${msg.text()}`));
+  page.on('pageerror', error => console.error(`[PAGE ERROR] ${error.message}`));
+  page.on('requestfailed', request => console.error(`[REQUEST FAILED] ${request.url()} - ${request.failure().errorText}`));
+  
+  try {
+    console.log('Navigating to http://localhost:3000...');
+    await page.goto('http://localhost:3000', { waitUntil: 'networkidle' });
+    
+    console.log('Waiting for page to load...');
+    // Wait for the main content to load
+    await page.waitForSelector('h1:has-text("Paragliding Weather Dashboard")', { timeout: 10000 });
+    console.log('✓ Page loaded successfully');
+    
+    // Wait a bit for data to load
+    await page.waitForTimeout(2000);
+    
+    // Check if there are any error messages
+    const errorElements = await page.locator('text=/error|Error|failed|Failed/i').all();
+    if (errorElements.length > 0) {
+      console.log(`⚠ Found ${errorElements.length} potential error elements`);
+      for (const elem of errorElements) {
+        const text = await elem.textContent();
+        console.log(`  - ${text}`);
+      }
+    }
+    
+    // Try to expand the threshold controls
+    console.log('\nLooking for Threshold Controls...');
+    const thresholdToggle = page.locator('text=Threshold Controls').first();
+    if (await thresholdToggle.isVisible()) {
+      console.log('✓ Found Threshold Controls, clicking to expand...');
+      await thresholdToggle.click();
+      await page.waitForTimeout(500);
+    }
+    
+    // Try to interact with sliders
+    console.log('\nLooking for sliders...');
+    const sliders = await page.locator('input[type="range"], [role="slider"]').all();
+    console.log(`Found ${sliders.length} sliders`);
+    
+    if (sliders.length > 0) {
+      // Try to interact with the first slider (min speed)
+      console.log('Interacting with first slider (min speed)...');
+      const firstSlider = sliders[0];
+      
+      // Get current value
+      const currentValue = await firstSlider.inputValue();
+      console.log(`  Current value: ${currentValue}`);
+      
+      // Try to set a new value
+      const newValue = parseFloat(currentValue) + 1;
+      console.log(`  Setting to: ${newValue}`);
+      await firstSlider.fill(newValue.toString());
+      await page.waitForTimeout(1000);
+      
+      // Check if value updated
+      const updatedValue = await firstSlider.inputValue();
+      console.log(`  Updated value: ${updatedValue}`);
+    }
+    
+    // Try to interact with direction center slider
+    console.log('\nLooking for direction center slider...');
+    const dirSliders = await page.locator('[aria-label*="direction"], [aria-label*="Direction"]').all();
+    if (dirSliders.length > 0) {
+      console.log(`Found ${dirSliders.length} direction-related sliders`);
+      const dirSlider = dirSliders.find(async (s) => {
+        const label = await s.getAttribute('aria-label');
+        return label && label.includes('center');
+      });
+      
+      if (dirSlider) {
+        console.log('Interacting with direction center slider...');
+        const currentDir = await dirSlider.inputValue();
+        console.log(`  Current direction: ${currentDir}°`);
+        
+        // Try to change direction
+        const newDir = (parseInt(currentDir) + 45) % 360;
+        console.log(`  Setting to: ${newDir}°`);
+        await dirSlider.fill(newDir.toString());
+        await page.waitForTimeout(1000);
+      }
+    }
+    
+    // Check for any API errors in network tab
+    console.log('\nChecking network requests...');
+    const responses = [];
+    page.on('response', response => {
+      if (response.url().includes('/api/')) {
+        responses.push({
+          url: response.url(),
+          status: response.status(),
+          statusText: response.statusText()
+        });
+      }
+    });
+    
+    // Trigger a refresh by clicking refresh if available
+    const refreshButton = page.locator('button:has-text("Refresh"), button[aria-label*="refresh" i]').first();
+    if (await refreshButton.isVisible({ timeout: 2000 })) {
+      console.log('Clicking refresh button...');
+      await refreshButton.click();
+      await page.waitForTimeout(2000);
+    }
+    
+    // Wait a bit more to capture responses
+    await page.waitForTimeout(2000);
+    
+    console.log('\nAPI Response Summary:');
+    responses.forEach(r => {
+      const status = r.status >= 200 && r.status < 300 ? '✓' : '✗';
+      console.log(`  ${status} ${r.url} - ${r.status} ${r.statusText}`);
+    });
+    
+    // Take a screenshot for debugging
+    await page.screenshot({ path: 'test-screenshot.png', fullPage: true });
+    console.log('\n✓ Screenshot saved to test-screenshot.png');
+    
+    console.log('\n✓ Test completed successfully');
+    
+  } catch (error) {
+    console.error('\n✗ Test failed:', error.message);
+    await page.screenshot({ path: 'test-error.png', fullPage: true });
+    console.log('Error screenshot saved to test-error.png');
+  } finally {
+    // Keep browser open for a bit to see results
+    await page.waitForTimeout(3000);
+    await browser.close();
+  }
+})();
+