张翔
72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
import { getMobileDevices } from '../../../utils/devices';
|
|
import { networkConfigs } from '../../../config/network-configs';
|
|
import { MobilePerformanceMonitor } from '../../../utils/MobilePerformanceMonitor';
|
|
import { MobileTestDataGenerator } from '../../../utils/MobileTestDataGenerator';
|
|
|
|
test.describe('移动端性能测试 @mobile @performance', () => {
|
|
const devices = getMobileDevices().slice(0, 3);
|
|
const networkTypes = ['wifi-fast', '4g-lte', '3g-fast', '2g-slow'] as const;
|
|
|
|
for (const device of devices) {
|
|
for (const network of networkTypes) {
|
|
test(`${device.name} - ${networkConfigs[network].name} - 首屏加载性能`, async ({ page }) => {
|
|
await page.setViewportSize(device.viewport);
|
|
|
|
await page.goto('/');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
const monitor = new MobilePerformanceMonitor(page);
|
|
const vitals = await monitor.getCoreWebVitals();
|
|
|
|
const baseline = MobileTestDataGenerator.generatePerformanceBaseline(device.name, network);
|
|
|
|
expect(vitals.LCP).toBeLessThan(baseline.LCP);
|
|
expect(vitals.FCP).toBeLessThan(baseline.FCP);
|
|
expect(vitals.CLS).toBeLessThan(baseline.CLS);
|
|
});
|
|
}
|
|
}
|
|
|
|
test('移动端 - 交互响应性能', async ({ page }) => {
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
await page.goto('/');
|
|
|
|
const monitor = new MobilePerformanceMonitor(page);
|
|
const vitals = await monitor.getCoreWebVitals();
|
|
|
|
expect(vitals.FCP).toBeLessThan(2000);
|
|
expect(vitals.LCP).toBeLessThan(3000);
|
|
expect(vitals.CLS).toBeLessThan(0.25);
|
|
});
|
|
|
|
test('移动端 - 页面资源加载性能', async ({ page }) => {
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.goto('/');
|
|
|
|
const resources = await page.evaluate(() => {
|
|
return performance.getEntriesByType('resource').map(r => ({
|
|
name: r.name,
|
|
duration: r.duration,
|
|
size: r.transferSize,
|
|
}));
|
|
});
|
|
|
|
const largeResources = resources.filter(r => r.size > 100000);
|
|
expect(largeResources.length).toBeLessThan(5);
|
|
});
|
|
|
|
test('移动端 - JavaScript 执行性能', async ({ page }) => {
|
|
await page.setViewportSize({ width: 414, height: 896 });
|
|
await page.goto('/');
|
|
|
|
const jsMetrics = await page.evaluate(() => {
|
|
return {
|
|
totalTasks: performance.getEntriesByType('measure').length,
|
|
longTasks: performance.getEntriesByType('measure').filter((m: any) => m.duration > 50).length,
|
|
};
|
|
});
|
|
|
|
expect(jsMetrics.longTasks).toBeLessThan(10);
|
|
});
|
|
}); |