val-blog/pindou-test.js

const { chromium } = require('playwright');
const fs = require('fs');
const path = require('path');

// 测试配置
const BASE_URL = 'https://gch3n.online/pindou';
const TEST_IMAGE_PATH = '/Users/guchen/.openclaw/workspace/pindou-test-image.jpg';

// 创建测试用的简单图片
function createTestImage() {
  // 使用 ImageMagick 或 canvas 创建一个简单测试图
  // 这里我们先检查是否存在测试图
  if (!fs.existsSync(TEST_IMAGE_PATH)) {
    console.log('⚠️ 测试图片不存在，需要创建或使用现有图片');
    return false;
  }
  return true;
}

async function runTests() {
  console.log('🧪 Pindou 应用测试开始\n');
  
  const browser = await chromium.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  
  try {
    const context = await browser.newContext({
      viewport: { width: 375, height: 812 }, // iPhone 尺寸
      userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15'
    });
    
    const page = await context.newPage();
    
    // 启用控制台日志收集
    const consoleLogs = [];
    page.on('console', msg => {
      const log = `[${msg.type()}] ${msg.text()}`;
      consoleLogs.push(log);
      console.log(log);
    });
    
    page.on('pageerror', error => {
      console.error('❌ 页面错误:', error.message);
    });

    // ========== 测试 1: 首页加载 ==========
    console.log('📱 测试 1: 首页加载');
    await page.goto(BASE_URL, { waitUntil: 'networkidle', timeout: 30000 });
    await page.screenshot({ path: '/tmp/pindou-test-1-home.png' });
    
    const title = await page.title();
    console.log(`   标题: ${title}`);
    console.log(`   截图: /tmp/pindou-test-1-home.png`);
    
    // 检查首页关键元素
    const heroExists = await page.locator('.hero, .intro, [class*="hero"], [class*="intro"]').count() > 0;
    console.log(`   Hero 区域: ${heroExists ? '✅ 存在' : '⚠️ 未找到'}`);
    
    // ========== 测试 2: 编辑器页面 ==========
    console.log('\n📱 测试 2: 编辑器页面');
    await page.goto(`${BASE_URL}/#/pages/editor/editor`, { waitUntil: 'networkidle' });
    await page.waitForTimeout(2000);
    await page.screenshot({ path: '/tmp/pindou-test-2-editor.png' });
    console.log(`   截图: /tmp/pindou-test-2-editor.png`);
    
    // 检查编辑器关键元素
    const canvasPreview = await page.locator('canvas, .canvas-container, [class*="preview"]').count();
    console.log(`   Canvas/预览区域数量: ${canvasPreview}`);
    
    // ========== 测试 3: 处理页面 ==========
    console.log('\n📱 测试 3: 处理页面');
    await page.goto(`${BASE_URL}/#/pages/processing/processing`, { waitUntil: 'networkidle' });
    await page.waitForTimeout(2000);
    await page.screenshot({ path: '/tmp/pindou-test-3-processing.png' });
    console.log(`   截图: /tmp/pindou-test-3-processing.png`);
    
    // ========== 测试 4: 结果页面（关键测试） ==========
    console.log('\n📱 测试 4: 结果页面 - 检查 Canvas 空白问题');
    await page.goto(`${BASE_URL}/#/pages/result/result`, { waitUntil: 'networkidle' });
    
    // 等待可能的异步渲染
    await page.waitForTimeout(3000);
    
    // 检查 canvas 元素
    const canvasElements = await page.locator('canvas').count();
    console.log(`   Canvas 元素数量: ${canvasElements}`);
    
    // 获取 canvas 尺寸
    const canvasInfo = await page.evaluate(() => {
      const canvases = document.querySelectorAll('canvas');
      return Array.from(canvases).map((c, i) => ({
        index: i,
        width: c.width,
        height: c.height,
        clientWidth: c.clientWidth,
        clientHeight: c.clientHeight,
        display: window.getComputedStyle(c).display,
        visibility: window.getComputedStyle(c).visibility
      }));
    });
    console.log('   Canvas 详细信息:', JSON.stringify(canvasInfo, null, 2));
    
    // 截图结果页
    await page.screenshot({ path: '/tmp/pindou-test-4-result.png', fullPage: true });
    console.log(`   截图: /tmp/pindou-test-4-result.png`);
    
    // 检查结果页关键元素
    const resultElements = await page.evaluate(() => {
      return {
        beadPattern: document.querySelector('.bead-pattern, [class*="bead"], [class*="pattern"]') !== null,
        gridContainer: document.querySelector('.grid-container, [class*="grid"]') !== null,
        legend: document.querySelector('.legend, [class*="legend"]') !== null,
        hasContent: document.body.innerText.length > 100
      };
    });
    console.log('   结果页元素检查:', resultElements);
    
    // ========== 测试 5: 桌面端布局 ==========
    console.log('\n💻 测试 5: 桌面端布局');
    await context.setViewportSize({ width: 1280, height: 800 });
    await page.goto(BASE_URL, { waitUntil: 'networkidle' });
    await page.screenshot({ path: '/tmp/pindou-test-5-desktop.png' });
    console.log(`   截图: /tmp/pindou-test-5-desktop.png`);
    
    // ========== 控制台日志汇总 ==========
    console.log('\n📋 控制台日志汇总:');
    if (consoleLogs.length === 0) {
      console.log('   (无控制台输出)');
    } else {
      consoleLogs.slice(-20).forEach(log => console.log(`   ${log}`));
    }
    
    // ========== 测试报告 ==========
    console.log('\n' + '='.repeat(50));
    console.log('📊 测试报告');
    console.log('='.repeat(50));
    console.log(`✅ 首页加载: ${title.includes('拼豆') ? '通过' : '需检查'}`);
    console.log(`✅ 编辑器页: ${canvasPreview > 0 ? '通过' : '需检查'}`);
    console.log(`⚠️  结果页 Canvas: ${canvasElements > 0 ? `发现 ${canvasElements} 个 canvas` : '未发现 canvas!'}`);
    console.log(`   Canvas 尺寸: ${canvasInfo.map(c => `${c.width}x${c.height}`).join(', ') || 'N/A'}`);
    console.log(`   有内容: ${resultElements.hasContent ? '是' : '否'}`);
    
    if (canvasElements === 0) {
      console.log('\n❌ 关键问题: 结果页没有 canvas 元素！');
      console.log('   可能原因:');
      console.log('   1. 组件未正确渲染');
      console.log('   2. 条件渲染 (v-if) 阻止了 canvas 创建');
      console.log('   3. 路由跳转时数据丢失');
    } else if (canvasInfo.some(c => c.width === 0 || c.height === 0)) {
      console.log('\n⚠️  Canvas 尺寸为 0，可能是渲染时机问题');
    }
    
    console.log('\n📁 截图文件:');
    console.log('   /tmp/pindou-test-1-home.png');
    console.log('   /tmp/pindou-test-2-editor.png');
    console.log('   /tmp/pindou-test-3-processing.png');
    console.log('   /tmp/pindou-test-4-result.png (关键)');
    console.log('   /tmp/pindou-test-5-desktop.png');
    
  } catch (error) {
    console.error('\n❌ 测试失败:', error.message);
    console.error(error.stack);
  } finally {
    await browser.close();
    console.log('\n🏁 测试结束');
  }
}

runTests();