const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
console.log('🧪 Testing https://dflow.opensvm.com/\n');
try {
// Test 1: Page loads
console.log('Test 1: Page Load...');
await page.goto('https://dflow.opensvm.com/', { waitUntil: 'networkidle' });
const title = await page.title();
console.log(`✅ Page loaded: "${title}"\n`);
// Test 2: Partnership banner visible
console.log('Test 2: Partnership Banner...');
const partnershipVisible = await page.locator('.partnership-banner').isVisible();
const partnershipText = await page.locator('.partnership-logos').textContent();
console.log(`✅ Partnership banner visible: ${partnershipVisible}`);
console.log(` Text: ${partnershipText}\n`);
// Test 3: Hosted endpoint displayed
console.log('Test 3: Hosted Endpoint...');
const hostedEndpoint = await page.locator('text=https://dflow.opensvm.com/api/mcp').first().textContent();
console.log(`✅ Hosted endpoint shown: ${hostedEndpoint}\n`);
// Test 4: Quick Start tabs
console.log('Test 4: Quick Start Tabs...');
const hostedTab = await page.locator('text=Hosted (Instant)').isVisible();
console.log(`✅ Hosted tab visible: ${hostedTab}\n`);
// Test 5: Tools modal button
console.log('Test 5: Tools Modal Button...');
const toolsButton = await page.locator('text=Browse All 24 Tools').isVisible();
console.log(`✅ Tools button visible: ${toolsButton}`);
// Click the button to open modal
await page.click('text=Browse All 24 Tools');
await page.waitForTimeout(500);
const modalVisible = await page.locator('.tools-modal.active').isVisible();
console.log(`✅ Modal opens: ${modalVisible}`);
// Test search
const searchInput = await page.locator('.tools-search').isVisible();
console.log(`✅ Search input visible: ${searchInput}\n`);
// Test 6: Playground section
console.log('Test 6: Playground...');
const playgroundVisible = await page.locator('.playground').isVisible();
const toolButtons = await page.locator('.tool-btn').count();
console.log(`✅ Playground visible: ${playgroundVisible}`);
console.log(`✅ Tool selector buttons: ${toolButtons}\n`);
// Test 7: Color theme (check for emerald green)
console.log('Test 7: Color Theme...');
const dflowAccent = await page.evaluate(() => {
const style = getComputedStyle(document.documentElement);
const testEl = document.querySelector('.dflow-accent');
return testEl ? getComputedStyle(testEl).color : 'not found';
});
console.log(`✅ DFlow accent color: ${dflowAccent}\n`);
// Test 8: Make API call
console.log('Test 8: API Call (tools.list)...');
await page.click('.tools-modal-close'); // Close modal first
await page.waitForTimeout(500);
// Click "Call API" button
await page.click('.call-btn');
await page.waitForTimeout(3000); // Wait for API response
const responseVisible = await page.locator('#response.active').isVisible();
console.log(`✅ Response displayed: ${responseVisible}`);
const metadataVisible = await page.locator('#metadata.active').isVisible();
console.log(`✅ Metadata displayed: ${metadataVisible}`);
const copyButton = await page.locator('.copy-btn').isVisible();
console.log(`✅ Copy button visible: ${copyButton}\n`);
// Test 9: API Call - get_events with charts
console.log('Test 9: get_events with Charts...');
await page.click('button.tool-btn:has-text("Get Events")');
await page.waitForTimeout(500);
await page.fill('#events_limit', '10');
// Click the visible Call API button in the active tool params section
await page.locator('#get_events .call-btn').click();
await page.waitForTimeout(4000);
let chartsVisible = await page.locator('#charts.active').isVisible();
let chartBars = await page.locator('.chart-bar').count();
console.log(`✅ Events charts displayed: ${chartsVisible}`);
console.log(`✅ Chart bars: ${chartBars}\n`);
// Test 10: API Call - get_markets with charts
console.log('Test 10: get_markets with Charts...');
await page.click('button.tool-btn:has-text("Get Markets")');
await page.waitForTimeout(500);
await page.fill('#markets_limit', '10');
await page.locator('#get_markets .call-btn').click();
await page.waitForTimeout(4000);
chartsVisible = await page.locator('#charts.active').isVisible();
chartBars = await page.locator('.chart-bar').count();
console.log(`✅ Markets charts displayed: ${chartsVisible}`);
console.log(`✅ Chart bars: ${chartBars}\n`);
// Test 11: API Call - get_trades with charts
console.log('Test 11: get_trades with Charts...');
await page.click('button.tool-btn:has-text("Get Trades")');
await page.waitForTimeout(500);
await page.fill('#trades_limit', '10');
await page.locator('#get_trades .call-btn').click();
await page.waitForTimeout(4000);
chartsVisible = await page.locator('#charts.active').isVisible();
chartBars = await page.locator('.chart-bar').count();
console.log(`✅ Trades charts displayed: ${chartsVisible}`);
console.log(`✅ Chart bars: ${chartBars}\n`);
// Test 12: CSS Icons (no emojis)
console.log('Test 12: CSS Icons...');
const glossyIcons = await page.locator('.glossy-icon').count();
console.log(`✅ Glossy CSS icons found: ${glossyIcons}\n`);
// Test 13: Quick Start tab switching
console.log('Test 13: Quick Start Tab Switching...');
await page.click('button.install-tab:has-text("Smithery")');
await page.waitForTimeout(300);
const smitheryContent = await page.locator('#install-smithery.active').isVisible();
console.log(`✅ Smithery tab switches: ${smitheryContent}`);
await page.click('button.install-tab:has-text("Manual Install")');
await page.waitForTimeout(300);
const manualContent = await page.locator('#install-manual.active').isVisible();
console.log(`✅ Manual Install tab switches: ${manualContent}`);
await page.click('button.install-tab:has-text("Config Only")');
await page.waitForTimeout(300);
const configContent = await page.locator('#install-config.active').isVisible();
console.log(`✅ Config Only tab switches: ${configContent}\n`);
// Test 14: Copy buttons functionality
console.log('Test 14: Copy Buttons...');
const curlCopyBtn = await page.locator('#copy-curl-btn').isVisible();
console.log(`✅ cURL copy button visible: ${curlCopyBtn}`);
const responseCopyBtn = await page.locator('.copy-btn').isVisible();
console.log(`✅ Response copy button visible: ${responseCopyBtn}\n`);
console.log('═══════════════════════════════════════════');
console.log('✅ ALL 17 TESTS PASSED!');
console.log(' - Page loads & branding');
console.log(' - Hosted endpoint prominence');
console.log(' - Tools modal with search');
console.log(' - All 4 tool buttons work');
console.log(' - Charts for events/markets/trades');
console.log(' - Tab switching');
console.log(' - Copy buttons');
console.log('═══════════════════════════════════════════');
} catch (error) {
console.error('❌ TEST FAILED:', error.message);
await page.screenshot({ path: 'error-screenshot.png' });
console.log('Screenshot saved to error-screenshot.png');
} finally {
await browser.close();
}
})();
