Skip to content

Commit

Permalink
Updated test steps document (#546)
Browse files Browse the repository at this point in the history 
Updated the test steps document as per the changes in the UI.

Co-authored-by: Bharath Krishna <[email protected]>
  • Loading branch information
@Nandhini4501 @bharathk08
Nandhini4501 and bharathk08 authored Nov 28, 2024
1 parent 99d48d2 commit 919eeb5
Showing 1 changed file with 90 additions and 94 deletions.
184 changes: 90 additions & 94 deletions src/pages/docs/test-cases/create-test-steps/overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ In Testsigma terminology, each automated action executed by the test script is a

> ## **Prerequisites**
>
> Before you begin, ensure you're familiar with concepts of [Test Step Types](https://testsigma.com/docs/test-cases/step-types/overview/), have installed the [Test Recorder](https://testsigma.com/docs/test-step-recorder/install-chrome-extension/), and have a Web/Android/iOS app to test.
> Before you begin, ensure you're familiar with concepts of [Features and Scenarios](https://testsigma.com/docs/test-cases/manage/features-and-scenarios/), [Test Step Types](https://testsigma.com/docs/test-cases/step-types/overview/), have installed the [Test Recorder](https://testsigma.com/docs/test-step-recorder/install-chrome-extension/), and have a Web/Android/iOS app to test.

---
Expand All @@ -36,147 +36,143 @@ In Testsigma terminology, each automated action executed by the test script is a

### **Web & Mobile Web**

1. Navigate to **Create Tests > Test Cases**, and click on **Create Test Cases**.
1. From the left navigation bar, go to **Create Tests** > **Test Cases**.
![Left Navigation Bar](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Left_NavBar_TestCases.png)

![Test Cases](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmctcs.png)
2. In the **Test Case Explorer** section, expand the required feature and click the **+** icon next to the target scenario. This will open a dialog box.
![Feature Test Case Explorer](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Feature_Test_case_explorer.png)

2. Enter **Name** and click on **Add new step**.
3. On the dialog box, validate the target feature and scenario, enter the name, and click **Create**.
![Test Case Name](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Test_Case_Name.png)

![New Step](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmanstep.png)
Alternatively, click the **+** icon next to the search bar and select **New Test Case** from the drop-down menu. Follow the same steps as above.
![Search bar test case](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Search_bar_test_case.png)

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**
[[info | **NOTE**:]]
|
| - You can edit the target feature and scenario by clicking on the **Edit** icon. This will open the **Select Location** dialog.
| ![Scenario Change Edit Icon](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Scenario_Change_Edit_Icon.png)
| - In the **Select Location** dialog, select the target feature and scenario and click **Confirm**.
| ![Select Scenario Location ](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Select_Scenario_Location.png)
| - This feature functions consistently across all applications.

4. 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 or Sign Up**
3. Click on **Login**
4. Enter <**email**> in the <**email address**> field
5. Click on **Continue**
6. Enter <**password**> in the <**password**> field
7. Click on **Submit**

Here's a screenshot of the test steps that were reproduced in the Testsigma application:
![Login New Credentials 1](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Login_New_Credentials_1.png)

### **Android and iOS**

1. Navigate to **Create Tests > Test Cases**, and click on **Create Test Cases**.
1. From the left navigation bar, go to **Create Tests** > **Test Case**.
![Android Create Test Case](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Android_Create_Test_Case.png)

![Test Cases](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmandtcs.png)
2. In the **Test Case Explorer** section, expand the required feature and click the **+** icon next to the target scenario. This will open a dialog box.
![Android New Test Case](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Android_New_Test_Case.png)

2. Enter **Name** and click on **Add new step**.
3. On the dialog box, validate the target feature and scenario, enter the name, and click **Create**.
![Test Case Name New](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Test_Case_Name_New.png)

![New Step](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/ctsmandnewstep.png)
Alternatively, click the **+** icon next to the search bar and select **New Test Case** from the drop-down menu. Follow the same steps as above.
![Search Bar Test Case Selection](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Search_Bar_Test_Case_Selection.png)

3. Use NLPs to create test steps as per the test case scenario.
4. 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**.
|
| - 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.

![Creating Test Steps Manually](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/CreateTestStepsManually.gif)
| ![Create New Steps](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Create_New_Steps.png)


---

## **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)
### **Web and Mobile Web**

1. From the left navigation bar, go to **Create Tests** > **Test Cases**.
![Record Create Test Case](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Record_Create_Test_Case.png)

3. Click on **Record**.
2. In the **Test Case Explorer** section, expand the required feature and click the **+** icon next to the target scenario. This will open a dialog box.
![Plus Icon Test Case](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Plus_Icon_Test_Case.png)


![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/warrecord.png)
3. On the dialog box, validate the target feature and scenario, enter the name, and click **Create**.
![Record Test Case Name](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Record_Test_Case_Name.png)

Alternatively, click the **+** icon next to the search bar and select **New Test Case** from the drop-down menu. Follow the same steps as above.
![Record Search Bar Test Case](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Record_Search_Bar_Test_Case.png)

4. A new window will open the given URL and you can record the test steps.
4. Create a test step using the URL that you want to automate and click **Create Step**.
![Create Steps Button](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Create_Steps_Button.png)

![New Window](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/warnwindow.png)
5. Click **Record**.
![Record Button](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Record_Button.png)

6. A new window will open the given URL.
![New Window URL](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/New_Window_URL.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.
|
| - Please wait 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.
7. Once the first web page is fully loaded, start interacting and performing actions on the page.

8. The actions will be recorded and added to the test case in the background.

6. The actions will be recorded and added to the test case in the background.
9. Once the required actions are complete, click on **Stop** to switch back to the test case details page.
![Record Stop Buton](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Record_Stop_Button.png)

10. You can see the steps recorded in the test case details page.
![Recorded Steps 1](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Recorded_Steps_1.png)

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)
### **Android and iOS**

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)
1. From the left navigation bar, go to **Create Tests** > **Test Cases**.
![Create Test Case iOS](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Create_Test_Case_iOS.png)

