k6 Studio, add page for browser recording feature

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/).

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" >}}
 

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.
 

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. 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
+
+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.

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