From 42756f0f5bf1d8e7c093165813bcc87e209e6f6f Mon Sep 17 00:00:00 2001 From: Edgar Fisher Date: Thu, 6 Aug 2026 14:55:41 +0300 Subject: [PATCH] docs(k6-studio): use image maps for component screenshots --- .../k6-studio/components/browser-editor.md | 43 +++++- docs/sources/k6-studio/components/debugger.md | 127 ++++++++++++++---- .../sources/k6-studio/components/generator.md | 61 ++++++--- docs/sources/k6-studio/components/recorder.md | 61 ++++++--- 4 files changed, 227 insertions(+), 65 deletions(-) diff --git a/docs/sources/k6-studio/components/browser-editor.md b/docs/sources/k6-studio/components/browser-editor.md index 2fd1534ecc..9c14a36c44 100644 --- a/docs/sources/k6-studio/components/browser-editor.md +++ b/docs/sources/k6-studio/components/browser-editor.md @@ -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 diff --git a/docs/sources/k6-studio/components/debugger.md b/docs/sources/k6-studio/components/debugger.md index 4f6cbe8e43..4740659651 100644 --- a/docs/sources/k6-studio/components/debugger.md +++ b/docs/sources/k6-studio/components/debugger.md @@ -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 @@ -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 @@ -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 diff --git a/docs/sources/k6-studio/components/generator.md b/docs/sources/k6-studio/components/generator.md index 388524cdcd..943aa1086b 100644 --- a/docs/sources/k6-studio/components/generator.md +++ b/docs/sources/k6-studio/components/generator.md @@ -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 @@ -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 diff --git a/docs/sources/k6-studio/components/recorder.md b/docs/sources/k6-studio/components/recorder.md index 0e674667a8..ac2bd361fc 100644 --- a/docs/sources/k6-studio/components/recorder.md +++ b/docs/sources/k6-studio/components/recorder.md @@ -5,6 +5,50 @@ aliases: title: 'Recorder' description: 'Understand how the k6 Studio Recorder works' weight: 100 +image_maps: + - key: k6-studio-recorder + src: https://grafana.com/media/docs/k6-studio/screenshot-k6-studio-2.0-test-recorder-panels.png + alt: k6 Studio Recorder window, showing a completed test recording with a list of requests grouped by page, and a request and response inspector on the right side + points: + - x_coord: 39 + y_coord: 08 + content: | + **Test recording name** + + The name of the test recording and HAR file. This is automatically generated, but you can rename it to help keep your recordings organized. + - x_coord: 76 + y_coord: 08 + content: | + **Recorder actions** + + On the top-right you can see the action buttons for the Recorder. Depending on whether you're starting a recording or inspecting a recording, you might see: + - **New recording**: Starts a new recording. + - **Stop recording**: Stops the existing recording. + - **Discard**: Deletes the existing recording and returns you to the empty Recorder, where you can start a new one. + - **Create test**: Opens a menu with two options: + - **HTTP test**: Creates a test generator from the selected test recording. + - **Browser test**: Creates a browser test script from the recorded browser events. + - x_coord: 16 + y_coord: 15 + content: | + **Recorder options** + + Below the test recording name, you can see: + - **Requests**: The total number of requests in the recording + - **Show static assets**: A toggle that controls whether you can see all static assets requests in the Requests list. The static assets requests are hidden by default. + - **Search**: A search box that lets you search across all request data, such as headers, cookies, payload, and response data. You can also use the toggle to search only by URL, method, or status code. + - x_coord: 13 + y_coord: 10 + content: | + **Requests tab** + + Shows the list of requests, and groups if any, in the HAR file. 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. Click on a request to open the request and response inspector on the right side, where you can view the headers, payload, cookies, and content of the request. + - x_coord: 22 + y_coord: 10 + content: | + **Browser events tab** + + Shows the list of browser events recorded during the session, such as clicks, navigation, form inputs, and assertions. Each event shows a short description of the interaction and the element it targeted. Hover over an event to highlight the corresponding element in the browser window, or click a URL in a navigation event to jump the browser to that page. --- # Recorder @@ -13,24 +57,9 @@ The Recorder is the first component of k6 Studio. With it, you can start a recor k6 Studio collects every request and response, as well as browser interactions. After you stop the recording, it generates a HAR file including the browser events. You can then inspect every request and response to see if your test recording accurately reflects a user flow, and then use it as the source for your test script. -{{< figure src="/media/docs/k6-studio/screenshot-k6-studio-2.0-test-recorder-panels.png" alt="k6 Studio Recorder window, showing a completed test recording with a list of requests grouped by page, a request and response inspector on the right side, and numbers next to each section of the application" >}} - The Recorder window is composed of: -1. **Test recording name**: The name of the test recording and HAR file. This is automatically generated, but you can rename it to help keep your recordings organized. -2. **Recorder actions**: On the top-right you can see the action buttons for the Recorder. Depending on whether you're starting a recording or inspecting a recording, you might see: - - **New recording**: Starts a new recording. - - **Stop recording**: Stops the existing recording. - - **Discard**: Deletes the existing recording and returns you to the empty Recorder, where you can start a new one. - - **Create test**: Opens a menu with two options: - - **HTTP test**: Creates a test generator from the selected test recording. - - **Browser test**: Creates a browser test script from the recorded browser events. -3. **Recorder options**: Below the test recording name, you can see: - - **Requests**: The total number of requests in the recording - - **Show static assets**: A toggle that controls whether you can see all static assets requests in the Requests list. The static assets requests are hidden by default. - - **Search**: A search box that lets you search across all request data, such as headers, cookies, payload, and response data. You can also use the toggle to search only by URL, method, or status code. -4. **Requests tab**: Shows the list of requests, and groups if any, in the HAR file. 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. Click on a request to open the request and response inspector on the right side, where you can view the headers, payload, cookies, and content of the request. -5. **Browser events tab**: Shows the list of browser events recorded during the session, such as clicks, navigation, form inputs, and assertions. Each event shows a short description of the interaction and the element it targeted. Hover over an event to highlight the corresponding element in the browser window, or click a URL in a navigation event to jump the browser to that page. +{{< image-map key="k6-studio-recorder" >}} {{< admonition type="note" >}}