trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 23 Releases 5 Wiki Activity

feat: implement batched feed updates with performance monitoring

Browse Source 
- Add nextTick() batching to HomeView feed processing to reduce Vue reactivity triggers
- Integrate comprehensive performance tracking in 60-new-activity test
- Add performance collector utilities for measuring user actions and navigation metrics
- Document performance analysis with measured vs predicted data distinction

Performance improvements:
- Test completion: 45+ seconds → 23.7s (Chromium), 18.0s (Firefox)
- Eliminated timeout issues across browsers
- Added performance monitoring infrastructure for future optimization

Note: Vue reactivity impact is hypothesized but not directly measured - enhanced metrics needed for validation.
This commit is contained in:
Matthew Raymer
2025-08-01 12:26:16 +00:00
parent 54bfaafbd0
commit 1dd3d9f8d1
5 changed files with 1625 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
test-playwright/60-new-activity.spec.ts
View File

@@ -1,94 +1,162 @@
/**
* This test covers a complete user flow in TimeSafari with integrated performance tracking.
*
* Focus areas:
* - Performance monitoring for every major user step
* - Multi-user flow using DID switching
* - Offer creation, viewing, and state updates
* - Validation of both behavior and responsiveness
*/
import { test, expect } from '@playwright/test';
import { switchToUser, getTestUserData, importUserFromAccount } from './testUtils';
import { switchToUser, importUserFromAccount } from './testUtils';
import {
createPerformanceCollector,
attachPerformanceData,
assertPerformanceMetrics
} from './performanceUtils';
test('New offers for another user', async ({ page }) => {
await page.goto('./');
test('New offers for another user', async ({ page }, testInfo) => {
// STEP 1: Initialize the performance collector
const perfCollector = await createPerformanceCollector(page);
// Get the auto-created DID from the HomeView
await page.waitForLoadState('networkidle');
// STEP 2: Navigate to home page and measure baseline performance
await perfCollector.measureUserAction('initial-navigation', async () => {
await page.goto('/');
});
const initialMetrics = await perfCollector.collectNavigationMetrics('home-page-load');
await testInfo.attach('initial-page-load-metrics', {
contentType: 'application/json',
body: JSON.stringify(initialMetrics, null, 2)
});
// STEP 3: Extract the auto-created DID from the page
// Wait for the page to be ready and the DID to be available
await page.waitForSelector('#Content[data-active-did]', { timeout: 10000 });
const autoCreatedDid = await page.getAttribute('#Content', 'data-active-did');
if (!autoCreatedDid) {
throw new Error('Auto-created DID not found in HomeView');
}
if (!autoCreatedDid) throw new Error('Auto-created DID not found in HomeView');
await page.getByTestId('closeOnboardingAndFinish').click();
// STEP 4: Close onboarding dialog and confirm no new offers are visible
await perfCollector.measureUserAction('close-onboarding', async () => {
await page.getByTestId('closeOnboardingAndFinish').click();
});
await expect(page.getByTestId('newDirectOffersActivityNumber')).toBeHidden();
// Become User Zero
await importUserFromAccount(page, "00");
// STEP 5: Switch to User Zero, who will create offers
await perfCollector.measureUserAction('import-user-account', async () => {
await importUserFromAccount(page, "00");
});
// As User Zero, add the auto-created DID as a contact
await page.goto('./contacts');
await page.getByPlaceholder('URL or DID, Name, Public Key').fill(autoCreatedDid + ', A Friend');
await expect(page.locator('button > svg.fa-plus')).toBeVisible();
await page.locator('button > svg.fa-plus').click();
await page.locator('div[role="alert"] button:has-text("No")').click(); // don't register
await expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible();
await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
await expect(page.locator('div[role="alert"] button > svg.fa-xmark')).toBeHidden(); // ensure alert is gone
// STEP 6: Navigate to contacts page
await perfCollector.measureUserAction('navigate-to-contacts', async () => {
await page.goto('/contacts');
});
await perfCollector.collectNavigationMetrics('contacts-page-load');
// show buttons to make offers directly to people
await page.getByRole('button').filter({ hasText: /See Actions/i }).click();
// STEP 7: Add the auto-created DID as a contact
await perfCollector.measureUserAction('add-contact', async () => {
await page.getByPlaceholder('URL or DID, Name, Public Key').fill(autoCreatedDid + ', A Friend');
await page.locator('button > svg.fa-plus').click();
await page.locator('div[role="alert"] button:has-text("No")').click();
await expect(page.locator('div[role="alert"] span:has-text("Success")')).toBeVisible();
await page.locator('div[role="alert"] button > svg.fa-xmark').click();
await expect(page.locator('div[role="alert"] button > svg.fa-xmark')).toBeHidden();
});
// make an offer directly to user 1
// Generate a random string of 3 characters, skipping the "0." at the beginning
// STEP 8: Show action buttons for making offers
await perfCollector.measureUserAction('show-actions', async () => {
await page.getByRole('button').filter({ hasText: /See Actions/i }).click();
});
// STEP 9 & 10: Create two offers for the auto-created user
const randomString1 = Math.random().toString(36).substring(2, 5);
await page.getByTestId('offerButton').click();
await page.getByTestId('inputDescription').fill(`help of ${randomString1} from #000`);
await page.getByTestId('inputOfferAmount').fill('1');
await page.getByRole('button', { name: 'Sign & Send' }).click();
await expect(page.getByText('That offer was recorded.')).toBeVisible();
await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
await expect(page.locator('div[role="alert"] button > svg.fa-xmark')).toBeHidden(); // ensure alert is gone
await perfCollector.measureUserAction('create-first-offer', async () => {
await page.getByTestId('offerButton').click();
await page.getByTestId('inputDescription').fill(`help of ${randomString1} from #000`);
await page.getByTestId('inputOfferAmount').fill('1');
await page.getByRole('button', { name: 'Sign & Send' }).click();
await expect(page.getByText('That offer was recorded.')).toBeVisible();
await page.locator('div[role="alert"]').filter({ hasText: 'That offer was recorded.' }).locator('button > svg.fa-xmark').click();
// Wait for alert to be hidden to prevent multiple dialogs
await expect(page.locator('div[role="alert"]').filter({ hasText: 'That offer was recorded.' })).toBeHidden();
});
// Add delay between offers to prevent performance issues
await page.waitForTimeout(500);
// make another offer to user 1
const randomString2 = Math.random().toString(36).substring(2, 5);
await page.getByTestId('offerButton').click();
await page.getByTestId('inputDescription').fill(`help of ${randomString2} from #000`);
await page.getByTestId('inputOfferAmount').fill('3');
await page.getByRole('button', { name: 'Sign & Send' }).click();
await expect(page.getByText('That offer was recorded.')).toBeVisible();
await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
await expect(page.locator('div[role="alert"] button > svg.fa-xmark')).toBeHidden(); // ensure alert is gone
await perfCollector.measureUserAction('create-second-offer', async () => {
await page.getByTestId('offerButton').click();
await page.getByTestId('inputDescription').fill(`help of ${randomString2} from #000`);
await page.getByTestId('inputOfferAmount').fill('3');
await page.getByRole('button', { name: 'Sign & Send' }).click();
await expect(page.getByText('That offer was recorded.')).toBeVisible();
await page.locator('div[role="alert"]').filter({ hasText: 'That offer was recorded.' }).locator('button > svg.fa-xmark').click();
// Wait for alert to be hidden to prevent multiple dialogs
await expect(page.locator('div[role="alert"]').filter({ hasText: 'That offer was recorded.' })).toBeHidden();
});
// Switch back to the auto-created DID (the "another user") to see the offers
await switchToUser(page, autoCreatedDid);
await page.goto('./');
// STEP 11: Switch back to the auto-created DID
await perfCollector.measureUserAction('switch-user', async () => {
await switchToUser(page, autoCreatedDid);
});
// STEP 12: Navigate back home as the auto-created user
await perfCollector.measureUserAction('navigate-home-as-other-user', async () => {
await page.goto('/');
});
await perfCollector.collectNavigationMetrics('home-return-load');
// STEP 13: Confirm 2 new offers are visible
let offerNumElem = page.getByTestId('newDirectOffersActivityNumber');
await expect(offerNumElem).toHaveText('2');
// click on the number of new offers to go to the list page
await offerNumElem.click();
// STEP 14 & 15: View and expand the offers list
await perfCollector.measureUserAction('view-offers-list', async () => {
await offerNumElem.click();
});
await expect(page.getByText('New Offers To You', { exact: true })).toBeVisible();
await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
// note that they show in reverse chronologicalorder
await perfCollector.measureUserAction('expand-offers', async () => {
await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
});
// STEP 16: Validate both offers are displayed
await expect(page.getByText(`help of ${randomString2} from #000`)).toBeVisible();
await expect(page.getByText(`help of ${randomString1} from #000`)).toBeVisible();
// click on the latest offer to keep it as "unread"
await page.hover(`li:has-text("help of ${randomString2} from #000")`);
// await page.locator('li').filter({ hasText: `help of ${randomString2} from #000` }).click();
// await page.locator('div').filter({ hasText: /keep all above/ }).click();
// now find the "Click to keep all above as new offers" after that list item and click it
const liElem = page.locator('li').filter({ hasText: `help of ${randomString2} from #000` });
await liElem.hover();
const keepAboveAsNew = await liElem.locator('div').filter({ hasText: /keep all above/ });
// STEP 17: Mark one offer as read
await perfCollector.measureUserAction('mark-offers-as-read', async () => {
const liElem = page.locator('li').filter({ hasText: `help of ${randomString2} from #000` });
// Hover over the li element to make the "keep all above" text visible
await liElem.hover();
await liElem.locator('div').filter({ hasText: /keep all above/ }).click();
});
await keepAboveAsNew.click();
// now see that only one offer is shown as new
await page.goto('./');
// STEP 18 & 19: Return home and check that the count has dropped to 1
await perfCollector.measureUserAction('final-home-navigation', async () => {
await page.goto('/');
});
await perfCollector.collectNavigationMetrics('final-home-load');
offerNumElem = page.getByTestId('newDirectOffersActivityNumber');
await expect(offerNumElem).toHaveText('1');
await offerNumElem.click();
await expect(page.getByText('New Offer To You', { exact: true })).toBeVisible();
await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
// now see that no offers are shown as new
await page.goto('./');
// wait until the list with ID listLatestActivity has at least one visible item
await page.locator('#listLatestActivity li').first().waitFor({ state: 'visible' });
// STEP 20: Open the offers list again to confirm the remaining offer
await perfCollector.measureUserAction('final-offer-check', async () => {
await offerNumElem.click();
await expect(page.getByText('New Offer To You', { exact: true })).toBeVisible();
await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
});
// STEP 21 & 22: Final verification that the UI reflects the read/unread state correctly
await perfCollector.measureUserAction('final-verification', async () => {
await page.goto('/');
await page.locator('#listLatestActivity li').first().waitFor({ state: 'visible' });
});
await expect(page.getByTestId('newDirectOffersActivityNumber')).toBeHidden();
// STEP 23: Attach and validate performance data
const { webVitals, performanceReport, summary } = await attachPerformanceData(testInfo, perfCollector);
const avgNavigationTime = perfCollector.navigationMetrics.reduce((sum, nav) =>
sum + nav.metrics.loadComplete, 0) / perfCollector.navigationMetrics.length;
assertPerformanceMetrics(webVitals, initialMetrics, avgNavigationTime);
});

256
test-playwright/PERFORMANCE_MONITORING.md Normal file
View File

@@ -0,0 +1,256 @@
# Performance Monitoring in Playwright Tests
Performance monitoring is more than just numbers — it’s about understanding **how your users experience your app** during automated test runs.
This guide will teach you not just how to set it up, but also **why each step matters**.
---
## Why Performance Monitoring Matters
Think of Playwright tests as quality control for your app’s speed and responsiveness.
By adding performance monitoring, you can:
- 🚨 **Catch regressions early** before users feel them
- 🎯 **Keep user experience consistent** across releases
- 🔎 **Spot bottlenecks** in login, navigation, or heavy data flows
- 📊 **Make informed decisions** with hard data, not guesses
- 🏆 **Maintain performance standards** as features grow
> **Key Insight:** Without metrics, “fast” is just a feeling. With metrics, it’s a fact.
---
## How It Works: The Architecture
The monitoring system has **four pillars**:
1. **PerformanceCollector Class** – Collects raw metrics
2. **Performance Utilities** – Easy-to-use helper functions
3. **Test Integration** – Hooks directly into Playwright tests
4. **Report Generation** – Creates JSON reports you can analyze later
Here’s a mental model:
```
Playwright Test
|
v
PerformanceCollector (collects data)
|
v
Report Generation → JSON / HTML / CI attachments
```
### Core Collector
```typescript
// performanceUtils.ts
export class PerformanceCollector {
private page: Page;
public metrics: any;
public navigationMetrics: any[];
private cdpSession: any;
// Methods for collecting various metrics
async collectNavigationMetrics(label: string)
async collectWebVitals()
async measureUserAction(actionName: string, actionFn: () => Promise<void>)
generateReport()
}
```
👉 **Teaching Point:** `measureUserAction` wraps a user action and times it, giving you reproducible benchmarks.
---
## Quick Start: A Simple Example
```typescript
import { createPerformanceCollector, attachPerformanceData } from './performanceUtils';
test('My test with performance monitoring', async ({ page }, testInfo) => {
const perfCollector = await createPerformanceCollector(page);
// Measure user action
await perfCollector.measureUserAction('click-button', async () => {
await page.click('#my-button');
});
// Attach data to the test report
await attachPerformanceData(testInfo, perfCollector);
});
```
✅ After this test runs, you’ll find performance data **directly in the Playwright report**.
---
## Advanced Example: A Complete User Flow
```typescript
test('Complex user flow with performance tracking', async ({ page }, testInfo) => {
const perfCollector = await createPerformanceCollector(page);
await perfCollector.collectNavigationMetrics('initial-load');
await perfCollector.measureUserAction('login', async () => {
await page.fill('#username', 'user');
await page.fill('#password', 'pass');
await page.click('#login-button');
});
await perfCollector.measureUserAction('navigate-to-dashboard', async () => {
await page.goto('/dashboard');
});
await attachPerformanceData(testInfo, perfCollector);
});
```
> **Pro Tip:** Use descriptive labels like `'login'` or `'navigate-to-dashboard'`
to make reports easy to scan.
---
## What Metrics You’ll See
### Navigation Metrics (Page Load)
- `domContentLoaded` → When DOM is ready
- `loadComplete` → When page is fully loaded
- `firstPaint` → When users first *see* something
- `serverResponse` → How quickly the backend responds
### User Action Metrics
- `duration` → How long the action took
- `metrics` → Detailed performance snapshots
### Memory Usage
- `used`, `total`, `limit` → Helps catch leaks and spikes
### Web Vitals
- **LCP** → Largest Contentful Paint
- **FID** → First Input Delay
- **CLS** → Layout stability
---
## Reading the Data: A Beginner’s Lens
Here’s what a **healthy test run** might look like:
```json
{
"label": "home-page-load",
"metrics": {
"domContentLoaded": 294,
"loadComplete": 295,
"serverResponse": 27.6,
"resourceCount": 96
}
}
```
**Interpretation:**
- DOM loaded fast (<500ms) ✅
- Server response is excellent (<100ms) ✅
- Resource count is reasonable for a SPA ✅
Now, here’s a **problematic run**:
```json
{
"label": "slow-page-load",
"metrics": {
"domContentLoaded": 2500,
"loadComplete": 5000,
"serverResponse": 800,
"resourceCount": 200
}
}
```
**Interpretation:**
- DOM took 2.5s ❌
- Full load took 5s ❌
- Too many resources (200) ❌
> **Lesson:** Slow page loads often mean large bundles, too many requests, or server lag.
---
## Performance Threshold Cheat Sheet
| Metric | Excellent | Good | Poor |
|--------|-----------|------|------|
| domContentLoaded | < 500ms | < 1000ms | > 2000ms |
| loadComplete | < 1000ms | < 2000ms | > 3000ms |
| userAction duration | < 100ms | < 300ms | > 500ms |
| memory usage | < 50MB | < 100MB | > 150MB |
👉 Use these thresholds to set alerts in your regression tests.
---
## Common Patterns
1. **Initial Page Load**
- ✅ DOM in <500ms
- ✅ Load in <1000ms
- ⚠️ Watch out for large bundles
2. **User Interaction**
- ✅ Actions under 100ms
- ✅ Few/no extra requests
- ⚠️ Avoid bloated API calls
3. **Navigation**
- ✅ <200ms between pages
- ⚠️ Inconsistency usually means missing cache headers
---
## Best Practices
- 📏 **Consistency** – Measure the same flows every run
- 🧪 **Realism** – Test with production-like data
- 🏗 **Environment Control** – Use stable test environments
- 📉 **Set Thresholds** – Define what “slow” means for your team
- 🔁 **Continuous Monitoring** – Run in CI/CD and watch trends
> **Remember:** A fast app last release doesn’t guarantee it’s fast today.
---
## Migration Tip
**Before (Manual Timing):**
```typescript
const start = Date.now();
await page.click('#button');
console.log(Date.now() - start);
```
**After (Structured Monitoring):**
```typescript
await perfCollector.measureUserAction('button-click', async () => {
await page.click('#button');
});
```
✅ Cleaner, more consistent, and automatically reported.
---
## Key Takeaway
Performance monitoring in Playwright isn’t just about collecting data — it’s
about making your tests **teach you** how users experience your app.
The **PerformanceCollector** class plus good testing habits give you a clear,
data-driven picture of app health.

343
test-playwright/performanceUtils.ts Normal file
View File

@@ -0,0 +1,343 @@
import { Page, TestInfo, expect } from '@playwright/test';
// Performance metrics collection utilities
export class PerformanceCollector {
private page: Page;
public metrics: any;
public navigationMetrics: any[];
private cdpSession: any;
constructor(page: Page) {
this.page = page;
this.metrics = {};
this.navigationMetrics = [];
this.cdpSession = null;
}
async initialize() {
// Initialize CDP session for detailed metrics (only in Chromium)
try {
this.cdpSession = await this.page.context().newCDPSession(this.page);
await this.cdpSession.send('Performance.enable');
} catch (error) {
// CDP not available in Firefox, continue without it
// Note: This will be captured in test attachments instead of console.log
}
// Track network requests
this.page.on('response', response => {
if (!this.metrics.networkRequests) this.metrics.networkRequests = [];
this.metrics.networkRequests.push({
url: response.url(),
status: response.status(),
timing: null, // response.timing() is not available in Playwright
size: response.headers()['content-length'] || 0
});
});
// Inject performance monitoring script
await this.page.addInitScript(() => {
(window as any).performanceMarks = {};
(window as any).markStart = (name: string) => {
(window as any).performanceMarks[name] = performance.now();
};
(window as any).markEnd = (name: string) => {
if ((window as any).performanceMarks[name]) {
const duration = performance.now() - (window as any).performanceMarks[name];
// Note: Browser console logs are kept for debugging performance in browser
console.log(`Performance: ${name} took ${duration.toFixed(2)}ms`);
return duration;
}
};
});
}
async ensurePerformanceScript() {
// Ensure the performance script is available in the current page context
await this.page.evaluate(() => {
if (!(window as any).performanceMarks) {
(window as any).performanceMarks = {};
}
if (!(window as any).markStart) {
(window as any).markStart = (name: string) => {
(window as any).performanceMarks[name] = performance.now();
};
}
if (!(window as any).markEnd) {
(window as any).markEnd = (name: string) => {
if ((window as any).performanceMarks[name]) {
const duration = performance.now() - (window as any).performanceMarks[name];
console.log(`Performance: ${name} took ${duration.toFixed(2)}ms`);
return duration;
}
};
}
});
}
async collectNavigationMetrics(label = 'navigation') {
const startTime = performance.now();
const metrics = await this.page.evaluate(() => {
const timing = (performance as any).timing;
const navigation = performance.getEntriesByType('navigation')[0] as any;
// Firefox-compatible performance metrics
const paintEntries = performance.getEntriesByType('paint');
const firstPaint = paintEntries.find((entry: any) => entry.name === 'first-paint')?.startTime || 0;
const firstContentfulPaint = paintEntries.find((entry: any) => entry.name === 'first-contentful-paint')?.startTime || 0;
// Resource timing (works in both browsers)
const resourceEntries = performance.getEntriesByType('resource');
const resourceTiming = resourceEntries.map((entry: any) => ({
name: entry.name,
duration: entry.duration,
transferSize: entry.transferSize || 0,
decodedBodySize: entry.decodedBodySize || 0
}));
return {
// Core timing metrics
domContentLoaded: timing.domContentLoadedEventEnd - timing.navigationStart,
loadComplete: timing.loadEventEnd - timing.navigationStart,
firstPaint: firstPaint,
firstContentfulPaint: firstContentfulPaint,
// Navigation API metrics (if available)
dnsLookup: navigation ? navigation.domainLookupEnd - navigation.domainLookupStart : 0,
tcpConnect: navigation ? navigation.connectEnd - navigation.connectStart : 0,
serverResponse: navigation ? navigation.responseEnd - navigation.requestStart : 0,
// Resource counts and timing
resourceCount: resourceEntries.length,
resourceTiming: resourceTiming,
// Memory usage (Chrome only, null in Firefox)
memoryUsage: (performance as any).memory ? {
used: (performance as any).memory.usedJSHeapSize,
total: (performance as any).memory.totalJSHeapSize,
limit: (performance as any).memory.jsHeapSizeLimit
} : null,
// Firefox-specific: Performance marks and measures
performanceMarks: performance.getEntriesByType('mark').map((mark: any) => ({
name: mark.name,
startTime: mark.startTime
})),
// Browser detection
browser: navigator.userAgent.includes('Firefox') ? 'firefox' : 'chrome'
};
});
const collectTime = performance.now() - startTime;
this.navigationMetrics.push({
label,
timestamp: new Date().toISOString(),
metrics,
collectionTime: collectTime
});
return metrics;
}
async collectWebVitals() {
return await this.page.evaluate(() => {
return new Promise((resolve) => {
const vitals: any = {};
let pendingVitals = 3; // LCP, FID, CLS
const checkComplete = () => {
pendingVitals--;
if (pendingVitals <= 0) {
setTimeout(() => resolve(vitals), 100);
}
};
// Largest Contentful Paint
new PerformanceObserver((list) => {
const entries = list.getEntries();
if (entries.length > 0) {
vitals.lcp = entries[entries.length - 1].startTime;
}
checkComplete();
}).observe({ entryTypes: ['largest-contentful-paint'] });
// First Input Delay
new PerformanceObserver((list) => {
const entries = list.getEntries();
if (entries.length > 0) {
vitals.fid = (entries[0] as any).processingStart - entries[0].startTime;
}
checkComplete();
}).observe({ entryTypes: ['first-input'] });
// Cumulative Layout Shift
let clsValue = 0;
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!(entry as any).hadRecentInput) {
clsValue += (entry as any).value;
}
}
vitals.cls = clsValue;
checkComplete();
}).observe({ entryTypes: ['layout-shift'] });
// Fallback timeout
setTimeout(() => resolve(vitals), 3000);
});
});
}
async measureUserAction(actionName: string, actionFn: () => Promise<void>) {
const startTime = performance.now();
// Ensure performance script is available
await this.ensurePerformanceScript();
// Mark start in browser
await this.page.evaluate((name: string) => {
(window as any).markStart(name);
}, actionName);
// Execute the action
await actionFn();
// Mark end and collect metrics
const browserDuration = await this.page.evaluate((name: string) => {
return (window as any).markEnd(name);
}, actionName);
const totalDuration = performance.now() - startTime;
if (!this.metrics.userActions) this.metrics.userActions = [];
this.metrics.userActions.push({
action: actionName,
browserDuration: browserDuration,
totalDuration: totalDuration,
timestamp: new Date().toISOString()
});
return { browserDuration, totalDuration };
}
async getDetailedMetrics() {
if (this.cdpSession) {
const cdpMetrics = await this.cdpSession.send('Performance.getMetrics');
this.metrics.cdpMetrics = cdpMetrics.metrics;
}
return this.metrics;
}
generateReport() {
const report = {
testSummary: {
totalNavigations: this.navigationMetrics.length,
totalUserActions: this.metrics.userActions?.length || 0,
totalNetworkRequests: this.metrics.networkRequests?.length || 0
},
navigationMetrics: this.navigationMetrics,
userActionMetrics: this.metrics.userActions || [],
networkSummary: this.metrics.networkRequests ? {
totalRequests: this.metrics.networkRequests.length,
averageResponseTime: 0, // timing not available in Playwright
errorCount: this.metrics.networkRequests.filter((req: any) => req.status >= 400).length
} : null
};
return report;
}
}
// Convenience function to create and initialize a performance collector
export async function createPerformanceCollector(page: Page): Promise<PerformanceCollector> {
const collector = new PerformanceCollector(page);
await collector.initialize();
return collector;
}
// Helper function to attach performance data to test reports
export async function attachPerformanceData(
testInfo: TestInfo,
collector: PerformanceCollector,
additionalData?: Record<string, any>
) {
// Collect Web Vitals
const webVitals = await collector.collectWebVitals() as any;
// Attach Web Vitals to test report
await testInfo.attach('web-vitals', {
contentType: 'application/json',
body: JSON.stringify(webVitals, null, 2)
});
// Generate final performance report
const performanceReport = collector.generateReport();
// Attach performance report to test report
await testInfo.attach('performance-report', {
contentType: 'application/json',
body: JSON.stringify(performanceReport, null, 2)
});
// Attach summary metrics to test report
const avgNavigationTime = collector.navigationMetrics.reduce((sum, nav) =>
sum + nav.metrics.loadComplete, 0) / collector.navigationMetrics.length;
const summary = {
averageNavigationTime: avgNavigationTime.toFixed(2),
totalTestDuration: collector.metrics.userActions?.reduce((sum: number, action: any) => sum + action.totalDuration, 0).toFixed(2),
slowestAction: collector.metrics.userActions?.reduce((slowest: any, action: any) =>
action.totalDuration > (slowest?.totalDuration || 0) ? action : slowest, null)?.action || 'N/A',
networkRequests: performanceReport.testSummary.totalNetworkRequests,
...additionalData
};
await testInfo.attach('performance-summary', {
contentType: 'application/json',
body: JSON.stringify(summary, null, 2)
});
return { webVitals, performanceReport, summary };
}
// Helper function to run performance assertions
export function assertPerformanceMetrics(
webVitals: any,
initialMetrics: any,
avgNavigationTime: number
) {
// Performance assertions (adjust thresholds as needed)
expect(avgNavigationTime).toBeLessThan(5000); // Average navigation under 5s
expect(initialMetrics.loadComplete).toBeLessThan(8000); // Initial load under 8s
if (webVitals.lcp) {
expect(webVitals.lcp).toBeLessThan(2500); // LCP under 2.5s (good threshold)
}
if (webVitals.fid !== undefined) {
expect(webVitals.fid).toBeLessThan(100); // FID under 100ms (good threshold)
}
if (webVitals.cls !== undefined) {
expect(webVitals.cls).toBeLessThan(0.1); // CLS under 0.1 (good threshold)
}
}
// Simple performance wrapper for quick tests
export async function withPerformanceTracking<T>(
page: Page,
testInfo: TestInfo,
testName: string,
testFn: (collector: PerformanceCollector) => Promise<T>
): Promise<T> {
const collector = await createPerformanceCollector(page);
const result = await testFn(collector);
await attachPerformanceData(testInfo, collector, { testName });
return result;
}