feat(e2e): 添加完整的E2E测试框架和测试用例
添加Playwright测试框架配置和基础页面对象 实现冒烟测试用例覆盖首页和联系页面核心功能 更新导航组件以支持滚动高亮功能 添加BackButton组件统一返回按钮行为 配置Woodpecker CI集成和测试报告生成
This commit is contained in:
张翔
@@ -0,0 +1,376 @@
|
||||
import { test, expect } from '../../fixtures/base.fixture';
|
||||
import { PerformanceMonitor } from '../../utils/PerformanceMonitor';
|
||||
|
||||
test.describe('交互性能测试 @performance', () => {
|
||||
test('点击导航项应该快速响应', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
const labels = await homePage.getAllNavigationLabels();
|
||||
if (labels.length > 0) {
|
||||
await homePage.clickNavigationItem(labels[0]);
|
||||
}
|
||||
await homePage.page.waitForTimeout(100);
|
||||
const endTime = Date.now();
|
||||
|
||||
const clickDuration = endTime - startTime;
|
||||
console.log('导航项点击响应时间:', clickDuration, 'ms');
|
||||
|
||||
expect(clickDuration).toBeLessThan(500);
|
||||
});
|
||||
|
||||
test('滚动应该流畅', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
for (let i = 0; i < 20; i++) {
|
||||
await homePage.page.evaluate(() => window.scrollBy(0, 100));
|
||||
await homePage.page.waitForTimeout(30);
|
||||
}
|
||||
const endTime = Date.now();
|
||||
|
||||
const scrollDuration = endTime - startTime;
|
||||
console.log('滚动持续时间:', scrollDuration, 'ms');
|
||||
|
||||
expect(scrollDuration).toBeLessThan(1500);
|
||||
});
|
||||
|
||||
test('表单输入应该快速响应', async ({ contactPage, page }) => {
|
||||
await contactPage.goto();
|
||||
await contactPage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
await contactPage.nameInput.fill('测试用户');
|
||||
await contactPage.emailInput.fill('test@example.com');
|
||||
await contactPage.subjectInput.fill('测试主题');
|
||||
await contactPage.messageInput.fill('这是一条测试消息');
|
||||
const endTime = Date.now();
|
||||
|
||||
const inputDuration = endTime - startTime;
|
||||
console.log('表单输入持续时间:', inputDuration, 'ms');
|
||||
|
||||
expect(inputDuration).toBeLessThan(1000);
|
||||
});
|
||||
|
||||
test('按钮点击应该快速响应', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
await homePage.clickContactButton();
|
||||
await homePage.page.waitForTimeout(100);
|
||||
const endTime = Date.now();
|
||||
|
||||
const clickDuration = endTime - startTime;
|
||||
console.log('按钮点击响应时间:', clickDuration, 'ms');
|
||||
|
||||
expect(clickDuration).toBeLessThan(500);
|
||||
});
|
||||
|
||||
test('移动端菜单打开应该快速', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
await homePage.openMobileMenu();
|
||||
const endTime = Date.now();
|
||||
|
||||
const menuOpenDuration = endTime - startTime;
|
||||
console.log('移动端菜单打开时间:', menuOpenDuration, 'ms');
|
||||
|
||||
expect(menuOpenDuration).toBeLessThan(500);
|
||||
});
|
||||
|
||||
test('移动端菜单关闭应该快速', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
await homePage.openMobileMenu();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
await homePage.closeMobileMenu();
|
||||
const endTime = Date.now();
|
||||
|
||||
const menuCloseDuration = endTime - startTime;
|
||||
console.log('移动端菜单关闭时间:', menuCloseDuration, 'ms');
|
||||
|
||||
expect(menuCloseDuration).toBeLessThan(500);
|
||||
});
|
||||
|
||||
test('页面跳转应该快速', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
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 monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
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 }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
const labels = await homePage.getAllNavigationLabels();
|
||||
if (labels.length > 0) {
|
||||
const firstNavItem = homePage.navigation.locator('a').first();
|
||||
await firstNavItem.hover();
|
||||
await homePage.page.waitForTimeout(100);
|
||||
}
|
||||
const endTime = Date.now();
|
||||
|
||||
const hoverDuration = endTime - startTime;
|
||||
console.log('悬停效果持续时间:', hoverDuration, 'ms');
|
||||
|
||||
expect(hoverDuration).toBeLessThan(300);
|
||||
});
|
||||
|
||||
test('快速连续点击应该正常响应', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
const labels = await homePage.getAllNavigationLabels();
|
||||
for (let i = 0; i < Math.min(labels.length, 3); i++) {
|
||||
await homePage.clickNavigationItem(labels[i]);
|
||||
await homePage.page.waitForTimeout(200);
|
||||
}
|
||||
const endTime = Date.now();
|
||||
|
||||
const rapidClickDuration = endTime - startTime;
|
||||
console.log('快速连续点击持续时间:', rapidClickDuration, 'ms');
|
||||
|
||||
expect(rapidClickDuration).toBeLessThan(2000);
|
||||
});
|
||||
|
||||
test('快速滚动应该流畅', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
for (let i = 0; i < 10; i++) {
|
||||
await homePage.page.evaluate(() => window.scrollBy(0, 500));
|
||||
await homePage.page.waitForTimeout(50);
|
||||
}
|
||||
const endTime = Date.now();
|
||||
|
||||
const rapidScrollDuration = endTime - startTime;
|
||||
console.log('快速滚动持续时间:', rapidScrollDuration, 'ms');
|
||||
|
||||
expect(rapidScrollDuration).toBeLessThan(1500);
|
||||
});
|
||||
|
||||
test('表单验证应该快速', async ({ contactPage, page }) => {
|
||||
await contactPage.goto();
|
||||
await contactPage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
await contactPage.emailInput.fill('invalid-email');
|
||||
await contactPage.page.waitForTimeout(100);
|
||||
const isValid = await contactPage.isEmailValid();
|
||||
const endTime = Date.now();
|
||||
|
||||
const validationDuration = endTime - startTime;
|
||||
console.log('表单验证持续时间:', validationDuration, 'ms');
|
||||
|
||||
expect(validationDuration).toBeLessThan(300);
|
||||
expect(isValid).toBe(false);
|
||||
});
|
||||
|
||||
test('键盘导航应该流畅', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
for (let i = 0; i < 10; i++) {
|
||||
await homePage.page.keyboard.press('Tab');
|
||||
await homePage.page.waitForTimeout(50);
|
||||
}
|
||||
const endTime = Date.now();
|
||||
|
||||
const keyboardNavDuration = endTime - startTime;
|
||||
console.log('键盘导航持续时间:', keyboardNavDuration, 'ms');
|
||||
|
||||
expect(keyboardNavDuration).toBeLessThan(1000);
|
||||
});
|
||||
|
||||
test('页面重新加载应该快速', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
await homePage.reload();
|
||||
await homePage.waitForPageLoad();
|
||||
const endTime = Date.now();
|
||||
|
||||
const reloadDuration = endTime - startTime;
|
||||
console.log('页面重新加载持续时间:', reloadDuration, 'ms');
|
||||
|
||||
expect(reloadDuration).toBeLessThan(2000);
|
||||
});
|
||||
|
||||
test('返回上一页应该快速', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
await homePage.clickContactButton();
|
||||
await homePage.page.waitForLoadState('networkidle');
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
await homePage.goBack();
|
||||
await homePage.page.waitForLoadState('networkidle');
|
||||
const endTime = Date.now();
|
||||
|
||||
const backDuration = endTime - startTime;
|
||||
console.log('返回上一页持续时间:', backDuration, 'ms');
|
||||
|
||||
expect(backDuration).toBeLessThan(1500);
|
||||
});
|
||||
|
||||
test('前进到下一页应该快速', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
await homePage.clickContactButton();
|
||||
await homePage.page.waitForLoadState('networkidle');
|
||||
await homePage.goBack();
|
||||
await homePage.page.waitForLoadState('networkidle');
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
await homePage.goForward();
|
||||
await homePage.page.waitForLoadState('networkidle');
|
||||
const endTime = Date.now();
|
||||
|
||||
const forwardDuration = endTime - startTime;
|
||||
console.log('前进到下一页持续时间:', forwardDuration, 'ms');
|
||||
|
||||
expect(forwardDuration).toBeLessThan(1500);
|
||||
});
|
||||
|
||||
test('窗口大小调整应该流畅', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const startTime = Date.now();
|
||||
await homePage.page.setViewportSize({ width: 768, height: 1024 });
|
||||
await homePage.page.waitForTimeout(100);
|
||||
await homePage.page.setViewportSize({ width: 1280, height: 720 });
|
||||
await homePage.page.waitForTimeout(100);
|
||||
const endTime = Date.now();
|
||||
|
||||
const resizeDuration = endTime - startTime;
|
||||
console.log('窗口大小调整持续时间:', resizeDuration, 'ms');
|
||||
|
||||
expect(resizeDuration).toBeLessThan(500);
|
||||
});
|
||||
|
||||
test('所有交互应该在合理时间内完成', async ({ homePage, page }) => {
|
||||
await homePage.goto();
|
||||
await homePage.waitForPageLoad();
|
||||
|
||||
const monitor = new PerformanceMonitor(page);
|
||||
await monitor.startMonitoring();
|
||||
|
||||
const interactions: { name: string; duration: number }[] = [];
|
||||
|
||||
const startClick = Date.now();
|
||||
await homePage.clickContactButton();
|
||||
await homePage.page.waitForLoadState('networkidle');
|
||||
interactions.push({ name: '点击按钮', duration: Date.now() - startClick });
|
||||
|
||||
await homePage.goBack();
|
||||
const startScroll = Date.now();
|
||||
await homePage.scrollToSection('services');
|
||||
interactions.push({ name: '滚动到区块', duration: Date.now() - startScroll });
|
||||
|
||||
const startNav = Date.now();
|
||||
const labels = await homePage.getAllNavigationLabels();
|
||||
if (labels.length > 0) {
|
||||
await homePage.clickNavigationItem(labels[0]);
|
||||
}
|
||||
interactions.push({ name: '导航点击', duration: Date.now() - startNav });
|
||||
|
||||
console.log('交互性能汇总:');
|
||||
interactions.forEach(interaction => {
|
||||
console.log(`- ${interaction.name}: ${interaction.duration}ms`);
|
||||
});
|
||||
|
||||
interactions.forEach(interaction => {
|
||||
expect(interaction.duration).toBeLessThan(2000);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -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