[DOCS-8493] updates to new features for synthetics (#24378)

* updates to new features for synthetics * adding javascript and collapse content * adding callout and moving advanced options * adding some collapse sections, * updating variables shortcode * PM feedback * Apply suggestions from code review Co-authored-by: cecilia saixue watt <[email protected]> * updates from editorial review --------- Co-authored-by: cecilia saixue watt <[email protected]>
DataDog · Sep 3, 2024 · 9b89e01 · 9b89e01
1 parent 1a3c6b3
commit 9b89e01
Show file tree

Hide file tree

Showing 15 changed files with 151 additions and 35 deletions.
diff --git a/content/en/synthetics/api_tests/http_tests.md b/content/en/synthetics/api_tests/http_tests.md
@@ -43,7 +43,18 @@ After choosing to create an `HTTP` test, define your test's request.
 ### Define request
 
 1. Choose the **HTTP Method** and specify the **URL** to query. Available methods are: `GET`, `POST`, `PATCH`, `PUT`, `HEAD`, `DELETE`, and `OPTIONS`. Both `http` and `https` URLs are supported.
-2. Enrich your HTTP request with **Advanced Options** (optional):
+
+   <div class="alert alert-info">See <a href=#advanced-options>Advanced options</a> for more options.</div>
+
+2. **Name** your HTTP test.
+
+3. Add `env` **Tags** as well as any other tag to your HTTP test. You can then use these tags to filter through your Synthetic tests on the [Synthetic Monitoring & Continuous Testing page][3].
+
+   {{< img src="synthetics/api_tests/http_test_config.png" alt="Define HTTP request" style="width:90%;" >}}
+
+Click **Test URL** to try out the request configuration. A response preview is displayed on the right side of your screen.
+
+### Advanced options
 
    {{< tabs >}}
 
@@ -105,17 +116,15 @@ After choosing to create an `HTTP` test, define your test's request.
 [1]: /data_security/synthetics
    {{% /tab %}}
 
-   {{< /tabs >}}
-
-<br/>
+   {{% tab "Javascript" %}}
 
-3. **Name** your HTTP test.
+   Define variables for your HTTP API tests with JavaScript:
 
-4. Add `env` **Tags** as well as any other tag to your HTTP test. You can then use these tags to filter through your Synthetic tests on the [Synthetic Monitoring & Continuous Testing page][3].
+  {{< img src="synthetics/api_tests/http_javascript.png" alt="Define HTTP API test with Javascript" style="width:90%;" >}}
 
-   {{< img src="synthetics/api_tests/http_test_config.png" alt="Define HTTP request" style="width:90%;" >}}
+   {{% /tab %}}
 
-Click **Test URL** to try out the request configuration. A response preview is displayed on the right side of your screen.
+   {{< /tabs >}}
 
 ### Define assertions
 

diff --git a/content/en/synthetics/browser_tests/_index.md b/content/en/synthetics/browser_tests/_index.md
@@ -36,9 +36,26 @@ Browser tests are scenarios executed by Datadog on your web applications. They r
 Define the configuration of your browser test.
 
 1. Enter a **Starting URL**: The URL from which your browser test starts the scenario.
-2. Add **Advanced Options** (optional): Set specific options for your browser test.
 
-   {{< tabs >}}
+ <div class="alert alert-info">See <a href=#advanced-options>Advanced options</a> for more options.</div>
+
+2. Add a **name**: The name of your browser test.
+3. Select **environment and additional tags**: Set the `env` and related tags attached to your browser test. Use the `<KEY>:<VALUE>` format to filter on a `<VALUE>` for a given `<KEY>`.
+4. Select **browsers and devices**: The browsers (such as `Chrome`, `Firefox`, and `Edge`), and devices (such as `Laptop Large`, `Tablet`, and `Mobile Small`) to run your test on.
+   - For a large laptop device, the dimensions are 1440 pixels x 1100 pixels.
+   - For a tablet device, the dimensions are 768 pixels x 1020 pixels.
+   - For a small mobile device, the dimensions are 320 pixels x 550 pixels.
+5. Select **managed and private locations**: Select locations around the world that are managed by Datadog or create [private locations][1] to run your browser test from custom locations or inside private networks.
+
+   {{% managed-locations %}}
+
+   You can also use the [Continuous Testing Tunnel][15] to trigger tests on your local development setup or in your CI/CD pipeline to test internal environments.
+
+6. Set the **test frequency**: The intervals vary from every five minutes to once per week. To request one-minute frequency, [contact Support][2].
+
+### Advanced options
+
+{{< tabs >}}
 
    {{% tab "Request Options" %}}
 
@@ -90,21 +107,12 @@ Define the configuration of your browser test.
 
    {{% /tab %}}
 
-   {{< /tabs >}}
-
-3. Add a **name**: The name of your browser test.
-4. Select **environment and additional tags**: Set the `env` and related tags attached to your browser test. Use the `<KEY>:<VALUE>` format to filter on a `<VALUE>` for a given `<KEY>`.
-5. Select **browsers and devices**: The browsers (such as `Chrome`, `Firefox`, and `Edge`), and devices (such as `Laptop Large`, `Tablet`, and `Mobile Small`) to run your test on.
-   - For a large laptop device, the dimensions are 1440 pixels x 1100 pixels.
-   - For a tablet device, the dimensions are 768 pixels x 1020 pixels.
-   - For a small mobile device, the dimensions are 320 pixels x 550 pixels.
-6. Select **managed and private locations**: Select locations around the world that are managed by Datadog or create [private locations][1] to run your browser test from custom locations or inside private networks.
+   {{% tab "Time & Language" %}}
+
+  By default, timezone is set to UTC, and language is set to English (en). To define a language, use the corresponding 2 or 3 digit [ISO code][19].
 
-   {{% managed-locations %}}
-
-   You can also use the [Continuous Testing Tunnel][15] to trigger tests on your local development setup or in your CI/CD pipeline to test internal environments.
-
-7. Set the **test frequency**: The intervals vary from every five minutes to once per week. To request one-minute frequency, [contact Support][2].
+   {{% /tab %}}
+   {{< /tabs >}}
 
 {{% synthetics-variables %}}
 
@@ -212,3 +220,4 @@ You can restrict access to a browser test based on the roles in your organizatio
 [16]: /synthetics/guide/browser-tests-passkeys
 [17]: /monitors/notify/variables/?tab=is_alert#conditional-variables
 [18]: https://www.microsoft.com/edge/download
+[19] https://www.loc.gov/standards/iso639-2/php/code_list.php
diff --git a/content/en/synthetics/browser_tests/actions.md b/content/en/synthetics/browser_tests/actions.md
@@ -94,9 +94,6 @@ Create this assertion step to have your browser test select a page element and v
 
 {{< img src="synthetics/browser_tests/checkbox_state_assertion.png" alt="Options for assertions in a browser test step" style="width:60%;" >}}
 
-**Note**: Datadog recommends using the two assertions listed above for better accuracy. For more information, see [Advanced Options][1].
-
-[1]: /synthetics/browser_tests/advanced_options#user-specified-locator
 {{% /tab %}}
 {{% tab "Test Active Page Content" %}}
 
@@ -168,6 +165,8 @@ For more information about how to test downloads, see [Test File Upload and Down
 {{% /tab %}}
 {{< /tabs >}}
 
+</br>
+
 ### Navigation
 
 {{< img src="synthetics/browser_tests/navigation_step.png" alt="Choose between three navigation types in a browser test recording" style="width:60%;" >}}
@@ -466,6 +465,18 @@ If a variable is assigned different values along your browser test steps (for ex
 
 Some variables only compute at runtime, such as a variable from an HTTP request or a JavaScript step. For example, assume you have a `Type text` step featuring `{{ <YOUR_VARIABLE_NAME> }}`. At test execution, `{{ <YOUR_VARIABLE_NAME> }}` is systematically replaced by your variable's associated value. To record a step using one of these variables, record a step with the actual variable value, and replace the actual value with `{{ <YOUR_VARIABLE_NAME> }}` in the step's definition before saving your test. 
 
+## Edit a recording 
+
+To edit a browser recording after it's saved:
+
+- Navigate to [Synthetics > Tests.][14]
+- Click on a previously saved browser test.
+- Click the gear icon on the top right hand corner and then click "edit recording".
+- Select multiple or single steps for deletion or replay, then click **Save & Quit**.
+
+{{< img src="synthetics/browser_tests/multi-step-edit.png" alt="Editing a browser recording, and using the multi-select feature"="70%" >}}
+
+
 ## Further Reading
 
 {{< partial name="whats-next/whats-next.html" >}}
@@ -483,3 +494,4 @@ Some variables only compute at runtime, such as a variable from an HTTP request
 [11]: https://restfulapi.net/json-jsonpath/
 [12]: https://www.w3schools.com/xml/xpath_syntax.asp
 [13]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
+[14]: https://app.datadoghq.com/synthetics/tests
diff --git a/content/en/synthetics/explore/_index.md b/content/en/synthetics/explore/_index.md
@@ -27,17 +27,33 @@ You can access, [search](#search-for-tests), and [manage](#manage-tests) all of
 
 {{< img src="synthetics/search/synthetic_tests_page_2.png" alt="Synthetic Monitoring Tests page" style="width:100%" >}}
 
-By using [facets](#facets-and-tags), you can accomplish the following actions:
+## Search for tests
 
-- Search for specific Synthetic tests
-- Manage your tests with bulk actions
+### Customize columns
 
-## Search for tests
+Click on the **Customize** gear icon on the right hand side of the page to add additional columns as needed: 
+
+- Steps
+- Frequency
+- Devices
+- Locations
+- Mobile Application
+- Creator
+- CI Execution
+- Monitor
+- Last Runs
+
+{{< img src="synthetics/search/synthetic_tests_customize_column.png" alt="Synthetic Monitoring Tests page with the columns drop down selected" style="width:100%" >}}
 
 ### Facets and tags
 
 The **Synthetics Filters** panel on the left lists default facets you can use to search for your tests. 
 
+By using [facets](#facets-and-tags), you can accomplish the following actions:
+
+- Search for specific Synthetic tests
+- Manage your tests with bulk actions
+
 The default facets include the following:
 
 | Facet          | Description                                                                   |

diff --git a/content/en/synthetics/mobile_app_testing/mobile_app_tests/steps.md b/content/en/synthetics/mobile_app_testing/mobile_app_tests/steps.md
@@ -190,6 +190,18 @@ Instead of manually reordering new steps by dragging and dropping individual ste
 
 {{< img src="mobile_app_testing/recording_cursor_step.mp4" alt="Set the cursor on a test step to add additional steps before this step" video=true >}}
 
+## Edit a recording 
+
+To edit a mobile recording after it's saved:
+
+- Navigate to [Synthetics > Tests.][7]
+- Click on a previously saved mobile test.
+- Click the gear icon on the top right hand corner and then click "edit recording".
+- Select multiple or single steps for deletion or replay, then click **Save & Quit**.
+- Select multiple or single steps for deletion or replay, then click "Save & Quit".
+
+{{< img src="mobile_app_testing/test_steps/edit-mobile-recording.png" alt="Editing a mobile recording, and using the multi-select feature" width="70%" >}}
+
 ## Further reading
 
 {{< partial name="whats-next/whats-next.html" >}}
@@ -199,4 +211,5 @@ Instead of manually reordering new steps by dragging and dropping individual ste
 [3]: /synthetics/guide/browser-tests-totp/
 [4]: /mobile_app_testing/mobile_app_tests/advanced_options
 [5]: /mobile_app_testing/mobile_app_tests/advanced_options#subtests
-[6]: /synthetics/guide/reusing-browser-test-journeys/
+[6]: /synthetics/guide/reusing-browser-test-journeys/
+[7]: https://app.datadoghq.com/synthetics/tests
diff --git a/content/en/synthetics/mobile_app_testing/settings/_index.md b/content/en/synthetics/mobile_app_testing/settings/_index.md
@@ -22,7 +22,7 @@ further_reading:
 
 Manage your uploaded mobile applications and your parallelization settings on the [Synthetic Monitoring & Continuous Testing Settings page][1].
 
-{{< img src="mobile_app_testing/applications_list.png" alt="Mobile Applications Settings" style="width:100%;">}}
+{{< img src="mobile_app_testing/applications_list_2.png" alt="Mobile Applications Settings" style="width:100%;">}}
 
 ## Create an application
 

diff --git a/content/en/synthetics/platform/settings/_index.md b/content/en/synthetics/platform/settings/_index.md
@@ -71,6 +71,30 @@ Choose or add the default tags for your [API test][4], [multistep API test][5],
 
 When you are done selecting related tags, click **Save Default Tags**.
 
+### Default timeout
+
+Add the default timeouts for your [API test][4] details.
+
+When you are done entering the new timeouts, click **Save Default Timeouts**.
+
+### Default frequency
+
+Choose or add the default frequencies for your [API test][4], [browser test][6], or [mobile test][17] details.
+
+When you are done selecting related tags, click **Save Default Frequencies**.
+
+### Default retries
+
+Choose or add the default number of times you'd like your test to retry on failure for your [API test][4], [browser test][6], or [mobile test][17] details.
+
+When you are done entering the default retry values, click **Save Default Retries**.
+
+### Default mobile devices
+
+Choose or add the default mobile devices you want to use in your [mobile test][17] details.
+
+When you are done entering the default mobile devices, click **Save Default Devices**.
+
 ### Permissions
 
 By default, only users with the [Datadog Admin and Datadog Standard roles][11] can access the Synthetic Monitoring **Default Settings** page. To get access to the **Default Settings** page, upgrade your user to one of those two [default roles][11]. 
@@ -117,9 +141,36 @@ Choose the type of variable you want to create:
 1. Enter a **Variable Name**. Your variable name can only use uppercase letters, numbers, and underscores. This name should be unique across your global variables.
 2. Optionally, enter a **Description** and select **Tags** to associate with your variable. 
 3. Enter the **Value** you want to assign to your variable.
-4. Enable obfuscation of your variable to hide its value on test results (optional).
+4. Optionally, use built-ins to assign values to your variable. For example, click on the `{{ alphabetic(n) }}` built-in to populate the **Value** field with an example of an alphabetic value. 
+5. Optionally, enable obfuscation of your variable to hide its value on test results.
+
+{{< img src="synthetics/settings/variable_value_3.png" alt="Global Variable Specify Value" style="width:100%;">}}
+
+The following built-ins are available:
+
+&#x7b;&#x7b; numeric(n) &#x7d;&#x7d;
+: Generates a numeric string with `n` digits.
+
+&#x7b;&#x7b; alphabetic(n) &#x7d;&#x7d;
+: Generates an alphabetic string with `n` letters.
+
+&#x7b;&#x7b; alphanumeric(n) &#x7d;&#x7d;
+: Generates an alphanumeric string with `n` characters.
+
+&#x7b;&#x7b; date(n unit, format) &#x7d;&#x7d;
+: Generates a date in one of Datadog's accepted formats with a value corresponding to the UTC date the test is initiated at, plus or minus `n` units.
+
+&#x7b;&#x7b; timestamp(n, unit) &#x7d;&#x7d;
+: Generates a timestamp in one of Datadog's accepted units with a value corresponding to the UTC timestamp the test is initiated at, plus or minus `n` units.
+
+&#x7b;&#x7b; uuid &#x7d;&#x7d;
+: Generates a version 4 universally unique identifier (UUID).
+
+&#x7b;&#x7b; public-id &#x7d;&#x7d;
+: Injects the Public ID of your test.
 
-{{< img src="synthetics/settings/variable_value_2.png" alt="Global Variable Specify Value" style="width:100%;">}}
+&#x7b;&#x7b; result-id &#x7d;&#x7d;
+: Injects the Result ID of your test run.
 
 {{% /tab %}}
 

diff --git a/layouts/shortcodes/synthetics-variables.md b/layouts/shortcodes/synthetics-variables.md
@@ -22,4 +22,10 @@ To create a local variable, click **Create a Local Variable**. You can select on
 &#x7b;&#x7b; uuid &#x7d;&#x7d;
 : Generates a version 4 universally unique identifier (UUID).
 
+&#x7b;&#x7b; public-id &#x7d;&#x7d;
+: Injects the Public ID of your test.
+
+&#x7b;&#x7b; result-id &#x7d;&#x7d;
+: Injects the Result ID of your test run.
+
 To obfuscate local variable values in test results, select **Hide and obfuscate variable value**. Once you have defined the variable string, click **Add Variable**.
diff --git a/static/images/mobile_app_testing/applications_list_2.png b/static/images/mobile_app_testing/applications_list_2.png
diff --git a/static/images/mobile_app_testing/test_steps/edit-mobile-recording.png b/static/images/mobile_app_testing/test_steps/edit-mobile-recording.png
diff --git a/static/images/synthetics/api_tests/http_javascript.png b/static/images/synthetics/api_tests/http_javascript.png
diff --git a/static/images/synthetics/browser_tests/multi-step-edit.png b/static/images/synthetics/browser_tests/multi-step-edit.png
diff --git a/static/images/synthetics/browser_tests/number_and_target.png b/static/images/synthetics/browser_tests/number_and_target.png
diff --git a/static/images/synthetics/search/synthetic_tests_customize_column.png b/static/images/synthetics/search/synthetic_tests_customize_column.png
diff --git a/static/images/synthetics/settings/variable_value_3.png b/static/images/synthetics/settings/variable_value_3.png