Over a million developers have joined DZone.

Web Application Automated Testing With Testsigma

DZone's Guide to

Web Application Automated Testing With Testsigma

Learn how to use Testsigma, a test automation software that uses a shift-left approach for continuous testing and provides an alternative to Selenium.

· DevOps Zone ·
Free Resource

DevOps involves integrating development, testing, deployment and release cycles into a collaborative process. Learn more about the 4 steps to an effective DevSecOps infrastructure.


Given the pace of today's fast-paced Agile software development approach that demands short and frequent software Product Release Cycles (weekly and even daily builds), it is hard to rely on manual test practices alone to ensure that your product works as intended before deployment. Test automation is apparently the best bet for software testing, mainly regression testing, but the development of a test automation framework is time-intensive to implement and difficult to maintain. An effective test automation tool that is both easy to maintain and quick to implement would make the testing process effortless and help deliver a quality product.

One among the preferred automation toolsTestsigma is a SaaS test automation software on the cloud for web and mobile applications that employs a shift-left approach to achieve continuous testing. It is one among the top alternatives to Selenium if you are looking to perform Test Automation.

Let’s see how web application is automated with Testsigma. We shall take an account login scenario using OrangeHRM (an HR and Leave Management application).

Web Application Automated Testing using Testsigma

There are 4 steps in logging into the OrangeHRM page:

1. Go to the OrangeHRM application

2. Type the username

3. Type the password

4. Click on the Login button

Let us try automating the 4 steps using Testsigma now.

When an account is created in Testsigma for the first time, a default project named “Testsigma” 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's start by creating a test case directly under the Testsigma project that is already available.

Click on "+ Test Cases" link to open the "Create Test Case" page.

A drop-down menu appears as shown below:

Create project with Web Application Automated Testing tool Testsigma

In the intermediate page that opens up, select one of the pre-created Applications, Versions, and Requirements from the list.

Now you will be taken to the second Create Test Case page.

Choose Automated since we are going to create an automated Test Case.

Enter the name of the Test Case with relevant details, choose the Status as Ready (for execution) and click Create.

Creating automated tool Testsigma create test cases

You can choose to add automated Test Steps from the Test Case details page that opens up.

Web Application Automated Testing tool Testsigma Automated test cases

To add a Test Step, Click on "Create Test Step." The Test Step creation wizard opens up.

Web Application Automated Testing tool Testsigma create Automated test steps

Testsigma uses simple English sentences or Natural Language statements to write automated tests without programming even a single line of code.

Based on the action you wish to perform you can start typing your test in simple natural language. Let's perform the 4 action steps this way.

We need to navigate to the OrangeHRM application first.

1. Go to OrangeHRM

Start by typing ”go”(not case sensitive) in the Action Text field to choose the grammar suggestions to navigate to the desired web page. You may also look for Navigate or just any action that you wish to perform in the Examples tab under Examples. As you can see, there is a list of suggestions that you can refer as shown below:

Web Application Automated Testing tool Creating test steps

You may see two parts in these grammar suggestions, mainly test data and UI identifier.

(i) 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:

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

To see possible UI identifiers for an element on a web page, right click on the element and select the Inspect option.

As shown in the image, the "Username" field of this web page has two unique UI identifiers to choose from:

  • name= ‘txtUsername’
  • id = ‘txtUsername’

Selecting ui identifiers for we application automated testing

Let's continue from where we left off.

Choose the grammar “go to [test data]” from the drop-down suggestions list that appears after typing the “go” keyword in the Action Text field.

Replace the [test data] part with the OrangeHRM application URL “http://opensource.demo.orangehrmlive.com/.”

The URL is not an element on the webpage and need not be located but directly specified. Thus, only test data, and no UI identifier. Now, click on the Create button.

One step is completed! That was easy!

2. Enter the Username

Now let’s create a Test Step to enter some value in the Username field.

Click on "Create Test step" once again to open the Test Step creation wizard.

In the Action Textbox, start entering the word “type” and choose from the suggested grammar list, your desired Test Step.

From the suggestions, choose Type [test data] in [ui identifier].

This simply means to type the [test data] in a particular field located by [ui identifier] on the webpage. Just replace the [test data] part with “admin” and UI identifier part with a UI identifier variable say, “username.” We will assign its value after creating the Test Step.

Now click on Create to create the Test Step.

In this step, we have used a UI Identifier variable ("username"). We need to specify the UI identifier value now.

Click on the Expand icon to show the details of Test Step and click on the UI identifier name as shown in the image below:

Web Application Automated Testing ui identifiers

The following page appears now:

Web Application Automated Testing ui identifiers

Here, let us assign the UI identifier value.

There are two ways to give the UI identifier variable a value to locate it in the web page. One way is manually entering the UI identifier value by checking the id, XPath, class name, etc like we discussed earlier. A simpler way would be using the Record option to automatically record the UI identifier of an element or a field in a web page.

Let's try the Record option. Check the video to know how.

3. Enter the Password

Similarly, to enter the password, click on the Create Test step button.

Start typing “type” and choose Type [test data] in [ui identifier] from the suggestions.

Replace the [test data] part with “admin” and the [ui identifier] with a variable name, say ”password.” Click on Create Test step. Click on the Expand icon and click on the variable that we just created, “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.

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.

Click on Create Test step.

Start typing “click” on the Action text area.

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 UI [identifier].

Replace the UI identifier with a variable, say, "submit." Now, click on Create.

Click on the Expand icon and click on the UI identifier variable submit.

Let us record the UI identifier for the Login button on the OrangeHRM page.

Since the Testsigma extension is already added (refer to the video for the Record option), all you need to do is click on the Record option. Check the checkbox and click on the “Login” button on the OrangeHRM web page and Click on Refresh in the "Edit UI identifier" page of Testsigma. Now that the UI identifier is automatically added, click on Update.

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 Run and Parallel Executions can be used to execute multiple Test Cases and Test Suites(a group of Test Cases).

Parallel Executions can be done on your local devices (Hybrid Execution), on Testsigma’s very own cloud infrastructure called Testsigma Lab 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.

Web Application Automated Testing Test Cases Execution

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.

Viewing Results

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

Click on Run Results in the left pane to see the test status.

Also, you can click on the Test Case name to see the test run details whether a Test Case failed or passed, why it failed, etc.

Web Application Automated Testing Result

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

Check out Testsigma website. You may also refer to Testsigma Knowledgebase for more reference docs.

Read the 4-part DevOps testing eBook to learn how to detect problems earlier in your DevOps testing processes.

parallel testing ,test automation ,cross browser testing ,web testing ,devops

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}