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,92 @@
+import { chromium, devices } from '@playwright/test';
+
+const viewports = [
+  { name: 'Mobile - iPhone 14', width: 390, height: 844 },
+  { name: 'Tablet - iPad', width: 768, height: 1024 },
+  { name: 'Desktop - 1024', width: 1024, height: 768 },
+  { name: 'Desktop - 1440', width: 1440, height: 900 },
+];
+
+const pages = [
+  { name: '首页', url: 'http://localhost:3000' },
+  { name: '产品列表', url: 'http://localhost:3000/products' },
+  { name: '解决方案列表', url: 'http://localhost:3000/solutions' },
+  { name: '服务列表', url: 'http://localhost:3000/services' },
+];
+
+async function runResponsiveTest() {
+  const browser = await chromium.launch();
+  const results = [];
+
+  for (const page of pages) {
+    for (const viewport of viewports) {
+      console.log(`\n测试: ${page.name} - ${viewport.name} (${viewport.width}x${viewport.height})`);
+
+      const context = await browser.newContext({
+        viewport: { width: viewport.width, height: viewport.height },
+      });
+
+      const pageInstance = await context.newPage();
+
+      try {
+        await pageInstance.goto(page.url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+        await pageInstance.waitForTimeout(2000);
+
+        const title = await pageInstance.title();
+        const scrollHeight = await pageInstance.evaluate(() => document.documentElement.scrollHeight);
+
+        const heroTitleFontSize = await pageInstance.evaluate(() => {
+          const heroTitle = document.querySelector('h1');
+          if (heroTitle) {
+            const style = window.getComputedStyle(heroTitle);
+            return style.fontSize;
+          }
+          return null;
+        });
+
+        const screenshotPath = `./responsive-test/${page.name.replace(/\//g, '-')}_${viewport.name.replace(/\s/g, '-')}.png`;
+        await pageInstance.screenshot({ path: screenshotPath, fullPage: true });
+
+        console.log(`  ✓ 标题: ${title}`);
+        console.log(`  ✓ 页面高度: ${scrollHeight}px`);
+        console.log(`  ✓ Hero 标题字号: ${heroTitleFontSize || 'N/A'}`);
+        console.log(`  ✓ 截图已保存: ${screenshotPath}`);
+
+        results.push({
+          page: page.name,
+          viewport: viewport.name,
+          width: viewport.width,
+          height: viewport.height,
+          scrollHeight,
+          heroTitleFontSize,
+          status: 'success',
+        });
+      } catch (error) {
+        console.log(`  ✗ 错误: ${error.message}`);
+        results.push({
+          page: page.name,
+          viewport: viewport.name,
+          width: viewport.width,
+          height: viewport.height,
+          status: 'error',
+          error: error.message,
+        });
+      }
+
+      await context.close();
+    }
+  }
+
+  await browser.close();
+
+  console.log('\n\n========== 响应式测试总结 ==========');
+  const successCount = results.filter(r => r.status === 'success').length;
+  const errorCount = results.filter(r => r.status === 'error').length;
+  console.log(`总测试数: ${results.length}`);
+  console.log(`成功: ${successCount}`);
+  console.log(`失败: ${errorCount}`);
+
+  return results;
+}
+
+runResponsiveTest().catch(console.error);