Test authoring tools

.vale/Vocab/docs/accept.txt

@@ -123,4 +123,5 @@ untyped
 vendored
 walkthrough
 webpages
-wpnonce
+wpnonce
+(?i)codeless

gatsby-node.js

@@ -528,6 +528,36 @@ const createRedirects = ({ actions, pathPrefix }) => {
     toPath: '/javascript-api/k6-html',
     isPermanent: true,
   });
+
+  createRedirect({
+    fromPath: '/using-k6/session-recording-har-support',
+    toPath: '/test-authoring/recording-a-session',
+    isPermanent: true,
+  });
+
+  createRedirect({
+    fromPath: '/cloud/creating-and-running-a-test/test-builder',
+    toPath: '/test-authoring/test-builder',
+    isPermanent: true,
+  });
+
+  createRedirect({
+    fromPath: '/cloud/creating-and-running-a-test/in-app-script-editor',
+    toPath: '/cloud/creating-and-running-a-test/script-editor',
+    isPermanent: true,
+  });
+
+  createRedirect({
+    fromPath: '/cloud/creating-and-running-a-test/recording-a-test-script',
+    toPath: '/test-authoring/recording-a-session/browser-recorder',
+    isPermanent: true,
+  });
+
+  createRedirect({
+    fromPath: '/docs/cloud/creating-and-running-a-test/converters',
+    toPath: '/integrations',
+    isPermanent: true,
+  });
 };
 
 exports.createPages = async (options) => {

src/components/pages/doc-integrations/external-links-dashboard/external-links-dashboard.module.scss

@@ -2,6 +2,13 @@
   @include doc-section-spacing;
 }
 
