|
| 1 | +const puppeteer = require('puppeteer'); |
| 2 | +const path = require('path'); |
| 3 | +const fs = require('fs'); |
| 4 | + |
| 5 | +async function captureScreenshots() { |
| 6 | + const browser = await puppeteer.launch({ |
| 7 | + headless: true, |
| 8 | + args: ['--no-sandbox', '--disable-setuid-sandbox'] |
| 9 | + }); |
| 10 | + |
| 11 | + const page = await browser.newPage(); |
| 12 | + await page.setViewport({ width: 1920, height: 1080 }); |
| 13 | + |
| 14 | + const screenshotDir = path.join(__dirname, 'public', 'screenshots'); |
| 15 | + if (!fs.existsSync(screenshotDir)) { |
| 16 | + fs.mkdirSync(screenshotDir, { recursive: true }); |
| 17 | + } |
| 18 | + |
| 19 | + console.log('Opening http://localhost:3080...'); |
| 20 | + await page.goto('http://localhost:3080', { waitUntil: 'networkidle2', timeout: 30000 }); |
| 21 | + |
| 22 | + // Wait a bit for the app to fully load |
| 23 | + await page.waitForTimeout(2000); |
| 24 | + |
| 25 | + // Screenshot 1: Main workspace |
| 26 | + console.log('Capturing main workspace...'); |
| 27 | + const screenshot1 = path.join(screenshotDir, 'main-workspace.png'); |
| 28 | + await page.screenshot({ path: screenshot1, fullPage: false }); |
| 29 | + console.log(`Saved: ${screenshot1}`); |
| 30 | + |
| 31 | + // Try to open agent panel (look for button/element) |
| 32 | + try { |
| 33 | + await page.waitForTimeout(1000); |
| 34 | + |
| 35 | + // Screenshot 2: Try to capture with agent panel visible |
| 36 | + // Look for common selectors that might open the agent panel |
| 37 | + const agentButton = await page.$('[data-panel="agent"]') || |
| 38 | + await page.$('button:has-text("Agent")') || |
| 39 | + await page.$('[aria-label*="agent" i]'); |
| 40 | + |
| 41 | + if (agentButton) { |
| 42 | + await agentButton.click(); |
| 43 | + await page.waitForTimeout(1000); |
| 44 | + console.log('Capturing agent panel...'); |
| 45 | + const screenshot2 = path.join(screenshotDir, 'agent-panel.png'); |
| 46 | + await page.screenshot({ path: screenshot2, fullPage: false }); |
| 47 | + console.log(`Saved: ${screenshot2}`); |
| 48 | + } |
| 49 | + } catch (e) { |
| 50 | + console.log('Could not open agent panel, taking another workspace shot...'); |
| 51 | + const screenshot2 = path.join(screenshotDir, 'workspace-view.png'); |
| 52 | + await page.screenshot({ path: screenshot2, fullPage: false }); |
| 53 | + console.log(`Saved: ${screenshot2}`); |
| 54 | + } |
| 55 | + |
| 56 | + // Try to open terminal or settings |
| 57 | + try { |
| 58 | + await page.waitForTimeout(1000); |
| 59 | + |
| 60 | + const terminalButton = await page.$('[data-panel="terminal"]') || |
| 61 | + await page.$('button:has-text("Terminal")') || |
| 62 | + await page.$('[aria-label*="terminal" i]'); |
| 63 | + |
| 64 | + if (terminalButton) { |
| 65 | + await terminalButton.click(); |
| 66 | + await page.waitForTimeout(1000); |
| 67 | + console.log('Capturing terminal panel...'); |
| 68 | + const screenshot3 = path.join(screenshotDir, 'terminal-panel.png'); |
| 69 | + await page.screenshot({ path: screenshot3, fullPage: false }); |
| 70 | + console.log(`Saved: ${screenshot3}`); |
| 71 | + } else { |
| 72 | + // Just take another screenshot of current state |
| 73 | + const screenshot3 = path.join(screenshotDir, 'editor-view.png'); |
| 74 | + await page.screenshot({ path: screenshot3, fullPage: false }); |
| 75 | + console.log(`Saved: ${screenshot3}`); |
| 76 | + } |
| 77 | + } catch (e) { |
| 78 | + console.log('Taking final screenshot...'); |
| 79 | + const screenshot3 = path.join(screenshotDir, 'app-overview.png'); |
| 80 | + await page.screenshot({ path: screenshot3, fullPage: false }); |
| 81 | + console.log(`Saved: ${screenshot3}`); |
| 82 | + } |
| 83 | + |
| 84 | + await browser.close(); |
| 85 | + console.log('\nScreenshot capture complete!'); |
| 86 | +} |
| 87 | + |
| 88 | +captureScreenshots().catch(console.error); |
0 commit comments