Merge pull request #1661 from grafana/docs/k6-devtools-recorder

Add documentation for the k6 DevTools Recorder

docs/sources/next/using-k6/test-authoring/create-tests-from-recordings/_index.md

@@ -12,9 +12,10 @@ You can use this recording to auto-generate your test logic.
 Testers commonly use recordings to avoid writing complex tests from scratch.
 For example, testing advanced scenarios on websites or mobile applications, such as end-to-end (E2E) tests with dozens or hundreds of requests.
 
-k6 provides two tools that can directly convert a recording into k6 script:
+k6 provides three tools that can directly convert a recording into k6 script:
 
 - [Browser recorder](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-browser-recorder) generates a k6 script from a browser session.
+- [DevTools recorder](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder) generates a k6 Browser script from user flows recorded in Chrome DevTools.
 - [HAR converter](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-har-converter) generates a k6 script from the requests included in a HAR file.
 
 ## Steps

docs/sources/next/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder.md

@@ -0,0 +1,31 @@
+---
+title: 'Using the k6 DevTools recorder'
+description: 'The k6 DevTools recorder allows you to export k6 browser scripts from the recorder panel in Chrome DevTools.'
+weight: 01
+---
+
+# Using the k6 DevTools recorder
+
+The k6 DevTools recorder lets you record user journeys using Chrome DevTools and then export them as a k6 script.
+
+## Before you begin
+
+To ensure you have a useful test output:
+
+- Review the [Be sure to record realistically](/test-authoring/create-tests-from-recordings/#be-sure-to-record-realistically) and [Consider hybrid approach for load testing websites](/test-authoring/create-tests-from-recordings/#consider-hybrid-approach-for-load-testing-websites) sections on [Create tests from recordings](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/).
+- Learn the basics of k6 browser tests with [Running browser tests](https://grafana.com/docs/k6/<K6_VERSION>/using-k6-browser/running-browser-tests/).
+
+{{< admonition type="note" >}}
+
+Using the DevTools recorder _doesn't require a Grafana Cloud account_.
+
+{{< /admonition >}}
+
+## Create a script from a recording
+
+1. Install the [k6 Browser Recorder Chrome extension](https://chromewebstore.google.com/detail/k6-devtools-recorder/fkajbajcclbdgaoanencnhpfnigfipgc).
+1. Record a session using the [Chrome DevTools Recorder](https://developer.chrome.com/docs/devtools/recorder).
+1. [Export the user flow](https://developer.chrome.com/docs/devtools/recorder/reference#export-flows) and choose the k6 Browser option.
+1. Edit your script as necessary. Depending on the [type of test](https://grafana.com/docs/k6/<K6_VERSION>/testing-guides/test-types/), you might need to change different aspects of the script.
+   Typical changes are for [load options](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/k6-options) and to handle [correlation and dynamic data](https://grafana.com/docs/k6/<K6_VERSION>/examples/correlation-and-dynamic-data).
+1. Run the test from the CLI or Grafana Cloud k6. Refer to [Running k6](https://grafana.com/docs/k6/<K6_VERSION>/get-started/running-k6) for more details.

docs/sources/v0.52.x/using-k6/test-authoring/create-tests-from-recordings/_index.md

@@ -12,9 +12,10 @@ You can use this recording to auto-generate your test logic.
 Testers commonly use recordings to avoid writing complex tests from scratch.
 For example, testing advanced scenarios on websites or mobile applications, such as end-to-end (E2E) tests with dozens or hundreds of requests.
 
-k6 provides two tools that can directly convert a recording into k6 script:
+k6 provides three tools that can directly convert a recording into k6 script:
 
 - [Browser recorder](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-browser-recorder) generates a k6 script from a browser session.
+- [DevTools recorder](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder) generates a k6 Browser script from user flows recorded in Chrome DevTools.
 - [HAR converter](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/using-the-har-converter) generates a k6 script from the requests included in a HAR file.
 
 ## Steps

docs/sources/v0.52.x/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder.md

@@ -0,0 +1,31 @@
+---
+title: 'Using the k6 DevTools recorder'
+description: 'The k6 DevTools recorder allows you to export k6 browser scripts from the recorder panel in Chrome DevTools.'
+weight: 01
+---
+
+# Using the k6 DevTools recorder
+
+The k6 DevTools recorder lets you record user journeys using Chrome DevTools and then export them as a k6 script.
+
+## Before you begin
+
+To ensure you have a useful test output:
+
+- Review the [Be sure to record realistically](/test-authoring/create-tests-from-recordings/#be-sure-to-record-realistically) and [Consider hybrid approach for load testing websites](/test-authoring/create-tests-from-recordings/#consider-hybrid-approach-for-load-testing-websites) sections on [Create tests from recordings](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/test-authoring/create-tests-from-recordings/).
+- Learn the basics of k6 browser tests with [Running browser tests](https://grafana.com/docs/k6/<K6_VERSION>/using-k6-browser/running-browser-tests/).
+
+{{< admonition type="note" >}}
+
+Using the DevTools recorder _doesn't require a Grafana Cloud account_.
+
+{{< /admonition >}}
+
+## Create a script from a recording
+
+1. Install the [k6 Browser Recorder Chrome extension](https://chromewebstore.google.com/detail/k6-devtools-recorder/fkajbajcclbdgaoanencnhpfnigfipgc).
+1. Record a session using the [Chrome DevTools Recorder](https://developer.chrome.com/docs/devtools/recorder).
+1. [Export the user flow](https://developer.chrome.com/docs/devtools/recorder/reference#export-flows) and choose the k6 Browser option.
+1. Edit your script as necessary. Depending on the [type of test](https://grafana.com/docs/k6/<K6_VERSION>/testing-guides/test-types/), you might need to change different aspects of the script.
+   Typical changes are for [load options](https://grafana.com/docs/k6/<K6_VERSION>/using-k6/k6-options) and to handle [correlation and dynamic data](https://grafana.com/docs/k6/<K6_VERSION>/examples/correlation-and-dynamic-data).
+1. Run the test from the CLI or Grafana Cloud k6. Refer to [Running k6](https://grafana.com/docs/k6/<K6_VERSION>/get-started/running-k6) for more details.