magnetic: advanced browser

image changes and optimizations for scenarios > optimize end user experiences > Advanced Synthetics

Author: swaretech

content/en/scenarios/optimize_end_user_experiences/3-advanced-synthetics/2-create-real-browser-test.md

@@ -8,8 +8,8 @@ In Splunk Observability Cloud, navigate to **Synthetics** and click on {{% butto
 
 From the dropdown select **Browser test**.
 
-![Add new test](../../images/add-new-test.png)
+![Add new test](../_img/create-browser.png)
 
 You will then be presented with the **Browser test content** configuration page.
 
-![New Test](../../images/new-test.png)
+![New Test](../_img/new-browser.png)

content/en/scenarios/optimize_end_user_experiences/3-advanced-synthetics/3-import-json.md

@@ -6,16 +6,16 @@ weight: 3
 
 To begin configuring our test, we need to import the JSON that we exported from the Chrome DevTools Recorder. To enable the {{% button %}}**Import**{{% /button %}} button, we must first give our test a name e.g. **[`<your team name>`] `<your initials>` - Online Boutique**.
 
-![Import](../../images/import.png)
+![Browser edit form](../_img/browser-form.png)
 
 Once the {{% button %}}**Import**{{% /button %}} button is enabled, click on it and either drop the JSON file that you exported from the Chrome DevTools Recorder or upload the file.
 
-![Import JSON](../../images/import-json.png)
+![Import JSON](../_img/browser-import.png)
 
 Once the JSON file has been uploaded, click on {{% button style="blue" %}}Continue to edit steps{{% /button %}}
 
-![Import Complete](../../images/import-complete.png)
-
-![Edit Steps](../../images/edit-steps.png)
+![Import complete message](../_img/browser-import-complete.png)
 
 Before we make any edits to the test, let's first configure the settings, click on {{% button style="blue" %}}< Return to test{{% /button %}}
+
+![Return to test button in the browser test editor](../_img/browser-return.png)

content/en/scenarios/optimize_end_user_experiences/3-advanced-synthetics/4-edit-test-settings.md

@@ -14,9 +14,9 @@ The simple settings allow you to configure the basics of the test:
   - **Round-robin**: If multiple locations are selected, the test will run from one location at a time, rather than all locations at once.
   - **Active**: Set the test to active or inactive.
 
-![Return to Test]For this workshop, we will configure the locations that we wish to monitor from. Click in the **Locations** field and you will be presented with a list of global locations (over 50 in total).
+For this workshop, we will configure the locations that we wish to monitor from. Click in the **Locations** field and you will be presented with a list of global locations (over 50 in total).
 
-![Global Locations](../../images/global-locations.png)
+![Global Locations](../_img/browser-loc-field.png)
 
 Select the following locations:
 

content/en/scenarios/optimize_end_user_experiences/3-advanced-synthetics/5-advanced-settings.md

@@ -10,7 +10,7 @@ Click on **Advanced**, these settings are optional and can be used to further co
 In the case of this workshop, we will **not** be using any of these settings; this is for informational purposes only.
 {{% /notice %}}
 
-![Advanced Settings](../../images/advanced-settings.png)
+![Advanced Settings](../_img/browser-advanced.png)
 
 - **Security**:
   - **TLS/SSL validation**: When activated, this feature is used to enforce the validation of expired, invalid hostname, or untrusted issuer on SSL/TLS certificates.
@@ -20,4 +20,6 @@ In the case of this workshop, we will **not** be using any of these settings; th
   - **Cookies**: Set cookies in the browser before the test starts. For example, to prevent a popup modal from randomly appearing and interfering with your test, you can set cookies. Any cookies that are set will apply to the domain of the starting URL of the check. Splunk Synthetics Monitoring uses the public suffix list to determine the domain.
   - **Host overrides**: Add host override rules to reroute requests from one host to another. For example, you can create a host override to test an existing production site against page resources loaded from a development site or a specific CDN edge node.
 
+See the [Advanced Settings for Browser Tests](https://docs.splunk.com/observability/en/synthetics/browser-test/set-up-browser-test.html#advanced-settings-for-browser-tests) section of the Docs for more information.
+
 Next, we will edit the test steps to provide more meaningful names for each step.

content/en/scenarios/optimize_end_user_experiences/3-advanced-synthetics/6-edit-steps.md

@@ -13,16 +13,16 @@ For each step, we are going to give them a meaningful, readable name. That could
 - **Step 3** enter **Add to Cart**.
 - **Step 4** enter **Place Order**.
 
-![Step names](../../images/edit-test-steps.png)
+![Editing browser test step names](../_img/browser-edit.png)
 
 {{% notice note %}}
-If you'd like, group the test steps into [Transactions](https://docs.splunk.com/observability/en/synthetics/browser-test/set-up-transactional-browser-test.html#add-transactions) and edit the transaction names. This is especially useful for Single Page Apps (SPAs), where the resource waterfall is not split by URL. We can also create charts and alerts based on transactions.
+If you'd like, group the test steps into [Transactions](https://docs.splunk.com/observability/en/synthetics/browser-test/set-up-transactional-browser-test.html#add-transactions) and edit the transaction names as seen above. This is especially useful for Single Page Apps (SPAs), where the resource waterfall is not split by URL. We can also create charts and alerts based on transactions.
 {{% /notice %}}
 
 Click {{% button style="blue" %}}< Return to test{{% /button %}} to return to the test configuration page and click {{% button style="blue" %}}Save{{% /button %}} to save the test.
 
 You will be returned to the test dashboard where you will see test results start to appear.
 
-![Scatterplot](../../images/scatterplot.png)
+![Browser KPIs chart](../_img/browser-kpis.png)
 
 **Congratulations!** You have successfully created a Real Browser Test in Splunk Synthetic Monitoring. Next, we will look into a test result in more detail.

content/en/scenarios/optimize_end_user_experiences/3-advanced-synthetics/7-view-test-results.md

@@ -7,15 +7,15 @@ weight: 7
 
 1\. Click into a spike or failure in your test run results.
 
-![image](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-02-01/7da71cab-5d3f-4557-af22-413e51706016/ascreenshot.jpeg?tl_px=0,372&br_px=1719,1333&force_format=png&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=251,277)
+![Spike in the browser test performance KPIs chart](../_img/browser-spike.png)
 
 2\. What can you learn about this test run? If it failed, use the error message, filmstrip, video replay, and waterfall to understand what happened.
 
-![Single test run result](../../images/browser-run-result.png)
+![Single test run result, with an error message and screenshots](../_img/browser-fail-result.png)
 
 3\. What do you see in the resources? Make sure to click through all of the page (or transaction) tabs.
 
-![image](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2024-02-01/f971fc4b-49bd-4134-ae27-fe9444e41ef0/ascreenshot.jpeg?tl_px=738,453&br_px=2458,1414&force_format=png&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=524,276)
+![resources in the browser test waterfall, with a long request highlighted](../_img/browser-resources.png)
 
 {{% notice title="Workshop Question" style="tip" icon="question" %}}
 Do you see anything interesting? Common issues to find and fix include: unexpected response codes, duplicate requests, forgotten third parties, large or slow files, and long gaps between requests.