docs(test): 添加设计文档、测试规范与 E2E 测试套件

- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
2026-07-07 06:54:25 +08:00
parent 8def296301
commit 636bc4ecde
31 changed files with 9262 additions and 41 deletions
@@ -0,0 +1,95 @@
+import { chromium } from '@playwright/test';
+
+(async () => {
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+  
+  console.log('正在访问首页...');
+  await page.goto('http://localhost:3000');
+  await page.waitForLoadState('networkidle');
+  await page.waitForTimeout(2000);
+  
+  // 检查 Hero 区域的层级结构
+  console.log('\n=== Hero 区域层级分析 ===');
+  const heroLayers = await page.evaluate(() => {
+    const heroSection = document.querySelector('section');
+    if (!heroSection) return [];
+    
+    const layers = [];
+    const children = heroSection.querySelectorAll(':scope > *');
+    children.forEach((child, i) => {
+      const style = window.getComputedStyle(child);
+      layers.push({
+        index: i,
+        tag: child.tagName,
+        className: child.className.substring(0, 100),
+        zIndex: style.zIndex,
+        position: style.position,
+        opacity: style.opacity,
+      });
+    });
+    return layers;
+  });
+  
+  console.log(JSON.stringify(heroLayers, null, 2));
+  
+  // 检查 Stats 区域
+  console.log('\n=== Stats 区域层级分析 ===');
+  const statsLayers = await page.evaluate(() => {
+    const sections = document.querySelectorAll('section');
+    let statsSection = null;
+    for (const s of sections) {
+      if (s.textContent?.includes('用数据说话')) {
+        statsSection = s;
+        break;
+      }
+    }
+    if (!statsSection) return [];
+    
+    const layers = [];
+    const children = statsSection.querySelectorAll(':scope > *');
+    children.forEach((child, i) => {
+      const style = window.getComputedStyle(child);
+      layers.push({
+        index: i,
+        tag: child.tagName,
+        className: child.className.substring(0, 100),
+        zIndex: style.zIndex,
+        position: style.position,
+        opacity: style.opacity,
+      });
+    });
+    return layers;
+  });
+  
+  console.log(JSON.stringify(statsLayers, null, 2));
+  
+  // 检查所有带 radial-gradient 的元素
+  console.log('\n=== 所有径向渐变光晕元素 ===');
+  const glowElements = await page.evaluate(() => {
+    const all = document.querySelectorAll('*');
+    const results = [];
+    all.forEach(el => {
+      const style = window.getComputedStyle(el);
+      const bg = style.backgroundImage || '';
+      if (bg.includes('radial-gradient') && style.position !== 'static') {
+        results.push({
+          tag: el.tagName,
+          className: el.className.substring(0, 80),
+          zIndex: style.zIndex,
+          position: style.position,
+          background: bg.substring(0, 100),
+          opacity: style.opacity,
+          parentTag: el.parentElement?.tagName,
+          parentClass: el.parentElement?.className?.substring(0, 60) || '',
+        });
+      }
+    });
+    return results.slice(0, 20);
+  });
+  
+  console.log(JSON.stringify(glowElements, null, 2));
+  
+  await browser.close();
+  console.log('\n分析完成！');
+})();