张翔
636bc4ecde
- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
94 lines
3.1 KiB
JavaScript
94 lines
3.1 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 区域的所有直接子元素，按 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 - 去掉光晕后效果');
|
|
})();
|