+.subtitle {
+  margin-top: 10px;
+  color: $color-secondary;
+  font-size: $font-size-lg;
+  line-height: $line-height-lg;
+}
+
 .dashboard {
   padding: 0;
   list-style-type: none;

src/components/pages/doc-integrations/external-links-dashboard/external-links-dashboard.view.js

@@ -4,11 +4,16 @@ import React from 'react';
 
 import styles from './external-links-dashboard.module.scss';
 
-export const ExternalLinksDashboard = ({ dashboardTitle, linksData }) => (
+export const ExternalLinksDashboard = ({
+  dashboardTitle,
+  subtitle,
+  linksData,
+}) => (
   <div className={`container ${styles.wrapper}`}>
     <Heading tag={'h2'} size={'lg'}>
       {dashboardTitle}
     </Heading>
+    {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
     <ul className={styles.dashboard}>
       {linksData.map(({ picture, title, description, url }, i) => (
         <li className={styles.linkWrapper} key={`exb-${i}`}>

src/data/markdown/docs/01 guides/03 Test authoring/01 test builder.md

@@ -0,0 +1,69 @@
+---
+title: 'Test builder'
+excerpt: ''
+---
+
+The k6 Test Builder allows you to utilize a graphical interface to create a k6 test.
+
+Based on your input, the test builder will automatically generate the k6 script for you. Once done, you can copy the script and [run the test from the CLI](/getting-started/running-k6).
+
+> **Note**: you need a [k6 Cloud](/cloud) account to use the test builder. However, it is **free to use**, and you do not need an active subscription to utilize this feature.
+
+Although we strongly believe that scriptable/code-based tools will help you get the most out of your performance testing efforts, a GUI-based tool like the test builder could benefit you in:
+
+- Speeding up the test creation.
+- Learning the [k6 API](/javascript-api).
+- Streamlining the collaboration building tests with non-coders.
+
+![k6 Test Builder](images/test-builder.png)
+
+## Instructions
+
+1 - [Login](https://app.k6.io/account/login) into the k6 Cloud.
+
+2 - On the sidebar menu, click the [Create New Test](https://app.k6.io/tests/new) button.
+
+3 - Select `Test builder`.
+
+![k6 Test Builder](images/k6-create-new-test.png)
+
+4 - Now, you can start building your k6 test using the graphical interface.
+
+![k6 Test Builder](images/test-builder.png)
+
+
+## Test builder features
+
+We are continuously improving and adding new capabilities to the test builder. A few of the most prominent features are:
+
+**Test configuration**
+
+- Configure ramping (aka [stages](/using-k6/options#stages)) using VUs and duration.
+- Configure [load zones](/cloud/creating-and-running-a-test/cloud-tests-from-the-cli#list-of-supported-load-zones) to run from the k6 Cloud.
+
+**HTTP Requests**
+
+- Add a request and name it for better description.
+- Change the URL/Endpoint.
+- Change the `HTTP METHOD` using the drop down menu.
+- Specify Headers.
+- Specify Query Parameters.
+- Specify a request body (JSON, Text, or File Content) for POST/PUT/PATCH requests.
+- Reorganize requests by clicking and dragging.
+- Duplicate or delete requests when hovering over a specific request.
+
+**k6 API**
+
+- Define the [thresholds](/using-k6/thresholds) of your test.
+- Add a [check](/javascript-api/k6/check-val-sets-tags) on a request response.
+- Add [sleep](/javascript-api/k6/sleep-t) time between requests.
+- Add a [group](/javascript-api/k6/group-name-fn) to the test.
+
+**And more**
+
+- Populate the test builder with the recorded requests using the [browser recorder](/test-authoring/recording-a-session/browser-recorder).
+- Populate the test builder with the requests included in a [HAR file](https://en.wikipedia.org/wiki/HAR_(file_format)).
+- Capture a variable when dealing with dynamic data, such as authentication tokens.
+- Show examples for better onboarding.
+- Toggle the view mode to see or copy the generated k6 script.
+- Run the test on the k6 Cloud.

src/data/markdown/docs/01 guides/03 Test authoring/02 Recording a session.md

@@ -0,0 +1,19 @@
+---
+title: 'Recording a session'
+excerpt: ''
+---
+
+In load testing, _recording_ usually refers to the process of creating a load test from the recording of a user session. The process consists of three steps:
+
+1. Record a user or API session.
+2. Convert the recorded session into a test.
+3. Run the test.
+
+While not exclusive, it is common to use recordings while testing complex scenarios on websites or mobile applications. Recording allows seeing the sequence of requests and parameters of the session, helping testers quickly build out complex chains of requests.
+
+Suppose you have to create a performance test simulating a user journey with dozens or hundreds of requests. In that case, the recording avoids writing it from scratch.
+
+k6 provides two mechanism to generate a k6 script from a recorded user session:
+
+- [Browser recorder](/test-authoring/recording-a-session/browser-recorder) generates a k6 script from a browser session. Available on [Chrome](https://chrome.google.com/webstore/detail/k6-browser-recorder/phjdhndljphphehjpgbmpocddnnmdbda?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/k6-browser-recorder/).
+- [HAR converter](/test-authoring/recording-a-session/har-converter) generates a k6 script from the requests included in a HAR file.

src/data/markdown/docs/01 guides/03 Test authoring/02 Recording a session/01 Browser recorder.md

@@ -0,0 +1,86 @@
+---
+title: 'Browser recorder'
+excerpt: ''
+---
+
+
+The browser recorder allows generating a k6 script based on a web session. It is available as extensions for [Chrome](https://chrome.google.com/webstore/detail/k6-browser-recorder/phjdhndljphphehjpgbmpocddnnmdbda?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/k6-browser-recorder/).
+
+### k6 Cloud integration
+
+The browser recorder functionality is powered by the [k6 Cloud](/cloud). When the user finalizes the recording of the session, the extension will upload the auto-generated k6 test into the k6 Cloud account.
+
+> **Note**: the recorder is **free to use** and you do not need an active k6 Cloud subscription to utilize it.
+> 
+> Any user can copy the script from the [script editor](/cloud/creating-and-running-a-test/script-editor) to edit or run the test locally using the `k6 run` command. In the future, we plan to make this feature operational without having a k6 Cloud account.
+
+
+### How it works
+
+The browser recorder allows you to generate the bulk of your test scripts simply by browsing like a user would on your site or web app. The script created gives you a foundation which you can further edit, as required.
+
+The recorder will capture everything – every single HTTP(s) request being loaded into the browser as you click – including ads, images, documents, etc., so you get a far more accurate read of what’s going on. Just press “record”, start browsing and when complete, the script will automatically get saved to your k6 Cloud account.
+
+
+## Instructions
+
+1 - **Install** the [Chrome](https://chrome.google.com/webstore/detail/k6-browser-recorder/phjdhndljphphehjpgbmpocddnnmdbda?hl=en) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/k6-browser-recorder/) extension.
+
+2 - **Start a recording**
+
+Open the extension by clicking the k6 logo, and press "Start recording" to begin recording the current browser tab.  It's good to have in consideration the following best practices to record a user session:
+
+**Do**
+
+- Browse like a user would
+- Take natural pauses that users would take to consume page content
+- Focus on the most common use cases, rather than all the possible use cases
+- Take note of pages where forms/logins occur, you will likely need to do some additional scripting here to make it use dynamic values.
+
+**Do not**
+
+- Visit every page in one journey
+- Click every possible option
+- Navigate as fast as you can
+- Navigate away your actual site or application
+
+![Step 2](./images/Recording-a-test-script/step-2.png)
+
+3 - **Stop the recording**
+
+When done, press "Stop recording", you'll be taken to the app to review the recorded test script
+
+![Step 3](./images/Recording-a-test-script/step-3.png)
+
+4 - **Save your test script**
+
+Save the recorded script in any of your projects.
+
+If any **third party requests** are made during the recording, those requests will be filtered out by default because: 
+
+- These third-party requests will skew the percentiles of your performance results.
+- You may not have the ability to impact the performance of third-party services
+- The load test may violate the terms of service contract that you have with the provider.
+
+If you want to include some of the requests in the _third party list_, simply deselect the ones you want to include, then hit save.
+
+![Step 4](./images/Recording-a-test-script/step-4.png)
+
+5 - **Edit your script** as necessary.
+
+Depending on the type of testing, you might need to change different aspects of the script.  The most usual changes are:
+- Changing the [load options](/using-k6/options). The default is a 12 min ramp-up test.
+- Handling [correlation and dynamic data](/examples/correlation-and-dynamic-data).
+
+> #### Things to consider
+>
+> - The auto-generated script sets [discardResponseBodies](/using-k6/options#discard-response-bodies) to `true`. This configuration will discard all response bodies.
+> - The browser extension will not record other tabs or pop up windows. If you need to capture this information, you should try the [HAR converter](/test-authoring/recording-a-session/har-converter).
+
+6 - **Run the test** locally or in the k6 Cloud.
+
+If you want to run a cloud test from the k6 Cloud UI, press `Run` to start the test.
+
+If you want to use the k6 CLI to run a local or cloud test, copy the generated script to your local text editor and execute the `k6 run` or `k6 cloud` command to start the test. 
+
+For learning more about running k6, check out the [Running k6 guide](/getting-started/running-k6).

src/data/markdown/docs/01 guides/02 Using k6/13 Session recording - HAR support.md → src/data/markdown/docs/01 guides/03 Test authoring/02 Recording a session/02 Har converter.md

@@ -1,31 +1,22 @@
 ---
-title: 'Session recording / HAR support'
+title: 'HAR converter'
 excerpt: ''
 ---
 
-In terms of load testing, recording usually refers to the process of creating a load test from the recording of a user session. The process looks like:
 
-1. Record a user or API session.
-2. Convert the recorded session into a test.
-3. Run the test.
+The HAR converter is an alternative to the [Browser recorder](/test-authoring/recording-a-session/browser-recorder). It generates a k6 script based on the HTTP requests included on a [HAR file](<https://en.wikipedia.org/wiki/HAR_(file_format)>).
 
-While not exclusive, it is common to use the recording when testing complex scenarios of websites or mobile applications. If you have to create a performance test that simulates a scenario with dozens or hundreds of requests, the recording could help you to be more productive in creating your test.
+> HAR is a file format used by all major browsers and various other tools to export recorded HTTP requests.
 
-Recording allows seeing the sequence of requests and parameters of the session instead of having to figure them out. Additionally, you could use the recorded information to auto-generate your test instead of building it from scratch.
+The [har-to-k6 converter](https://github.com/loadimpact/har-to-k6) is a NodeJS tool. Unlike the Browser Recorder, it **does not require a k6 Cloud user** to generate the k6 script.
 
-k6 does not have built-in functionality to record user or API sessions, but it allows to auto-generate a k6 script via an [HAR file](<https://en.wikipedia.org/wiki/HAR_(file_format)>); HAR is a file format used by all the browsers and various tools to export the recorded HTTP requests.
-
-In k6, the process looks like:
+When using the HAR converter, the process looks like:
 
 1. Record a HAR file using your browser or tool of choice.
 2. Use the **har-to-k6 converter** to generate a k6 test from the HAR file.
-3. Update the auto-generated k6 test.
+3. Update the auto-generated k6 test in your text editor or IDE.
 4. Use **k6** to run the test.
 
-> The auto-generation of the test is a great option to add to your toolbox. It’s common practice for advanced user flows that generate many sophisticated HTTP requests, or for helping testers to identify the format of the requests.
->
-> The recording avoids writing advanced tests from scratch, saving you time building your performance tests.
-
 ## 1. Record a HAR file
 
 Multiple browsers and tools can be used to export HTTP traffic in a HAR format. A few popular ones are:
@@ -46,7 +37,7 @@ Here are the basic steps you need to take to make a recording in Chrome:
 6. Enter the URL of your site and start doing whatever you'd like your simulated load test users to be doing.
 7. When done, right-click on the list of URLs in Chrome developer tools and choose "Save as HAR with content".
 
-![Save HAR for load testing](./images/Session-recording-HAR-support/session_recorder_save_as_har.png)
+![Save HAR for load testing](./images/session_recorder_save_as_har.png)
 
 It's good to have in consideration the following best practices to record a user session:
 
@@ -141,13 +132,13 @@ In Chrome, you can use the DevTools Network Filter to select only particular dom
 /loadimpact.com|cloudfront.net/
 ```
 
-![Save HAR filter domain using regex](./images/Session-recording-HAR-support/session_recorder_filter_domain.png)
+![Save HAR filter domain using regex](./images/session_recorder_filter_domain.png)
 
 After filtering your selected domains, you can download the HAR file as described in the first step of this tutorial, and the HAR file will only include the requests to the selected domains.
 
 If you don’t know all the domains to filter, it is beneficial to use the query language of the Network Filter. Just input `domain:` in the filter to see all the different domains recorded by the Network Panel.
 
-![Save HAR filter domain list](./images/Session-recording-HAR-support/session_recorder_filter_domain_list.png)
+![Save HAR filter domain list](./images/session_recorder_filter_domain_list.png)
 
 ### Correlate dynamic data
 
@@ -171,6 +162,6 @@ $ k6 run loadtest.js
 
 For learning more about running k6, check out the [Running k6 guide](/getting-started/running-k6).
 
-## Recording in the k6 Cloud Service
+## See also
 
-If you are a user of the k6 Cloud Service, you can directly upload HAR files through the web UI or [use a Chrome extension](/cloud/creating-and-running-a-test/recording-a-test-script) to create a script while recording a browsing session.
+- [Browser recorder](/test-authoring/recording-a-session/browser-recorder): Chrome and Firefox extensions to generate a k6 script from a browser session.