Updated the following docs as per new UI (#324)

* Updated the following docs as per new UI Updated the following docs as per the new UI: * Update overview.md
testsigmahq · Nov 16, 2023 · 57b11ff · 57b11ff
1 parent cec3922
commit 57b11ff
Show file tree

Hide file tree

Showing 2 changed files with 166 additions and 59 deletions.
diff --git a/src/pages/docs/test-cases/create-steps.md b/src/pages/docs/test-cases/create-steps.md
@@ -1,6 +1,6 @@
 ---
-title: "Create test steps in Testsigma"
-metadesc: "How to create Test Steps in Testsigma "
+title: "Create Test Steps in Testsigma"
+metadesc: "This article discusses creating test steps manually using simple English (NLPs) as well as with a recorder for web, mobile web, Android, & iOS app in Testsigma"
 noindex: false
 order: 4.30
 page_id: "Create Test Steps in Testsigma"
@@ -12,71 +12,156 @@ contextual_links:
   name: "Prerequisites"
   url: "#prerequisites"
 - type: link
-  name: "Ways to create Test Steps"
-  url: "#ways-to-create-test-steps"
+  name: "Creating Test Steps Manually"
+  url: "#creating-test-steps-manually"
 - type: link
-  name: "Web & Mobile Web"
-  url: "#web--mobile-web"
-- type: link
-  name: "iOS"
-  url: "#ios"
-- type: link
-  name: "Android"
-  url: "#android"
+  name: "Creating Test Steps Using Test Recorder"
+  url: "#creating-test-steps-using-test-recorder"
 ---
 
 ---
 
-In Testsigma terminology, each automated action executed by the test script is a Test Step. For example, in a login form “Enter username in the username field ” is a Test Step.
+In Testsigma terminology, each automated action executed by the test script is a test step. For example, in a login form, **Enter &lt;username&gt; in the &lt;username&gt; field** is a test step. This article discusses creating test steps for web, mobile web, Android, and iOS applications using Testsigma recorder & simple English (NLPs). 
 
-[[info | NOTE:]]
-|In Testsigma we will be writing test steps in simple English,  which automatically gets converted into automated actions.
+---
 
-&emsp;
+## **Prerequisites**
 
----
-##**Pre-requisites:**
+- You should have Testsigma recorder installed.
 
-This document assumes that you know how to [Create a test case](https://testsigma.com/docs/test-cases/manage/add-edit-delete/).
+- You should know about [test step types](https://testsigma.com/docs/test-cases/step-types/overview/).
+
+- Web/Android/iOS application you want to test.
 
-&emsp;
 
 ---
-##**Ways to create Test Steps:**
 
-There are two different ways to add test steps in a Test case.
- 1. Writing steps manually using simple English.
- 2. Generating test scripts through a Test Recorder.
+## **Creating Test Steps Manually**
 
-&emsp;
+### **Web & Mobile Web**
 
-Follow the links to know how to use these approaches for: 
+1. Navigate to **Create Tests > Test Cases**, and click on **Create Test Cases**.
 
----
-##**Web & Mobile Web**
+![Test Cases](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmctcs.png)
 
- * [Write Tests using simple English](https://testsigma.com/docs/test-cases/create-steps-nl/web-apps/overview/)
- * [Record Steps using Test step Recorder](https://testsigma.com/docs/test-cases/create-steps-recorder/web-apps/overview/)
+2. Enter **Name** and click on **Add new step**. 
 
-&emsp;
+![New Step](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmanstep.png)
 
----
-##**iOS**
+3. Use NLPs to create test steps as per the test case scenario. For example, if you’re creating test steps for the login page, your test steps will be:
+
+    1. Navigate to https://simply-travel.testsigma.com/ 
+    2. Click on **Login/Sign Up**
+    3. Click on **Login**
+    4. Enter &lt;**email**&gt; in the &lt;**email address**&gt; field
+    5. Click on **Continue**
+    6. Enter &lt;**password**&gt; in the &lt;**password**&gt; field
+    7. Click on **Submit**
+
+Here's a screenshot of reproduced test steps in Testsigma application.
+![Test Steps in Testsigma App](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmsavedsteps.png)
+
+
+### **iOS Apps**
+
+1. Navigate to **Create Tests > Test Cases**, and click on **Create Test Cases**.
+
+![Test Cases](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmiostcs.png)
+
+2. Enter **Name** and click on **Add new step**.
+
+![New Step](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmiosts.png)
+
+3. Use NLPs to create test steps as per the test case scenario.
+
+### **Android Apps**
+
+1. Navigate to **Create Tests > Test Cases**, and click on **Create Test Cases**.
+
+![Test Cases](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmandtcs.png)
+
+2. Enter **Name** and click on **Add new step**. 
+
+![New Step](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmandnewstep.png)
+
+3. Use NLPs to create test steps as per the test case scenario.
+
+[[info | **NOTE**:]]
+| - By default the first step for Android and iOS applications is **Launch App**.
+| - You can also add steps above and below a test step by clicking on **Step Above** & **Step Below**. 
+| ![Add Step Above or Below](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmasaab.png)
+
+<br>
+
+Here's a sample GIF demonstrating creating test steps manually for a Web Application. 
 
- * [Write Tests using simple English](https://testsigma.com/docs/test-cases/step-types/overview/)
- * [Record Steps using Test Recorder](https://testsigma.com/docs/test-cases/create-steps-recorder/ios-apps/overview/)
+![Creating Test Steps Manually](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/CreateTestStepsManually.gif)
 
-&emsp;
 
 ---
-##**Android**
- * [Write Tests using simple English](https://testsigma.com/docs/test-cases/step-types/overview/)
- * [Record Steps using Test Recorder](https://testsigma.com/docs/test-cases/create-steps-recorder/android-apps/overview/) 
 
+## **Creating Test Steps Using Test Recorder**
+
+### **Web & Mobile Web**
+
+1. Navigate to **Create Tests > Test Cases**, and click on **Create Test Case**.
+
+![Test Cases](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/warnavctstcswa.png)
+
+
+2. Create a test step using the URL that you want to automate and click on **Create Step**.
+
+![Create Step](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/warcs.png)
+
+
+3. Click on **Record**.
+
+![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/warrecord.png)
+
+
+4. A new window will open the given URL and you can record the test steps.
+
+![New Window](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/warnwindow.png)
+
+
+[[info | **NOTE**:]]
+| Please wait a few seconds until the web page is fully loaded so the extension can collect information from the page in the background. 
+
+5. Once the first web page is fully loaded, start interacting and performing actions on the page.
+
+
+6. The actions will be recorded and added to the test case in the background. 
+
+
+7. Once the required actions are complete, click on **Done** to switch back to the test case details page.
+![Done](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/warcodone.png)
+
+8. You can see the steps recorded in the test case details page. 
+![Test Steps](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/warrcst.png)
+
+
+### **Android & iOS Apps**
+
+1. Navigate to **Create Tests > Test Cases**, click on **Create Test Case**.
+![Test Cases](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosoctc.png)
+
+2. On **Test Case Details** page, click on **Record**.
+![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosoreco.png)
+
+3. On **Record test steps** overlay, select **Test Lab**, **Test Machine** and **App Source** you want to test. 
+![Record Steps Overlay](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosotltmas.png)
 
+4. Click on **Record**.
+![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosorctso.png)
 
+5. Perform the actions on the application and once the required actions are complete, stop the recording to switch back to the test case details page.
 
+6. The test case details page will display the steps performed on the application. 
 
+<br>
 
+Here's a sample GIF demonstrating creating test steps using the recorder for a Web Application. 
 
+![Record Test Steps for WebApps](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/RecordStepswappsWF.gif)
 
+---
diff --git a/src/pages/docs/test-cases/step-types/overview.md b/src/pages/docs/test-cases/step-types/overview.md
@@ -1,46 +1,68 @@
 ---
 title: "Test Step Types - Overview"
-pagetitle: "Test Step Types in Testsigma"
-metadesc: "What are Test Step types in Testsigma and how to create and use them"
+pagetitle: "Test Step Types"
+metadesc: "There are test step types that logically simulate user interactions on a web/android/iOS screen. This article discusses test step types available in Testsigma"
 noindex: false
 order: 4.22
 page_id: "Test Step Types - Overview"
 warning: false
+contextual_links:
+- type: section
+  name: "Contents"
+- type: link
+  name: "Prerequisites"
+  url: "#prerequisites"
+- type: link
+  name: "Steps to Add Test Step Types"
+  url: "#steps-to-add-test-step-types"
 ---
 
 ---
 
-An automated test case is a step by step logic which simulates user interactions on a web browser / android screen / iOS screen or in the back end as an API. The step-by-step logic is implemented via test steps in Testsigma. 
+An automated test case is a step-by-step logic that simulates user interactions on a web browser/android/iOS screen or in the back end as an API. The step-by-step logic is implemented via test steps in Testsigma. This article gives an overview of the different types of test steps that can be created in Testsigma.
 
-In this document, we will give an overview of the different types of test steps that can be created in Testsigma.
+---
+
+## **Prerequisites**
+
+- You should have Testsigma account.
+
+
+---
 
-**Navigation**: Select Project > Test Development > Create Test Case > Test Steps page
+## **Steps to Add Test Step Types**
 
- 1. Go to Test Development 
- 2. In Test Cases, create a new test case as shown in the screenshot below
- 3. Once you click on the create button, you will be taken to the test steps page as shown below
- 4. Once you are in the test steps page, click on the icon beside the first test step or any other test step if available to see the different types of test steps as shown below
+1. Navigate to **Create Tests > Test Cases**, and click on **Create Test Cases**.
 
-![Click step groups menu](https://docs.testsigma.com/images/step-types/click-on-test-steps-menu.png)
+![Test Cases](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmctcs.png)
 
- 5. This will open the test steps menu from where you can choose different test steps. Read more about the different test steps and how to create them in the links below:
-
-    * [Natural Language](https://testsigma.com/docs/test-cases/step-types/natural-language/)
 
-    * [Step Groups](https://testsigma.com/docs/test-cases/step-types/step-group/)
+2. Enter **Name** and click on **Add new step**. 
 
-    * [While Loops](https://testsigma.com/docs/test-cases/step-types/while-loop/)
+![New Step](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmanstep.png)
 
-    * [For Loops](https://testsigma.com/docs/test-cases/step-types/for-loop/)
 
-    * [If Conditions](https://testsigma.com/docs/test-cases/step-types/if-condition/)
+3. Click on the option on the left side of the test step.
 
-    * [REST API](https://testsigma.com/docs/test-cases/step-types/rest-api/)
+![Option](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/tstypesovopt.png)
 
-![test step types ](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/test-cases/step-types/overview/test-step-types.gif)
+4. This will open a side panel from where you can choose different test steps.
 
+![Side Panel](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/tstypesidepanel.png)
 
- 
+You can choose the type of test step you want to add to your test case from the panel. Read more about the different test steps and how to create them in the links below:
 
+- [Natural Language](https://testsigma.com/docs/test-cases/step-types/natural-language/)
 
+- [REST API](https://testsigma.com/docs/test-cases/step-types/rest-api/)
 
+- [Step Group](https://testsigma.com/docs/test-cases/step-types/step-group/)
+
+- [For Loop](https://testsigma.com/docs/test-cases/step-types/for-loop/)
+
+- [While Loop](https://testsigma.com/docs/test-cases/step-types/while-loop/)
+
+- [If Condition](https://testsigma.com/docs/test-cases/step-types/if-condition/)
+
+
+---