Skip to content

Use image maps for k6 Studio component screenshots #2295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
heitortsergent merged 1 commit into from
Aug 6, 2026
+227 −65
Merged

Use image maps for k6 Studio component screenshots #2295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 36 additions & 7 deletions docs/sources/k6-studio/components/browser-editor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,50 @@
title: 'Browser test editor'
description: 'Understand how the k6 Studio browser test editor works'
weight: 250
image_maps:
- key: k6-studio-browser-editor
src: https://grafana.com/media/docs/k6-studio/screenshot-k6-studio-2.0-browser-test-editor-panels.png
alt: k6 Studio browser test editor window, showing a browser test with a preview of the page on the left, and the list of actions on the right
points:
- x_coord: 29
y_coord: 08
content: |
**Browser test name**

The name of the browser test. This is automatically generated, but you can rename it to help keep your files organized.
- x_coord: 70
y_coord: 08
content: |
**Browser test actions**

On the top-right you can see the action buttons for the browser test editor. From here you can save your changes, click **Export script** to save the test as a standalone k6 test script, click **Validate** to debug the test, click **Run in Grafana Cloud** to [run your test in Grafana Cloud k6](https://grafana.com/docs/k6-studio/getting-started/run-in-grafana-cloud-k6/), or click the menu icon to delete the test.
- x_coord: 08
y_coord: 12
content: |
**Preview and script panel**

The **Preview** tab shows a replay of the browser during a debug run, and lets you click any element to add an action or assertion for it. The **Script** tab shows a read-only preview of the generated k6 test script.
- x_coord: 52
y_coord: 12
content: |
**Actions list**

The list of actions and assertions that make up your test, in the order they run. From here you can add, reorder, edit, or remove actions, and configure test options.
- x_coord: 08
y_coord: 53
content: |
**Debug panel**

Shows the **Console**, **Network**, and **Elements** tabs, populated with logs, requests, and the page's DOM once you debug the test.
---

# Browser test editor

The browser test editor lets you build and debug a k6 browser test using a visual interface, without writing JavaScript code manually. You can add actions and assertions that interact with elements on a page, debug the test to see how the browser behaves, and export it as a k6 test script.

{{< figure src="/media/docs/k6-studio/screenshot-k6-studio-2.0-browser-test-editor-panels.png" alt="k6 Studio browser test editor window, showing a browser test with a preview of the page on the left, the list of actions on the right, and numbers next to each section of the application" >}}

The browser test editor window is composed of:

1. **Browser test name**: The name of the browser test. This is automatically generated, but you can rename it to help keep your files organized.
2. **Browser test actions**: On the top-right you can see the action buttons for the browser test editor. From here you can save your changes, click **Export script** to save the test as a standalone k6 test script, click **Validate** to debug the test, click **Run in Grafana Cloud** to [run your test in Grafana Cloud k6](https://grafana.com/docs/k6-studio/getting-started/run-in-grafana-cloud-k6/), or click the menu icon to delete the test.
3. **Preview and script panel**: The **Preview** tab shows a replay of the browser during a debug run, and lets you click any element to add an action or assertion for it. The **Script** tab shows a read-only preview of the generated k6 test script.
4. **Actions list**: The list of actions and assertions that make up your test, in the order they run. From here you can add, reorder, edit, or remove actions, and configure test options.
5. **Debug panel**: Shows the **Console**, **Network**, and **Elements** tabs, populated with logs, requests, and the page's DOM once you debug the test.
{{< image-map key="k6-studio-browser-editor" >}}

## Add actions and assertions

Expand Down
127 changes: 101 additions & 26 deletions docs/sources/k6-studio/components/debugger.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,104 @@ aliases:
title: 'Debugger'
description: 'Understand how the k6 Studio Debugger works'
weight: 300
image_maps:
- key: k6-studio-debugger
src: https://grafana.com/media/docs/k6-studio/screenshot-k6-studio-2.0-debugger-panels.png
alt: k6 Studio Debugger window, showing a test script that has been executed, with a list of executed checks at the bottom, and the script preview
points:
- x_coord: 24
y_coord: 08
content: |
**Test script name**

The name of the test script.
- x_coord: 70
y_coord: 08
content: |
**Debugger actions**

On the top-right you can see the action buttons for the Debugger. From here you can:
- Click **Debug script** to run one iteration of your test script.
- Click **Run in Grafana Cloud** to [run your test in Grafana Cloud k6](https://grafana.com/docs/k6-studio/getting-started/run-in-grafana-cloud-k6/).
- Click the menu icon to:
- **Open external script**: Open a k6 test script from your computer. After opening it, click **Debug script** to run one iteration of the test.
- **Move to Trash**: Moves the selected test script to the Trash.
- x_coord: 08
y_coord: 12
content: |
**Main view**

Below the test script name is the main view of the Debugger. From here, you can inspect the opened script and any data generated during a debug session.
- x_coord: 08
y_coord: 70
content: |
**Debug panel**

This panel contains additional information about the test results, such as the logs emitted during its execution, or console messages for browser tests.
- key: k6-studio-debugger-script
src: https://grafana.com/media/docs/k6-studio/screenshot-k6-studio-2.0-debugger-panels-script.png
alt: k6 Studio Debugger window, showing the results of an HTTP test run with the requests list open, and a request and response inspector on the right side
points:
- x_coord: 08
y_coord: 10
content: |
**Tabs**

From here, you can switch between viewing the executed script and the list of requests made during execution.
- x_coord: 08
y_coord: 15
content: |
**Debugger options**

Below the tabs, you can see:
- **Requests**: The total number of requests executed from the test script run.
- **Search**: A search box that lets you search the list of requests by URL, method (such as GET or POST), and status code. You can also use the toggle to search across all request data.
- x_coord: 08
y_coord: 20
content: |
**Requests and groups list**

The list of requests, and groups if any, that were executed in the test run. The requests are organized by time, and you can see the method, status code, host, and path for each one. You can also collapse and expand groups to inspect them more easily.
- x_coord: 61
y_coord: 12
content: |
**Request and response inspector**

When you click on a request from the requests list, a panel opens on the right side which shows the request and response details for that request. You can use it to inspect the headers, payload, cookies, and content of the requests.
- x_coord: 08
y_coord: 70
content: |
**Logs and checks**

Any [logs](https://grafana.com/docs/grafana-cloud/testing/k6/analyze-results/inspect-test-results/inspect-logs/) or [checks](https://grafana.com/docs/k6/latest/using-k6/checks/) generated by test run can be found on their respective tabs.
- key: k6-studio-debugger-browser-script
src: https://grafana.com/media/docs/k6-studio/screenshot-k6-studio-2.0-debugger-panels-browser.png
alt: k6 Studio Debugger window, showing the results of a browser test run with the session replay open, and a list of browser actions on the right side
points:
- x_coord: 08
y_coord: 12
content: |
**Script and Replay**

From here, you can inspect the executed script, or view the session recording.
- x_coord: 52
y_coord: 12
content: |
**Browser actions**

This panel shows the interactions made by the script and their outcomes. If an interaction failed, the reason for the failure is shown.
- x_coord: 08
y_coord: 53
content: |
**Console**

Any logs emitted either by the browser or the [test script](https://grafana.com/docs/grafana-cloud/testing/k6/analyze-results/inspect-test-results/inspect-logs/).
- x_coord: 16
y_coord: 53
content: |
**Network**

A list of requests made _by the browser_. This is similar to the request list in an [HTTP test](#http-test).
---

# Debugger
Expand All @@ -13,17 +111,7 @@ The Debugger can help you debug test scripts. You can use it to run one iteratio

The content of the Debugger window depends on the type of test script. The basic layout is:

{{< figure src="/media/docs/k6-studio/screenshot-k6-studio-2.0-debugger-panels.png" alt="k6 Studio Debugger window, showing a test script that has been executed, with a list of executed checks at the bottom, the script preview, and numbers next to each section of the application" >}}

1. **Test script name**: The name of the test script.
2. **Debugger actions**: On the top-right you can see the action buttons for the Debugger. From here you can:
- Click **Debug script** to run one iteration of your test script.
- Click **Run in Grafana Cloud** to [run your test in Grafana Cloud k6](https://grafana.com/docs/k6-studio/getting-started/run-in-grafana-cloud-k6/).
- Click the menu icon to:
- **Open external script**: Open a k6 test script from your computer. After opening it, click **Debug script** to run one iteration of the test.
- **Move to Trash**: Moves the selected test script to the Trash.
3. **Main view**: Below the test script name is the main view of the Debugger. From here, you can inspect the opened script and any data generated during a debug session.
4. **Debug panel**: This panel contains additional information about the test results, such as the logs emitted during its execution, or console messages for browser tests.
{{< image-map key="k6-studio-debugger" >}}

## Debug a test

Expand All @@ -46,24 +134,11 @@ During a debug session, and once it's completed, you can inspect the test result

### HTTP test

{{< figure src="/media/docs/k6-studio/screenshot-k6-studio-2.0-debugger-panels-script.png" alt="k6 Studio Debugger window, showing the results of an HTTP test run with the requests list open, a request and response inspector on the right side, and numbers next to each section of the application" >}}

1. **Tabs**: From here, you can switch between viewing the executed script and the list of requests made during execution.
2. **Debugger options**: Below the tabs, you can see:
- **Requests**: The total number of requests executed from the test script run.
- **Search**: A search box that lets you search the list of requests by URL, method (such as GET or POST), and status code. You can also use the toggle to search across all request data.
3. **Requests and groups list**: The list of requests, and groups if any, that were executed in the test run. The requests are organized by time, and you can see the method, status code, host, and path for each one. You can also collapse and expand groups to inspect them more easily.
4. **Request and response inspector**: When you click on a request from the requests list, a panel opens on the right side which shows the request and response details for that request. You can use it to inspect the headers, payload, cookies, and content of the requests.
5. **Logs and checks**: Any [logs](https://grafana.com/docs/grafana-cloud/testing/k6/analyze-results/inspect-test-results/inspect-logs/) or [checks](https://grafana.com/docs/k6/latest/using-k6/checks/) generated by test run can be found on their respective tabs.
{{< image-map key="k6-studio-debugger-script" >}}

### Browser test

{{< figure src="/media/docs/k6-studio/screenshot-k6-studio-2.0-debugger-panels-browser.png" alt="k6 Studio Debugger window, showing the results of a browser test run with the session replay open, a list of browser actions on the right side, and numbers next to each section of the application" >}}

1. **Script and Replay**: From here, you can inspect the executed script, or view the session recording.
2. **Browser actions**: This panel shows the interactions made by the script and their outcomes. If an interaction failed, the reason for the failure is shown.
3. **Console**: Any logs emitted either by the browser or the [test script](https://grafana.com/docs/grafana-cloud/testing/k6/analyze-results/inspect-test-results/inspect-logs/).
4. **Network**: A list of requests made _by the browser_. This is similar to the request list in an [HTTP test](#http-test).
{{< image-map key="k6-studio-debugger-browser-script" >}}

## Debug an external script

Expand Down
61 changes: 45 additions & 16 deletions docs/sources/k6-studio/components/generator.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,50 @@ aliases:
title: 'Generator'
description: 'Understand how the k6 Studio Generator works'
weight: 200
image_maps:
- key: k6-studio-generator
src: https://grafana.com/media/docs/k6-studio/screenshot-k6-studio-2.0-test-generator-panels.png
alt: k6 Studio Generator window, showing a test generator with a list of requests grouped by page, and four test rules at the bottom
points:
- x_coord: 28
y_coord: 08
content: |
**Generator name**

The name of the test generator. This is automatically generated, but you can rename it to help keep your files organized.
- x_coord: 56
y_coord: 08
content: |
**Generator actions**

On the top-right you can see the action buttons for the Generator. From here you can:
- Click the save icon to save changes to your test generator file.
- Click **Export script** to save the generated script to your computer.
- Click **Validate** to open the Debugger and run one iteration of the generated script.
- Click **Configure with Assistant** to open the test setup wizard, which guides you through configuring hosts, autocorrelation, parameterization, and thresholds, and then running a test. Refer to [Configure a test with Grafana Assistant](https://grafana.com/docs/k6-studio/get-started/configure-test-with-assistant/) for a step-by-step guide.
- Click **Run in Grafana Cloud** to [run your test in Grafana Cloud k6](https://grafana.com/docs/k6-studio/get-started/run-in-grafana-cloud-k6/).
- Click the menu icon to **Move to Trash** the selected test generator.
- x_coord: 08
y_coord: 12
content: |
**Requests and Script inspector**

The list of requests, and groups if any, from the selected recording. The requests are organized by time, and you can see the method, status code, host, and path for each one. You can also collapse and expand groups to inspect them more easily. Clicking on any request opens the request inspector, where you can view the request and response details.
- x_coord: 72
y_coord: 12
content: |
**Generator options**

Next to the tabs, you can see:
- **Test options**: Configure the load profile, thresholds, think time, and load zones.
- **Test data**: Define variables, and configure data files that can be used in your test rules.
- **Allowed hosts**: Shows a list of hosts for the recording, and lets you select which ones to include or remove from the script.
- x_coord: 08
y_coord: 74
content: |
**Test rules list**

The list of test rules applied to this particular generator. The rules can be reordered, and you can see some details about how they're configured. Next to the list, you can click **Add rule** to open a list of rule types that you can add to the generator, or **Autocorrelate** to detect and create correlation rules automatically.
---

# Generator
Expand All @@ -12,24 +56,9 @@ The Generator takes the output of a test recording and gives you options to cust

You can use it to define a list of hosts to allow or remove from your script, tweak the load profile for your test, include variables in your script, and configure rules to extract values, parameterize requests, and more.

{{< figure src="/media/docs/k6-studio/screenshot-k6-studio-2.0-test-generator-panels.png" alt="k6 Studio Generator window, showing a test generator with a list of requests grouped by page, four test rules at the bottom, and numbers next to each section of the application" >}}

The Generator window is composed of:

1. **Generator name**: The name of the test generator. This is automatically generated, but you can rename it to help keep your files organized.
2. **Generator actions**: On the top-right you can see the action buttons for the Generator. From here you can:
- Click the save icon to save changes to your test generator file.
- Click **Export script** to save the generated script to your computer.
- Click **Validate** to open the Debugger and run one iteration of the generated script.
- Click **Configure with Assistant** to open the test setup wizard, which guides you through configuring hosts, autocorrelation, parameterization, and thresholds, and then running a test. Refer to [Configure a test with Grafana Assistant](https://grafana.com/docs/k6-studio/get-started/configure-test-with-assistant/) for a step-by-step guide.
- Click **Run in Grafana Cloud** to [run your test in Grafana Cloud k6](https://grafana.com/docs/k6-studio/get-started/run-in-grafana-cloud-k6/).
- Click the menu icon to **Move to Trash** the selected test generator.
3. **Requests and Script inspector**: The list of requests, and groups if any, from the selected recording. The requests are organized by time, and you can see the method, status code, host, and path for each one. You can also collapse and expand groups to inspect them more easily. Clicking on any request opens the request inspector, where you can view the request and response details.
4. **Generator options**: Next to the tabs, you can see:
- **Test options**: Configure the load profile, thresholds, think time, and load zones.
- **Test data**: Define variables, and configure data files that can be used in your test rules.
- **Allowed hosts**: Shows a list of hosts for the recording, and lets you select which ones to include or remove from the script.
5. **Test rules list**: The list of test rules applied to this particular generator. The rules can be reordered, and you can see some details about how they're configured. Next to the list, you can click **Add rule** to open a list of rule types that you can add to the generator, or **Autocorrelate** to detect and create correlation rules automatically.
{{< image-map key="k6-studio-generator" >}}

## Test options

Expand Down
Loading
Loading