张翔
636bc4ecde
- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
77 lines
2.4 KiB
JavaScript
77 lines
2.4 KiB
JavaScript
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 heroDetail = await page.evaluate(() => {
|
|
const heroSection = document.querySelector('section');
|
|
if (!heroSection) return null;
|
|
|
|
const getAllChildren = (el, depth = 0, maxDepth = 5) => {
|
|
const result = [];
|
|
if (depth > maxDepth) return result;
|
|
|
|
const style = window.getComputedStyle(el);
|
|
const bg = style.backgroundImage || '';
|
|
const hasGlow = bg.includes('radial-gradient') || bg.includes('linear-gradient') || el.className?.includes?.('blur');
|
|
|
|
if (hasGlow) {
|
|
result.push({
|
|
depth,
|
|
tag: el.tagName,
|
|
className: (el.className || '').substring(0, 120),
|
|
zIndex: style.zIndex,
|
|
position: style.position,
|
|
opacity: style.opacity,
|
|
background: bg.substring(0, 150),
|
|
mixBlendMode: style.mixBlendMode,
|
|
backgroundColor: style.backgroundColor,
|
|
});
|
|
}
|
|
|
|
for (const child of Array.from(el.children)) {
|
|
result.push(...getAllChildren(child, depth + 1, maxDepth));
|
|
}
|
|
return result;
|
|
};
|
|
|
|
return getAllChildren(heroSection);
|
|
});
|
|
|
|
console.log(JSON.stringify(heroDetail, null, 2));
|
|
|
|
// 检查所有带 mix-blend-mode 的元素
|
|
console.log('\n=== 所有带 mix-blend-mode 的元素 ===');
|
|
const mixBlendElements = await page.evaluate(() => {
|
|
const all = document.querySelectorAll('*');
|
|
const results = [];
|
|
all.forEach(el => {
|
|
const style = window.getComputedStyle(el);
|
|
if (style.mixBlendMode && style.mixBlendMode !== 'normal') {
|
|
results.push({
|
|
tag: el.tagName,
|
|
className: (el.className || '').substring(0, 100),
|
|
mixBlendMode: style.mixBlendMode,
|
|
opacity: style.opacity,
|
|
zIndex: style.zIndex,
|
|
position: style.position,
|
|
});
|
|
}
|
|
});
|
|
return results.slice(0, 20);
|
|
});
|
|
|
|
console.log(JSON.stringify(mixBlendElements, null, 2));
|
|
|
|
await browser.close();
|
|
console.log('\n分析完成！');
|
|
})();
|