Updated Salesforce Test Case & Elements document (#498)

Updated Salesforce Test Case & added creating elements section for SF.

src/pages/docs/salesforce-testing/element-repos.md

@@ -15,6 +15,12 @@ contextual_links:
 - type: link
   name: "Steps to Check Element Repositories"
   url: "#steps-to-check-element-repositories"
+- type: link
+  name: "Creating Elements While Creating Test Steps"
+  url: "#creating-elements-while-creating-test-steps"
+- type: link
+  name: "Verifying Pre-learnt Salesforce Elements"
+  url: "#verifying-pre-learnt-salesforce-elements"
 ---
 
 ---
@@ -52,8 +58,37 @@ In Testsigma, elements from Salesforce are automatically learned after successfu
 [[info | **NOTE**:]]
 | Since the elements are auto-learned, you can't edit them.
 
-4. You can also create the element manually by clicking on **Create Element**. 
 
-ℹ️   For more information, refer to [creating elements manually](https://testsigma.com/docs/elements/web-apps/create-manually/).
+---
+
+## **Creating Elements While Creating Test Steps**
+
+1. Create a test case and click **Debug & Record**.
+   ![Debug and Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/debug_Record_SF_Elem.png)
+
+2. In the **Debug & Record** overlay, verify that the agent is live, then click **Proceed**.
+   ![Proceed](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Proceed_SF_Elem.png)
+
+3. In the **Testsigma Debugger & Recorder**, click element in the NLP and select **Create Element** from the dropdown menu.
+   ![Create Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/CreateElement_SF.png)
+
+4. Click the UI element, which you want to capture. The recorder automatically captures the element details.
+   ![Element Details](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Elem_Details_SF.png)
+
+5. Verify the element, then click **Create**.
+   ![Create Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/VerifyandCreate_SF_Elem.png)
+
+---
+
+
+## **Verifying Pre-learnt Salesforce Elements**
+
+1. Click element which has the [naming conventions](https://testsigma.com/docs/salesforce-testing/element-repos/#naming-conventions) as mentioned in the above section.
+
+2. Click **View/Edit Element** from the dropdown menu on the **Testsigma Debugger & Recorder**.
+   ![View/Edit Element](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/SF_VieworEdit_Elem.png)
+
+3. A new overlay appears, indicating that the element is a standard Salesforce element and has been pre-learned.
+   ![Pre-learnt Elements](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Prelearnt_Widget.png)
 
 ---

src/pages/docs/salesforce-testing/sf-test-cases.md

@@ -70,24 +70,28 @@ Here, we can choose a connection or create a connection by clicking on **Add Con
 2. Use the NLP, **Switch to *Application*** and replace application from the dropdown. 
 ![Sales](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sftcsapp.png)
 
-3. Use the NLP, **Create record using *Salesforce Connection* in *Salesforce Object Form* and store *RECORD_ID* in variable *test data***.
-![API Step](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sftsflr.png)
+3. Use the NLP, **Create record using *Salesforce Connection* in *Salesforce Object* Form and store *RECORD_ID* in variable test data**. This is an API step.
+![API Step](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Choose_SalesforceConnection.png)
+   - Click **Salesforce Connection** and choose the available connection from the dropdown menu. 
+    ![Salesforce Connection](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Choose_SF_Connection.png)
 
-   This is API Step where we create a **Lead** record using **Salesforce Connection** in **Lead** and store the record ID in a **Variable**. We will use this variable to open the editing form with the **record ID**.
+   - Click **Salesforce Object Form**. This will open **Create record using API** overlay. 
+    ![API Overlay](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/API_Overlay_SF.png)
 
-4. Use the NLP, **Open edit form for record with *Record ID* on *Salesforce Object***.
-Here, we open the edit form with the record ID stored in the variable in the previous step. 
-![Edit Form](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sfofwrtvold.png)
+   - Choose the object form **Select object** dropdown menu. Alternatively, you can also search & choose the **Object Form**. This will open the form where we need to enter the details.
+    ![Object Form](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Objects_Dropdown_SF.png)
 
-5. Click on **Debug & Record**. This will open a Chrome window along with the test recorder. All the steps will be executed up to that point, and you can start recording UI interactions by clicking on the play icon. 
-![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sftcdbarec.png)
-
-    [[info | **NOTE**:]]
-    | When recording test steps through the debugger, if you switch to other organizations for which metadata is not synced, the debugger treats the application as any other web application. A warning will notify you of this, and you can continue recording test steps or elements similar to web applications by clicking **Okay, Got it**.
-    |
-    |![Warning](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/alrtonorgswtch.png)
+   - The form populates for the selected object. Enter data in the fields and click **Save**. Only the selected fields are sent in the API request. 
+    ![Save Form](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Save_Details_SFAPI.png)
+
+   - Store the **Record ID** in a variable, which we’ll call **Lead Records** here. We can use this variable in the next test step to edit a record or across any test cases.
+    ![Lead Records](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/LeadRecord_SF.png)
 
+4. Use the NLP, **Open the edit form for the record with the *Record ID* on the *Salesforce Object***. Here, you open the edit form using the **$ Runtime** test data type with the **Record ID** stored in the variable from the previous step.
+![Runtime Variable](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Runtime_Variable_SF.png)
 
+5. Click on **Debug & Record**. This will open a Chrome window along with the test recorder. All the steps will be executed up to that point, and you can start recording UI interactions by clicking on the play icon. 
+![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sftcdbarec.png)
 
 6. Perform the actions and click on **Stop**. This will open the **End session** warning prompt. 
 ![Stop Recording](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/sftctsdbarcscn.png)