diff --git a/docs/sources/next/using-k6/test-authoring/create-tests-from-recordings/_index.md b/docs/sources/next/using-k6/test-authoring/create-tests-from-recordings/_index.md index a86553556..58f7d95e2 100644 --- a/docs/sources/next/using-k6/test-authoring/create-tests-from-recordings/_index.md +++ b/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//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//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//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 diff --git a/docs/sources/next/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder.md b/docs/sources/next/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder.md new file mode 100644 index 000000000..d8bd033cd --- /dev/null +++ b/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//using-k6/test-authoring/create-tests-from-recordings/). +- Learn the basics of k6 browser tests with [Running browser tests](https://grafana.com/docs/k6//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//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//using-k6/k6-options) and to handle [correlation and dynamic data](https://grafana.com/docs/k6//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//get-started/running-k6) for more details. diff --git a/docs/sources/v0.52.x/using-k6/test-authoring/create-tests-from-recordings/_index.md b/docs/sources/v0.52.x/using-k6/test-authoring/create-tests-from-recordings/_index.md index a86553556..58f7d95e2 100644 --- a/docs/sources/v0.52.x/using-k6/test-authoring/create-tests-from-recordings/_index.md +++ b/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//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//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//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 diff --git a/docs/sources/v0.52.x/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder.md b/docs/sources/v0.52.x/using-k6/test-authoring/create-tests-from-recordings/using-the-devtools-recorder.md new file mode 100644 index 000000000..d8bd033cd --- /dev/null +++ b/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//using-k6/test-authoring/create-tests-from-recordings/). +- Learn the basics of k6 browser tests with [Running browser tests](https://grafana.com/docs/k6//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//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//using-k6/k6-options) and to handle [correlation and dynamic data](https://grafana.com/docs/k6//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//get-started/running-k6) for more details.