Skip to content

Commit 421653b

Browse files
Valiantsin2021Valiantsin2021
committed
feat: update Readme.md
1 parent fc6e96a commit 421653b

File tree

2 files changed

+100
-4
lines changed

2 files changed

+100
-4
lines changed

‎Readme.md‎

Lines changed: 99 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,19 @@
1-
# Playwright Performance Metrics
1+
<h1 align="center">playwright-performance-metrics</h1>
2+
</p>
3+
<p align="center">
4+
<a href="https://github.com/Valiantsin2021/playwright-performance-metrics/tags/"><img src="https://img.shields.io/github/tag/Valiantsin2021/playwright-performance-metrics" alt="playwwright-performance versions" /></a>
5+
<a href="https://www.npmjs.com/package/playwright-performance-metrics"><img alt="playwright-performance-metrics available on NPM" src="https://img.shields.io/npm/dy/playwright-performance-metrics"></a>
6+
<a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs are welcome" /></a>
7+
<a href="https://github.com/Valiantsin2021/playwright-performance-metrics/issues/"><img src="https://img.shields.io/github/issues/Valiantsin2021/playwright-performance-metrics" alt="playwright-performance-metrics issues" /></a>
8+
<img src="https://img.shields.io/github/stars/Valiantsin2021/playwright-performance-metrics" alt="playwright-performance-metrics stars" />
9+
<img src="https://img.shields.io/github/forks/Valiantsin2021/playwright-performance-metrics" alt="playwright-performance-metrics forks" />
10+
<img src="https://img.shields.io/github/license/Valiantsin2021/playwright-performance-metrics" alt="playwright-performance-metrics license" />
11+
<a href="https://GitHub.com/Valiantsin2021/playwright-performance-metrics/graphs/commit-activity"><img src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" alt="playwright-performance-metrics is maintained" /></a>
12+
<a href="https://github.com/Valiantsin2021/playwright-performance-metrics"><img src="https://img.shields.io/badge/Author-Valentin%20Lutchanka-blue" alt="playwright-performance-metrics author" /></a>
13+
<a href="https://github.com/Valiantsin2021/playwright-performance-metrics/actions/workflows/ci.yml"><img src="https://github.com/Valiantsin2021/playwright-performance-metrics/actions/workflows/ci.yml/badge.svg?branch=main" alt="playwright-performance-metrics ci tests" /></a>
14+
</p>
15+
16+
---
217

318
A comprehensive performance metrics collector for Playwright tests. Collect and analyze web vital metrics, network timing, and resource usage in your Playwright tests.
419

@@ -11,6 +26,89 @@ A comprehensive performance metrics collector for Playwright tests. Collect and
1126
- TypeScript support
1227
- Easy integration with Playwright tests
1328

29+
## Concept
30+
31+
The playwright-performance-metrics plugin introduces a powerful way to measure and assert on web performance metrics directly in your Playwright tests. Unlike traditional end-to-end testing that focuses on functionality, this plugin enables teams to catch performance regressions early and maintain high performance standards through automated testing.
32+
33+
This plugin does not have external dependencies.
34+
35+
**Comparison with playwright-lighthouse**
36+
37+
Both plugins focus on performance testing, but they serve different purposes:
38+
39+
**playwright-performance-metrics**
40+
41+
- **Real-time metrics** during test execution
42+
- **Lower overhead** - no need for separate Lighthouse runs
43+
- **Less configuration** - minimal setup required for basic usage
44+
- **Specific metric focus** - [Core Web Vitals](https://www.hostinger.com/tutorials/core--web-vitals) and key timings
45+
- **Test integration** - natural fit in existing test flows
46+
- **Retry capability** - built-in retriability mechanisms to ensure the metrics are collected
47+
- **Resource timing** - detailed resource-level metrics
48+
- **Total bytes** - size of all resources
49+
- **Time to first byte** - detailed time to first byte metrics
50+
51+
**playwright-lighthouse**
52+
53+
- **Comprehensive audits** including SEO, accessibility
54+
- **Scoring system** aligned with Lighthouse
55+
- **Static analysis** of best practices
56+
- **Recommendations** for improvements
57+
- **Performance simulation** under various conditions
58+
- **Broader metrics** beyond just performance
59+
60+
**Key Features**
61+
62+
- Real-time performance metrics collection during test execution
63+
- Built-in retry mechanisms for reliable measurements
64+
- Support for Core Web Vitals and other key performance indicators
65+
- Seamless integration with existing Playwright tests
66+
- Type definitions for TypeScript support
67+
- Configurable thresholds and timing options
68+
69+
The collectMetrics returns the object containing the collected performance metrics:
70+
71+
```
72+
PerformanceMetrics {
73+
pageloadTiming: number
74+
domCompleteTiming: number | null
75+
resourceTiming: (resource: string) => PerformanceResourceTiming | undefined
76+
largestContentfulPaint: number
77+
totalBlockingTime: number
78+
paint: { firstContentfulPaint: number; firstPaint: number }
79+
cumulativeLayoutShift: number
80+
totalBytes: number
81+
timeToFirstByte: {
82+
total: number
83+
redirect: number
84+
dns: number
85+
connection: number
86+
tls: number
87+
wait: number
88+
}
89+
}
90+
```
91+
92+
**Available Metrics**
93+
94+
| **Metric** | **Description** | **Typical Threshold** |
95+
| --- | --- | --- |
96+
| largestContentfulPaint | Time until largest content element is visible | < 2500ms |
97+
| totalBlockingTime | Sum of blocking time for long tasks | < 300ms |
98+
| cumulativeLayoutShift | Measure of visual stability | < 0.1 |
99+
| paint.firstContentfulPaint | Time until first meaningful content appears | < 1800ms |
100+
| paint.firstPaint | Time until first pixel is painted | < 1000ms |
101+
| pageloadTiming | Total page load time | < 3000ms |
102+
| domCompleteTiming | Time until DOM is fully loaded | < 2500ms |
103+
| resourceTiming | Time until resource is fully loaded | < 500ms |
104+
| totalBytes | Size of all resources | < 1.5 MB |
105+
| timeToFirstByte.total | Time to first byte | < 500ms |
106+
| timeToFirstByte.dns | DNS time | < 20ms |
107+
| timeToFirstByte.wait | Wait time | < 50ms |
108+
| timeToFirstByte.redirect | Redirect time | < 50ms |
109+
| timeToFirstByte.tls | TLS time | < 50ms |
110+
| timeToFirstByte.connection | Connection time | < 50ms |
111+
14112
## Installation
15113

16114
```bash
@@ -80,8 +178,6 @@ constructor(page: Page)
80178
Collects performance metrics from the page.
81179

82180
Options:
83-
- `startMark`: Performance mark to use as start time
84-
- `endMark`: Performance mark to use as end time
85181
- `timeout`: Collection timeout in milliseconds
86182
- `initialDelay`: Initial delay before starting collection
87183
- `retryTimeout`: Maximum time to retry collecting metrics

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "playwright-performance-metrics",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"description": "A performance metrics collection library for Playwright",
55
"main": "dist/index.js",
66
"types": "dist/index.d.ts",

0 commit comments

Comments
 (0)