Introduction

Let’s see how web application automated testing is done with Testsigma. We shall take a login scenario for OrangeHRM. If you haven't heard of it before, It is an online HR and Leave Management application.



Test Case

#1. Go to the OrangeHRM application

#2. Type the username

#3. Type the password

#4. Click on the Login button



Test Data

Application URL: https://opensource-demo.orangehrmlive.com/
Username: Admin

Password: admin123



Let us try automating the above Test Case(4 Test Steps) with the above Test Data using Testsigma now.


1. Creating a new Project

When an account is created in Testsigma for the first time, a default project named “Testsigma Examples” will already be available that contains an application, an application version, a few test cases with some test steps. We may use the same project in this case. You may also start by creating a new Project, application, and version and manage them easily.


Let us create a new Project now.

  • Click on Create New button on the left Navigation bar and then click on Project in the overlay that pops up.
  • Enter the following details in the Create Project page that opens up.


  • Click on Create button at the bottom right corner to Create the Project, Application and Version in a single step. You will be taken to the Test Cases page.
    Note: Check the two checkboxes above Application details if you want to have multiple Applications and Version in the same Project


2. Create Test Case

  • Click on "+ Test Case" button on the top left corner to open the "Create Test Case" page.
  • Choose Automated since we are going to create an automated Test Case.
  • Enter the name of the Test Case with a relevant description and click Create. You will be taken to the Test Case Details page.



3. Add Test Steps

Testsigma uses a set of predefined Natural Language statements to write automated tests without programming even a single line of code. Let's add the 4 Test Steps this way.


1. Go to OrangeHRM

If it is a Web Application, the first step would obviously be to go to the Application URL. Enter the URL in the 'Enter your Application URL' field and click on Start button to create the first Step - Go to https://opensource-demo.orangehrmlive.com/



The created step would look as shown below:



You can also create the above step by using the NLP statement Go to test data and replacing test data with the OrangeHRM URL


What is test data?

Test data is nothing but the user inputs, e.g. names like Alice, Bob, a phone number or a website/application URL, etc.

In our case, the application url (http://opensource.demo.orangehrmlive.com/), the username (Admin), the password (admin123) are all test data.


We can also use various other types of Test data. For more details - <different test data types>


One step is completed! That was easy!


2. Enter the Username

Now, let’s create the second Test Step to enter the user name value(Admin) in the Username field.

  • Click on Add Next Test Step to open the Test Step creation wizard.
  • In the Action Text field, start by entering the word 'type' and choose the required Test Step from the suggested grammar list  - Type test data in ui identifier
  • Double click on test data, press Backspace key to delete the placeholder and enter our required test data 'Admin'
  • Double click on ui identifier, press Backspace key to delete the placeholder and enter a name for the UI Identifier, say, Username


What is UI Identifier?

UI identifiers in Testsigma are locators used to locate an element (an input field, link, image, button, etc) in a web page.

<Please check the below article to know about the locators supported by Testsigma>


While entering the UI Identifier name, you might get suggestions if a UI Identifier with similar name has been created before. Select the UI Identifier name from the suggestions if you are sure that the one you need to use is already created.


If you are creating a UI Identifier with the corresponding name for the first time, you will see a link to create the UI Identifier. Click on it and it will take you to the Edit UI Identifier page as shown below:


Web Application Automated Testing ui identifiers



Here, let us assign the UI identifier value. You can assign it either manually or using our Chrome Recorder extension.

  • In Manual method, you can select the Identifier type such as ID, Class Name, XPath e.t,c and enter the UI identifier value in the UI Identifiers field.
  • In the Chrome Recorder method, you can check the "Enable this to capture Element details" checkbox and use the recorder to get the UI Identifier locators automatically just by clicking on the corresponding Element on a web page. Check the below video to know more:




Once the UI Identifier is updated, Click on Create and Continue to create the Current Test Step and proceed to creating the next Test Step.


3. Enter the Password

  • As in previous step, start typing “type” in the Action text field and choose Type test data in ui identifier from the suggested NLP.
  • Replace the test data part with “admin123” and the ui identifier with a UI Identifier name, say ”password.”
  • As discussed earlier, the UI identifier variable can be defined in 2 ways: using the Record option or by manually entering it. Let us try manually entering the UI identifier this time. Refer to this video:




Click on Create and Continue to create the Current Step and move onto next step.


4. Click the Login Button

Now, Let's see how a click operation is performed in Testsigma. We need to click on the Login button to submit the Username and Password.

  • As in previous step, start typing “click” in the Action text field.
  • There’s no need for Test Data or input in this case. We do not have any input to enter but UI identifier to locate this click button. So, let us choose the grammar Click on ui identifier.
  • Replace the ui identifier part with a variable, say, 'submit'. 
  • Let us record the UI identifier for the Login button on the OrangeHRM page.


Click on Create button rather than Create and Continue since this is the last step. 


4. Executing the Test Case

Now that all the automated Test Steps are added, let us see how they are executed.



There are 3 Execution methods in Testsigma.

  • Dry Run is the quickest method to execute individual Test Cases in Testsigma.
  • Quick Executions and Regular Executions can be used to execute multiple Test Cases and Test Suites(a group of Test Cases).
  • Quick and Regular Executions can be done on your local devices (Hybrid Execution), on Testsigma's very own cloud infrastructure called Testsigma Labs and also on third-party platforms like BrowserStack and Sauce Labs.


Let’s perform a Dry Run of the automated test case.

  • Simply click on 'Run' at the top right corner of the Test Case details page.
  • In the next page that opens up, enter the details of the execution like the Name of the Execution, The Operating System, its version and the browser and its version being used for the test execution.
  • Testsigma Lab is the Execution Model we have chosen. Click on Create and Run.


Web Application Automated Testing Execution Environment



The test case execution will start now.


5. Viewing Results

  • Wait for some time once the Execution is started and click Refresh.


Web Application Automated Testing Result


That's how a web application automated test case is created and run.


Happy Automation Testing!!