2. In the **Test Case Explorer** section, expand the required feature and click the **+** icon next to the target scenario. This will open a dialog box.
![New Test Case iOS](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/New_Test_Case_iOS.png)

### **Android & iOS Apps**
3. On the dialog box, validate the target feature and scenario, enter the name, and click **Create**.
![Test Case Name iOS](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Test_Case_Name_iOS.png)

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)
Alternatively, click the **+** icon next to the search bar and select **New Test Case** from the drop-down menu. Follow the same steps as above.
![Search Bar Test Case iOS](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Search_Bar_Test_Case_iOS.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)
4. Click **Create Step** and click **Record**.
![Start Test Case Steps](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Start_Test_Case_Steps.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)
5. In the **Record test steps** overlay, select the required options in the **Test Lab** and **Test Machine** sections.
![Record Settings 1](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Record_Settings_1.png)

4. Click on **Record**.

![Record](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/iosorctso.png)
6. Click **Upload** and upload the required file.
![Upload iOS](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Upload_iOS.png)

7. Click **Record**.
![Record Button iOS](https://s3.amazonaws.com/static-docs.testsigma.com/new_images/projects/applications/Record_Button_iOS.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.
8. 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.
9. The test case details page will display the steps performed on the application.

<br>

<div style="background-color: #f8f9fa; padding: 20px; border-radius: 5px; border: 1px solid #dee2e6;">
<p style="font-size: 16px; color: #495057;">
<span style="color: #17a2b8; font-size: 20px;"></span>
<b>⚡ New:</b> You can now directly interact with mobile elements, and the recorder will automatically capture the action and convert it into the corresponding NLPs.
</p>
</div>

[[info | **NOTE**:]]
| If direct recording doesn't work, revert to the old method and use the **TAP** button to record the element.
|
| - If direct recording doesn't work, revert to the old method and use the **TAP** button to record the element.

<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)


---

0 comments on commit 919eeb5

Please sign in to comment.