From 6df16569e0e1f5b4f517c7fe3e7734ea71ddcdcf Mon Sep 17 00:00:00 2001 From: Heitor Tashiro Sergent Date: Wed, 23 Apr 2025 16:04:51 -0500 Subject: [PATCH 1/6] Add page for browser recording --- .../k6-studio/record-browser-events.md | 89 +++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 docs/sources/k6-studio/record-browser-events.md diff --git a/docs/sources/k6-studio/record-browser-events.md b/docs/sources/k6-studio/record-browser-events.md new file mode 100644 index 0000000000..ed24cab273 --- /dev/null +++ b/docs/sources/k6-studio/record-browser-events.md @@ -0,0 +1,89 @@ +--- +title: 'Record browser events' +description: 'Learn how to use k6 Studio to record browser events, create text assertions, and export browser test scripts.' +weight: 350 +--- + +# Record browser events + +{{< docs/public-preview product="Browser recording" >}} + +When creating k6 test scripts, there are two main types of tests: + +- **Protocol-level tests**: test your application and services by making requests to different protocols such as HTTP, WebSockets, etc. +- **Browser tests**: test your browser-based application by interacting with browser-level APIs. Interact with elements on the page, such as clicking buttons, navigating links, or validating text elements. + +Grafana k6 Studio automatically records both protocol requests and browser events when you start a recording. On this page, you'll learn how to inspect browser events, create assertions, and export a browser script. + +## Start a browser recording + +Browser events are recorded automatically during a recording. To start a recording: + +- Open Grafana k6 Studio. +- Click **Record flow**. +- Type a URL and make sure that the **Capture browser events** checkbox is selected. +- Click **Start recording** + +A browser window opens, and Grafana k6 Studio starts recording the requests and events. In the browser, you can see a set of controls in the top center. The controls are: + +- Inspect elements +- Add assertions +- Toggle event list + +## View browser events + +There are two ways to view browser events: + +- During a recording, click **Toggle event list** at the top of the page. A tab appears on the right side of the browser with a list of all events that Grafana k6 Studio has recorded in the session. +- During or after a recording, go to Grafana k6 Studio and click the **Browser events** tab at the top. This list is automatically updated with any browser events if the recording is still active. After you finish a recording, you can view all the browser events recorded for that session. + +## Create text assertions + +Assertions are a way to validate that the content displayed on the page is what you expect it to be. Grafana k6 Studio supports creating text assertions for content on a page. + +To create a text assertion: + +- Start a recording. +- Click the **Add text assertions** button in the controls at the top of the browser. +- Highlight any text on the page. +- In the **Add text assertion** dialog box: + - The **Element** and **Contains** fields are automatically filled with the text you selected. You can edit this manually or click outside the dialog box to - dismiss it. +- Click **Add** to create the text assertion. + +After you create the assertion, an event is added to the browser events list. + +## Export a browser event test script + +Browser events generate a separate test script from the default protocol-level test created by Grafana k6 Studio, as they test different aspects of an application. + +To export a browser event test script: + +- Open a test recording. +- Click the **Browser events** tab at the top. +- Click **Export script** on the top right. +- In the **Export script** dialog box: + - Type in a name for your script. + - Click **Export**. + +After you save your script, you can view it under the **Scripts** section. + +## Disable browser events + +To disable browser events from being recorded: + +- Open Grafana k6 Studio. +- Click **Record flow**. +- On the **Record your user flow** page, clear the **Capture browser events** checkbox. + +When you disable browser events, the browser events control at the top of the page isn't displayed. + +## Supported browser events + +- Navigating via the address bar. +- Reloading a page. +- Clicking an element. +- Typing into a text input. +- Selecting or clearing a checkbox. +- Selecting an option in a radio group. +- Selecting one or more items in a drop-down or list. +- Submitting a form. From eb095de5538c6e6fbed0558bf68a84e7fd3ee398 Mon Sep 17 00:00:00 2001 From: Heitor Tashiro Sergent Date: Wed, 23 Apr 2025 16:04:57 -0500 Subject: [PATCH 2/6] Reorder pages --- docs/sources/k6-studio/run-test-in-grafana-cloud.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/sources/k6-studio/run-test-in-grafana-cloud.md b/docs/sources/k6-studio/run-test-in-grafana-cloud.md index e00694c416..a0a802c449 100644 --- a/docs/sources/k6-studio/run-test-in-grafana-cloud.md +++ b/docs/sources/k6-studio/run-test-in-grafana-cloud.md @@ -1,7 +1,7 @@ --- title: 'Run a test in Grafana Cloud k6' description: 'Learn how to log in to your Grafana Cloud k6 account and run a test script directly from k6 Studio.' -weight: 450 +weight: 375 --- # Run a test script in Grafana Cloud k6 From fe4b415fbed978df5bd812760a63ed6679109525 Mon Sep 17 00:00:00 2001 From: Heitor Tashiro Sergent Date: Wed, 23 Apr 2025 16:16:36 -0500 Subject: [PATCH 3/6] Add mention of k6 OSS browser docs --- docs/sources/k6-studio/record-browser-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/sources/k6-studio/record-browser-events.md b/docs/sources/k6-studio/record-browser-events.md index ed24cab273..2fbef7cfec 100644 --- a/docs/sources/k6-studio/record-browser-events.md +++ b/docs/sources/k6-studio/record-browser-events.md @@ -65,7 +65,7 @@ To export a browser event test script: - Type in a name for your script. - Click **Export**. -After you save your script, you can view it under the **Scripts** section. +After you save your script, you can view it under the **Scripts** section. Refer to [Using k6 browser](https://grafana.com/docs/k6/latest/using-k6-browser/) for more details on how to customize your browser test script. ## Disable browser events From a030278bf32cf4cdd21bf141b6156a2c21f3fa15 Mon Sep 17 00:00:00 2001 From: Heitor Tashiro Sergent Date: Wed, 23 Apr 2025 16:19:02 -0500 Subject: [PATCH 4/6] Update studio homepage to mention browser recording --- docs/sources/k6-studio/_index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/sources/k6-studio/_index.md b/docs/sources/k6-studio/_index.md index ac39c7d52a..a421151db3 100644 --- a/docs/sources/k6-studio/_index.md +++ b/docs/sources/k6-studio/_index.md @@ -51,10 +51,11 @@ cascade: ## Overview -k6 Studio is a desktop application that can help you: +k6 Studio is a desktop application that lets you: - Record a user flow from browser interactions and generate a HAR file. - Generate and customize a k6 test script from a HAR file, including the ability to use rules to quickly iterate on the script creation process. +- Generate a k6 browser test script, including browser interactions such as navigating to pages, interacting with elements on the page, text assertions, and more. - Test and debug k6 scripts using a visual interface. Inspect the request and response details for any request in your script. The scripts you create in k6 Studio can be used to run performance tests in [Grafana Cloud k6](https://grafana.com/docs/grafana-cloud/testing/k6/), or as k6 scripted checks in [Synthetic Monitoring](https://grafana.com/docs/grafana-cloud/testing/synthetic-monitoring/). From fe8fbf2952f1e9973bee035cf2ac04f7e329c8f7 Mon Sep 17 00:00:00 2001 From: Heitor Tashiro Sergent Date: Wed, 23 Apr 2025 16:26:17 -0500 Subject: [PATCH 5/6] Update Recorder to mention browser events --- docs/sources/k6-studio/components/recorder.md | 4 +++- docs/sources/k6-studio/introduction.md | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/sources/k6-studio/components/recorder.md b/docs/sources/k6-studio/components/recorder.md index 508bae5065..1c4649a780 100644 --- a/docs/sources/k6-studio/components/recorder.md +++ b/docs/sources/k6-studio/components/recorder.md @@ -8,7 +8,9 @@ weight: 100 # Recorder -The Recorder is the first component of k6 Studio. With it, you can start a recording which opens a browser window, and then navigate through a website or application to record a user flow you want to test. k6 Studio collects every request and response, and once you stop the recording, it generates a HAR file. You can then inspect every request and response to see if your test recording accurately reflects a user flow, and can be used as the source for your test script. +The Recorder is the first component of k6 Studio. With it, you can start a recording which opens a browser window, and then navigate through a website or application to record a user flow you want to test. + +k6 Studio collects every request and response, as well as browser interactions. After you stop the recording, it generates a HAR file and a list of 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-test-recorder-panels-2.png" alt="k6 Studio Recorder window, showing a completed test recording with eight requests, and numbers next to each section of the application" >}} diff --git a/docs/sources/k6-studio/introduction.md b/docs/sources/k6-studio/introduction.md index 60739c5073..e998d8c7c5 100644 --- a/docs/sources/k6-studio/introduction.md +++ b/docs/sources/k6-studio/introduction.md @@ -16,7 +16,7 @@ For users that have less experience with JavaScript or k6, k6 Studio can help yo The k6 Studio desktop application consists of three components: -- **Recorder**: The Recorder can help you generate a HAR file. When you start a recording, the application uses a proxy recorder and launches an instance of Google Chrome, and records the traffic from your actions on the browser. +- **Recorder**: The Recorder can help you generate a HAR file. When you start a recording, the application uses a proxy recorder and launches an instance of Google Chrome, and records the traffic from your actions on the browser. The recording includes protocol-level requests, such as HTTP requests, and browser events, such as interacting with elements on a page. - **Generator**: The Generator takes the output of a test recording and gives you options to customize the test with a visual interface and generate a test script from it. You can use it to define a list of hosts to allow or remove from your script, include variables or data files in your script, and configure rules to extract values, parameterize requests, and more. - **Validator**: The Validator can help you validate that a test script is working as expected. You can use it to run one iteration of your test, and visualize the request and response of any requests on your test script. The Validator works with any k6 test script, not only scripts generated via the Generator. From 6bcd8da2ef04c28506ce55a6b397422405c67ca6 Mon Sep 17 00:00:00 2001 From: Llandy Riveron Del Risco Date: Thu, 24 Apr 2025 12:49:10 +0200 Subject: [PATCH 6/6] Update docs/sources/k6-studio/components/recorder.md Co-authored-by: Johan Suleiko Allansson --- docs/sources/k6-studio/components/recorder.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/sources/k6-studio/components/recorder.md b/docs/sources/k6-studio/components/recorder.md index 1c4649a780..adb5195b85 100644 --- a/docs/sources/k6-studio/components/recorder.md +++ b/docs/sources/k6-studio/components/recorder.md @@ -10,7 +10,7 @@ weight: 100 The Recorder is the first component of k6 Studio. With it, you can start a recording which opens a browser window, and then navigate through a website or application to record a user flow you want to test. -k6 Studio collects every request and response, as well as browser interactions. After you stop the recording, it generates a HAR file and a list of 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. +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-test-recorder-panels-2.png" alt="k6 Studio Recorder window, showing a completed test recording with eight requests, and numbers next to each section of the application" >}}