feat(e2e): 添加完整的E2E测试框架和测试用例
添加Playwright测试框架配置和基础页面对象 实现冒烟测试用例覆盖首页和联系页面核心功能 更新导航组件以支持滚动高亮功能 添加BackButton组件统一返回按钮行为 配置Woodpecker CI集成和测试报告生成
This commit is contained in:
张翔
@@ -0,0 +1,271 @@
|
||||
import { test, expect } from '../../fixtures/base.fixture';
|
||||
import { PerformanceMonitor } from '../../utils/PerformanceMonitor';
|
||||
import { PerformanceThresholds } from '../../types';
|
||||
|
||||
const performanceThresholds: PerformanceThresholds = {
|
||||
loadTime: 3000,
|
||||
firstContentfulPaint: 1800,
|
||||
largestContentfulPaint: 2500,
|
||||
timeToInteractive: 3500,
|
||||
cumulativeLayoutShift: 0.1,
|
||||
firstInputDelay: 100,
|
||||
};
|
||||
|
||||
test.describe('性能测试 @performance', () => {
|
||||
test('首页加载时间应该在阈值范围内', async ({ homePage, page }) => {
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const metrics = await monitor.collectMetrics();
|
||||
const validation = monitor.validateMetrics(performanceThresholds);
|
||||
|
||||
console.log('首页性能指标:', metrics);
|
||||
console.log('验证结果:', validation);
|
||||
|
||||
expect(validation.passed).toBe(true);
|
||||
expect(metrics.loadTime).toBeLessThan(performanceThresholds.loadTime);
|
||||
});
|
||||
|
||||
test('联系页面加载时间应该在阈值范围内', async ({ contactPage, page }) => {
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
await contactPage.goto();
|
||||
await contactPage.waitForPageLoad();
|
||||
|
||||
const metrics = await monitor.collectMetrics();
|
||||
const validation = monitor.validateMetrics(performanceThresholds);
|
||||
|
||||
console.log('联系页面性能指标:', metrics);
|
||||
console.log('验证结果:', validation);
|
||||
|
||||
expect(validation.passed).toBe(true);
|
||||
expect(metrics.loadTime).toBeLessThan(performanceThresholds.loadTime);
|
||||
});
|
||||
|
||||
test('首次内容绘制应该在1.8秒内完成', async ({ homePage, page }) => {
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const fcp = await monitor.measureFirstContentfulPaint();
|
||||
|
||||
console.log('首次内容绘制时间:', fcp, 'ms');
|
||||
|
||||
expect(fcp).toBeLessThan(performanceThresholds.firstContentfulPaint);
|
||||
expect(fcp).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('最大内容绘制应该在2.5秒内完成', async ({ homePage, page }) => {
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const lcp = await monitor.measureLargestContentfulPaint();
|
||||
|
||||
console.log('最大内容绘制时间:', lcp, 'ms');
|
||||
|
||||
expect(lcp).toBeLessThan(performanceThresholds.largestContentfulPaint);
|
||||
expect(lcp).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('累积布局偏移应该小于0.1', async ({ homePage, page }) => {
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
await homePage.scrollToSection('services');
|
||||
await homePage.scrollToSection('products');
|
||||
await homePage.scrollToSection('cases');
|
||||
|
||||
const cls = await monitor.measureCumulativeLayoutShift();
|
||||
|
||||
console.log('累积布局偏移:', cls);
|
||||
|
||||
expect(cls).toBeLessThan(performanceThresholds.cumulativeLayoutShift);
|
||||
expect(cls).toBeGreaterThanOrEqual(0);
|
||||
});
|
||||
|
||||
test('首次输入延迟应该小于100ms', async ({ homePage, page }) => {
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
await homePage.logo.click();
|
||||
|
||||
const fid = await monitor.measureFirstInputDelay();
|
||||
|
||||
console.log('首次输入延迟:', fid, 'ms');
|
||||
|
||||
expect(fid).toBeLessThan(performanceThresholds.firstInputDelay);
|
||||
expect(fid).toBeGreaterThanOrEqual(0);
|
||||
});
|
||||
|
||||
test('可交互时间应该在3.5秒内完成', async ({ homePage, page }) => {
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const tti = await monitor.measureTimeToInteractive();
|
||||
|
||||
console.log('可交互时间:', tti, 'ms');
|
||||
|
||||
expect(tti).toBeLessThan(performanceThresholds.timeToInteractive);
|
||||
expect(tti).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('页面应该有良好的帧率', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
const frameRate = await monitor.measureFrameRate();
|
||||
|
||||
console.log('帧率:', frameRate, 'FPS');
|
||||
|
||||
expect(frameRate).toBeGreaterThan(30);
|
||||
});
|
||||
|
||||
test('资源加载应该高效', async ({ homePage, page }) => {
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const resources = await monitor.measureResourceTiming();
|
||||
const totalSize = resources.reduce((sum, r) => sum + (r.size || 0), 0);
|
||||
const totalSizeKB = totalSize / 1024;
|
||||
|
||||
console.log('总资源大小:', totalSizeKB.toFixed(2), 'KB');
|
||||
console.log('资源数量:', resources.length);
|
||||
|
||||
expect(totalSizeKB).toBeLessThan(3000);
|
||||
expect(resources.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('DOM内容加载应该快速', async ({ homePage, page }) => {
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
await homePage.goto();
|
||||
|
||||
const dcl = await monitor.measureDomContentLoaded();
|
||||
|
||||
console.log('DOM内容加载时间:', dcl, 'ms');
|
||||
|
||||
expect(dcl).toBeLessThan(2000);
|
||||
expect(dcl).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('应该生成性能报告', async ({ homePage, page }) => {
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const report = await monitor.generateReport();
|
||||
|
||||
console.log('性能报告:');
|
||||
console.log(report);
|
||||
|
||||
expect(report).toContain('页面加载时间');
|
||||
expect(report).toContain('首次内容绘制');
|
||||
expect(report).toContain('最大内容绘制');
|
||||
expect(report).toContain('累积布局偏移');
|
||||
expect(report).toContain('资源加载');
|
||||
});
|
||||
|
||||
test('滚动性能应该良好', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const startTime = Date.now();
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
await homePage.page.evaluate(() => window.scrollBy(0, 200));
|
||||
await homePage.page.waitForTimeout(50);
|
||||
}
|
||||
|
||||
const endTime = Date.now();
|
||||
const scrollDuration = endTime - startTime;
|
||||
|
||||
console.log('滚动持续时间:', scrollDuration, 'ms');
|
||||
|
||||
expect(scrollDuration).toBeLessThan(2000);
|
||||
});
|
||||
|
||||
test('导航性能应该良好', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const startTime = Date.now();
|
||||
await homePage.clickContactButton();
|
||||
await homePage.page.waitForLoadState('networkidle');
|
||||
const endTime = Date.now();
|
||||
|
||||
const navigationDuration = endTime - startTime;
|
||||
|
||||
console.log('导航持续时间:', navigationDuration, 'ms');
|
||||
|
||||
expect(navigationDuration).toBeLessThan(2000);
|
||||
});
|
||||
|
||||
test('表单提交性能应该良好', async ({ contactPage, page, testDataGenerator }) => {
|
||||
await contactPage.goto();
|
||||
await contactPage.waitForPageLoad();
|
||||
|
||||
const formData = testDataGenerator.generateContactFormData();
|
||||
|
||||
const startTime = Date.now();
|
||||
await contactPage.fillContactForm(formData);
|
||||
await contactPage.submitForm();
|
||||
await contactPage.waitForFormSubmission();
|
||||
const endTime = Date.now();
|
||||
|
||||
const submissionDuration = endTime - startTime;
|
||||
|
||||
console.log('表单提交持续时间:', submissionDuration, 'ms');
|
||||
|
||||
expect(submissionDuration).toBeLessThan(3000);
|
||||
});
|
||||
|
||||
test('所有核心性能指标应该符合标准', async ({ homePage, page }) => {
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const metrics = await monitor.collectMetrics();
|
||||
const validation = monitor.validateMetrics(performanceThresholds);
|
||||
|
||||
console.log('完整性能指标:', metrics);
|
||||
console.log('验证结果:', validation);
|
||||
|
||||
if (!validation.passed) {
|
||||
console.error('性能违规:', validation.violations);
|
||||
}
|
||||
|
||||
expect(metrics.loadTime).toBeLessThan(performanceThresholds.loadTime);
|
||||
expect(metrics.firstContentfulPaint).toBeLessThan(performanceThresholds.firstContentfulPaint);
|
||||
expect(metrics.largestContentfulPaint).toBeLessThan(performanceThresholds.largestContentfulPaint);
|
||||
expect(metrics.timeToInteractive).toBeLessThan(performanceThresholds.timeToInteractive);
|
||||
expect(metrics.cumulativeLayoutShift).toBeLessThan(performanceThresholds.cumulativeLayoutShift);
|
||||
expect(metrics.firstInputDelay).toBeLessThan(performanceThresholds.firstInputDelay);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user