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,93 @@
+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 区域的所有直接子元素，按 DOM 顺序
+  console.log('\n=== Hero Section 直接子元素（按 DOM 顺序） ===');
+  const heroChildren = await page.evaluate(() => {
+    const heroSection = document.querySelector('section');
+    if (!heroSection) return [];
+    
+    const results = [];
+    let index = 0;
+    for (const child of Array.from(heroSection.children)) {
+      const style = window.getComputedStyle(child);
+      results.push({
+        index: index++,
+        tag: child.tagName,
+        className: (child.className || '').substring(0, 80),
+        zIndex: style.zIndex,
+        position: style.position,
+        isText: child.textContent?.trim()?.substring(0, 30) || '',
+      });
+    }
+    return results;
+  });
+  
+  console.log(JSON.stringify(heroChildren, null, 2));
+  
+  // 检查每个 section 的背景色
+  console.log('\n=== 各 Section 背景色 ===');
+  const sectionsBg = await page.evaluate(() => {
+    const sections = document.querySelectorAll('section');
+    const results = [];
+    sections.forEach((s, i) => {
+      const style = window.getComputedStyle(s);
+      results.push({
+        index: i,
+        tag: s.tagName,
+        backgroundColor: style.backgroundColor,
+        className: (s.className || '').substring(0, 60),
+        firstText: s.textContent?.trim()?.substring(0, 25) || '',
+      });
+    });
+    return results;
+  });
+  
+  console.log(JSON.stringify(sectionsBg, null, 2));
+  
+  // 截图对比：先截一张，然后用 JS 去掉所有 blur 和 radial-gradient 元素，再截一张
+  const screenshotDir = '/tmp/screenshots';
+  
+  // 原始截图
+  await page.screenshot({ path: `${screenshotDir}/before-remove-glow.png` });
+  console.log('\n✓ 原始截图已保存');
+  
+  // 去掉所有光晕相关元素
+  await page.evaluate(() => {
+    const all = document.querySelectorAll('*');
+    let removedCount = 0;
+    let hiddenCount = 0;
+    
+    all.forEach(el => {
+      const style = window.getComputedStyle(el);
+      const bg = style.backgroundImage || '';
+      const hasRadialGradient = bg.includes('radial-gradient');
+      const hasBlur = style.filter?.includes('blur') || el.className?.includes?.('blur');
+      
+      if (hasRadialGradient || hasBlur) {
+        if (el.style) {
+          el.style.visibility = 'hidden';
+          hiddenCount++;
+        }
+      }
+    });
+    
+    return { hiddenCount };
+  });
+  
+  await page.screenshot({ path: `${screenshotDir}/after-remove-glow.png` });
+  console.log('✓ 去掉光晕后的截图已保存');
+  
+  await browser.close();
+  console.log('\n对比截图已保存到 /tmp/screenshots/ 目录');
+  console.log('before-remove-glow.png - 原始效果');
+  console.log('after-remove-glow.png - 去掉光晕后效果');
+})();