Skip to content

Commit c4de131

Browse files
ppcanoheitortsergent
ppcano
and
heitortsergent
authored
k6 browser: Display Metrics and new Options page (#1667)
* v0.52.x: New `Browser options` page * Display the browser metric table on the `Browser metrics` docs * Update `Browser options` * Port changes to `next` * Update the latest `K6_BROWSER_TIMEOUT` description * Apply suggestions from code review * Apply to v0.52.x * Update code sample for browser options --------- Co-authored-by: Heitor Tashiro Sergent <[email protected]>
1 parent a6b91e0 commit c4de131

File tree

22 files changed

+396
-274
lines changed

22 files changed

+396
-274
lines changed

‎docs/sources/next/javascript-api/k6-browser/_index.md‎

Lines changed: 12 additions & 99 deletions
Large diffs are not rendered by default.

‎docs/sources/next/shared/browser/env-var-options.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: browser/options
3+
---
4+
5+
| Environment Variable | Description |
6+
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
7+
| K6_BROWSER_ARGS | Extra command line arguments to include when launching browser process. See [this link](https://peter.sh/experiments/chromium-command-line-switches/) for a list of Chromium arguments. Note that arguments should not start with `--` (see the command example below). |
8+
| K6_BROWSER_DEBUG | All CDP messages and internal fine grained logs will be logged if set to `true`. |
9+
| K6_BROWSER_EXECUTABLE_PATH | Override search for browser executable in favor of specified absolute path. |
10+
| K6_BROWSER_HEADLESS | Show browser GUI or not. `true` by default. |
11+
| K6_BROWSER_IGNORE_DEFAULT_ARGS | Ignore any of the [default arguments](https://grafana.com/docs/k6/<K6_VERSION>/using-k6-browser/options/#default-arguments) included when launching a browser process. |
12+
| K6_BROWSER_TIMEOUT | Default timeout for initializing the connection to the browser instance. `'30s'` if not set. |
13+
| K6_BROWSER_TRACES_METADATA | Sets additional _key-value_ metadata that is included as attributes in every span generated from browser module traces. Example: `K6_BROWSER_TRACES_METADATA=attr1=val1,attr2=val2`. This only applies if traces generation is enabled, refer to [Traces output](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/k6-options/reference#traces-output) for more details. |
14+
15+
The following command passes the browser options as environment variables to launch a headful browser with custom arguments.
16+
17+
{{< code >}}
18+
19+
```bash
20+
$ K6_BROWSER_HEADLESS=false K6_BROWSER_ARGS='show-property-changed-rects' k6 run script.js
21+
```
22+
23+
```docker
24+
# WARNING!
25+
# The grafana/k6:master-with-browser image launches a Chrome browser by setting the
26+
# 'no-sandbox' argument. Only use it with trustworthy websites.
27+
#
28+
# As an alternative, you can use a Docker SECCOMP profile instead, and overwrite the
29+
# Chrome arguments to not use 'no-sandbox' such as:
30+
# docker container run --rm -i -e K6_BROWSER_ARGS='' --security-opt seccomp=$(pwd)/chrome.json grafana/k6:master-with-browser run - <script.js
31+
#
32+
# You can find an example of a hardened SECCOMP profile in:
33+
# https://raw.githubusercontent.com/jfrazelle/dotfiles/master/etc/docker/seccomp/chrome.json.
34+
docker run --rm -i -e K6_BROWSER_HEADLESS=false -e K6_BROWSER_ARGS='show-property-changed-rects' grafana/k6:master-with-browser run - <script.js
35+
```
36+
37+
```windows
38+
C:\k6> set "K6_BROWSER_HEADLESS=false" && set "K6_BROWSER_ARGS='show-property-changed-rects' " && k6 run script.js
39+
```
40+
41+
```windows-powershell
42+
PS C:\k6> $env:K6_BROWSER_HEADLESS="false" ; $env:K6_BROWSER_ARGS='show-property-changed-rects' ; k6 run script.js
43+
```
44+
45+
{{< /code >}}

‎docs/sources/next/shared/browser/web-vital-core-metrics.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: browser/webvital-core-metrics
3+
---
4+
5+
<!-- vale off -->
6+
7+
| Metric name | Description |
8+
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
9+
| browser_web_vital_cls | Measures the visual stability on a webpage by quantifying the amount of unexpected layout shift of visible page content. Refer to [Cumulative Layout Shift](https://web.dev/cls/) for more information. |
10+
| browser_web_vital_fid | Measures the responsiveness of a web page by quantifying the delay between a user’s first interaction, such as clicking a button, and the browser’s response. Refer to [First Input Delay](https://web.dev/fid/) for more information. |
11+
| browser_web_vital_lcp | Measures the time it takes for the largest content element on a page to become visible. Refer to [Largest Contentful Paint](https://web.dev/lcp/) for more information. |
12+
13+
<!-- vale on -->

‎docs/sources/next/shared/browser/web-vital-other-metrics.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: browser/webvital-other-metrics
3+
---
4+
5+
<!-- vale off -->
6+
7+
| Metric name | Description |
8+
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
9+
| browser_web_vital_fcp | Measures the time it takes for the browser to render the first DOM element on the page, whether that's a text, image or header. Refer to [First Contentful Paint](https://web.dev/fcp/) for more information. |
10+
| browser_web_vital_inp | An experimental metric that measures a page's responsiveness. Refer to [Interaction to Next Paint](https://web.dev/inp/) for more information. |
11+
| browser_web_vital_ttfb | Measures the time it takes between the browser request and the start of the response from a server. Refer to [Time to First Byte](https://web.dev/ttfb/) for more information. |
12+
13+
<!-- vale on -->

‎docs/sources/next/using-k6-browser/metrics.md‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,11 @@ Follow along to learn about:
1111
- Google's Core Web Vitals and why they are important
1212
- How to analyze the browser metrics output
1313
- How to set thresholds for your browser metrics
14+
- How to use the Performance API to measure web performance.
1415

1516
## Google's Core Web Vitals
1617

1718
The k6 browser module emits metrics based on the [Core Web Vitals](https://web.dev/vitals/#core-web-vitals).
18-
This section provides some conceptual background about the core vitals.
19-
To review the complete list of browser metrics, refer to the section in the [Metrics reference](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/metrics/reference#browser).
2019

2120
Google introduced these metrics to provided unified signals to assess user experience on the web.
2221
The vitals are composed of three important metrics to help user experience when using your web application.
@@ -32,6 +31,18 @@ The Core Web Vitals are one of [Google's Page Experience Signals](https://develo
3231
Existing browser measures, such as `Load` and `DOMContentLoaded` times, no longer accurately reflect user experience very well.
3332
Relying on these load events does not give the correct metric to analyze critical performance bottlenecks that your page might have. Google's Web Vitals is a better measure of your page performance and its user experience.
3433

34+
## Browser metrics
35+
36+
The following Core Web Vital metrics are collected when using the k6 browser module.
37+
38+
{{< docs/shared source="k6" lookup="browser/web-vital-core-metrics.md" version="<K6_VERSION>" >}}
39+
40+
Additionally, k6 also collects other Web Vital metrics.
41+
42+
{{< docs/shared source="k6" lookup="browser/web-vital-other-metrics.md" version="<K6_VERSION>" >}}
43+
44+
To review the complete list of k6 metrics, refer to the [Metrics reference](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/metrics/reference).
45+
3546
## Understanding the browser metrics output
3647

3748
When a browser test finishes, k6 reports a top-level overview of the aggregated browser metrics output.
@@ -129,31 +140,24 @@ export default async function () {
129140
const page = await browser.newPage();
130141
131142
try {
132-
await page.goto("https://test.k6.io/browser.php");
133-
await page.evaluate(() => window.performance.mark("page-visit"));
143+
await page.goto('https://test.k6.io/browser.php');
144+
await page.evaluate(() => window.performance.mark('page-visit'));
134145
135-
await page.locator("#checkbox1").check();
146+
await page.locator('#checkbox1').check();
136147
await page.locator('#counter-button').click();
137-
await page.locator("#text1").fill("This is a test");
148+
await page.locator('#text1').fill('This is a test');
138149
139-
await page.evaluate(() => window.performance.mark("action-completed"));
150+
await page.evaluate(() => window.performance.mark('action-completed'));
140151
141152
// Get time difference between visiting the page and completing the actions
142153
await page.evaluate(() =>
143-
window.performance.measure(
144-
"total-action-time",
145-
"page-visit",
146-
"action-completed"
147-
)
154+
window.performance.measure('total-action-time', 'page-visit', 'action-completed')
148155
);
149156
150157
const totalActionTime = await page.evaluate(
151158
() =>
152-
JSON.parse(
153-
JSON.stringify(
154-
window.performance.getEntriesByName("total-action-time")
155-
)
156-
)[0].duration
159+
JSON.parse(JSON.stringify(window.performance.getEntriesByName('total-action-time')))[0]
160+
.duration
157161
);
158162
159163
myTrend.add(totalActionTime);

‎docs/sources/next/using-k6-browser/migrating-to-k6-v0-52.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ aliases:
33
- ./migrating-to-k6-v0-46/ # docs/k6/<K6_VERSION>/using-k6-browser/migrating-to-k6-v0-46
44
title: 'Migrating browser scripts to k6 v0.52'
55
description: 'A migration guide to ease the process of transitioning to the new k6 browser module version bundled with k6 v0.52'
6-
weight: 04
6+
weight: 05
77
---
88

99
# Migrating browser scripts to k6 v0.52

0 commit comments

Comments
 (0)