张翔
636bc4ecde
- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
96 lines
2.9 KiB
JavaScript
96 lines
2.9 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 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分析完成！');
|
|
})();
|