Updated recording single element doc (#520)

src/left-nav-title.json

@@ -668,7 +668,7 @@
   "add-test-cases-for-mobile-web-app": {"/docs/test-cases/manage/add-test-cases-for-mobile-web-app/": "Test Cases (Mobile Web App)" },
   "most-common-issues": { "/docs/troubleshooting/salesforce-testing/most-common-issues/": "Most Common Issues" },
   "developer-mode-for-ios": {"/docs/troubleshooting/mobile-apps/developer-mode-for-ios/": "Developer Mode (iOS 16 & Above)" },
-  "mock-apis": {"/docs/test-cases/create-steps-restapi/mock-apis/": "Mock API Support" },
+  "mock-apis": {"/docs/test-cases/create-steps-restapi/mock-apis/": "Testing API Responses" },
   "testsigma-on-prem-architecture": {"/docs/on-premise-setup/pre-installation/testsigma-on-prem-architecture/": "On-Premise System Architecture" },
   "prerequisites-and-machine-configurations": {"/docs/on-premise-setup/pre-installation/prerequisites-and-machine-configurations/": "Prerequisites" },
   "setup": {"/docs/on-premise-setup/installation-process/setup/": "Installation Steps" },

src/pages/docs/elements/web-apps/capture-single-element.md

@@ -14,6 +14,9 @@ contextual_links:
 - type: link
   name: "Steps to Capture an Element"
   url: "#steps-to-capture-an-element"
+- type: link
+  name: "Steps to Update an Element"
+  url: "#steps-to-update-an-element"
 - type: link
   name: "Creating an Element While Creating Test Case"
   url: "#creating-an-element-while-creating-test-case"
@@ -58,20 +61,58 @@ You can also selectively capture single element of a web application using Tests
 5. Click on the hovered element and wait for the element to appear in the recorder.
 ![Element in Recorder](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/rmecoelm.png)
 
-[[info | **NOTE**:]]
-| - To update an element, hover over the recorded element and select the edit icon. Change the element details manually and click **Update** to finalize the changes.
-|   ![Update Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/cseuelm.png)
-| - You can also update the element from the run results by navigating to **Ad-Hoc Runs > Test Step > Element > Edit Element**.
-
 6. Once you have captured the necessary element, click on **Stop**.
 ![Stop](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/rsecosp.png)
 
 7. You'll be redirected to the **Elements** page, where you can see all recorded elements.
 
+[[info | **NOTE**:]]
+| While recording elements, the recorder will also capture the page image, highlighting the respective element. This provides visual context along with the element details.
+
 Here’s a quick GIF demonstrating how to record multiple elements for a web application. 
 ![Record Multiple Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/RecordMultipleElements.gif)
 
 
+---
+
+
+## **Steps to Update an Element**
+
+1. From the left navigation bar, select **Create Tests > Elements**.
+![Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Update_Elements_Nav.png)
+
+2. From the **Elements list** page. This will open the **Element Details** overlay. 
+![Element Details](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Element_List_Page.png)
+
+3. In the **Element Details** overlay, click **Edit**. This will open the **Update Element** overlay. 
+![Update Details Overlay](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Element_Details_Overlay.png)
+
+4. In the **Update Element** overlay, manually update the details you want to change, and click **Update Element**.
+![Update Element Overlay](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Update_Element_Overlay.png)
+
+<br>
+
+   <div style="background-color: #f8f9fa; padding: 20px; border-radius: 5px; border: 1px solid #dee2e6;">
+     <p style="font-size: 16px; color: #495057;">
+       <b>💡 Additional Info:</b><br><br>
+       You can update the following fields:
+       <ul style="list-style-type: disc; padding-left: 20px;">
+         <li><b>Name</b></li>
+         <li><b>Screen Name</b></li>
+         <li><b>Element Type</b></li>
+         <li><b>Value</b></li>
+       </ul>
+     </p>
+   </div>
+
+<br>
+
+5. You can also check the highlighted element in the **Element Image** section in the same overlay for your reference.
+![Element Image](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Image_Captured_for_Element.png)
+
+[[info | **NOTE**:]]
+| You can also update the element from the run results by navigating to **Ad-Hoc Runs > Test Step > Element > Edit Element**.
+
 ---
 
 ## **Creating an Element While Creating Test Case**

src/pages/docs/test-cases/create-steps-restapi/mock-apis.md

@@ -1,10 +1,10 @@
 ---
-title: "Mock API Support in Testsigma"
-page_title: "Mock API Support in Testsigma"
-metadesc: "Learn how to handle mock APIs and experiment with the different types of test data | Testsigma allows you give inputs while mocking an API in Testsigma"
+title: "Testing API Responses with Custom Values"
+page_title: "Sending Custom Variable Values While Creating API Steps"
+metadesc: "Learn how to send custom values and experiment with the different types of test data | Testsigma allows you give inputs while testing an API responses in Testsigma"
 noindex: false
 order: 4.993
-page_id: "Mock APIs"
+page_id: "Send Custom Variables in API Steps"
 search_keyword: ""
 warning: false
 contextual_links:
@@ -14,15 +14,16 @@ contextual_links:
   name: "Prerequisites"
   url: "#prerequisites"
 - type: link
-  name: "Adding Various Inputs for Mock APIs"
-  url: "#adding-various-inputs-for-mock-apis"
+  name: "Steps to Send Custom Variables in API Steps"
+  url: "#steps-to-send-custom-variables-in-api-steps"
 ---
 
 ---
 
-The goal of mocking an API is to ensure that users can experiment with the data before authoring the API step. With Testsigma, users can select default and custom values associated with each key for various variables, such as parameters, runtime, environment, random data generator, phone number, and mailbox, and verify responses.
+The goal of sending custom values while creating API steps is to ensure that all input sources are accurately parsed while testing API responses as you send the request. This allows you to experiment with the data and make necessary changes while designing API tests. 
+
+With Testsigma, you can choose default and custom values for various variables such as parameters, runtime, environment, random data generators, phone numbers, and mailboxes and verify responses. This article discusses providing custom test data inputs while creating API steps.
 
-This article discusses providing test data inputs while mocking an API in Testsigma. 
 
 ---
 
@@ -34,7 +35,7 @@ This article discusses providing test data inputs while mocking an API in Testsi
 
 ---
 
-## **Adding Various Inputs for Mock APIs**
+## **Steps to Send Custom Variables in API Steps**
 
 1. From the left-side navbar, select **Create Tests > Test Cases** and then click **Create Test Case**.
 
@@ -55,8 +56,8 @@ This article discusses providing test data inputs while mocking an API in Testsi
 9. Click **Send** and verify the response received from the API.
 
 
-Here’s a quick GIF demonstrating an example of adding an input for mocking API. 
+Here’s a quick GIF demonstrating an example of sending custom variable values in API Steps. 
 
-![Mock APIs](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/MockAPI.gif)
+![Custom Variable Values](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/MockAPI.gif)
 
 ---