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