Automating a Web Application using Testsigma's NLP Grammar
Tags: softwaretesting, testautomation, nlp
Published: 2019-05-28 18:32:20

---
title: Automating a Web Application using Testsigma's NLP Grammar
published: true
description: A quide on ow you can automate a web application using the test automation tool Testsigma
tags: Software Testing, Test Automation, NLP
---
The article explains how a sample web application like the <a href="https://opensource-demo.orangehrmlive.com/">OrangeHRM</a>(an HR and Leave Management System) can be automated using the NLP based Test Automation tool, <b><a href="https://testsigma.com" target=_blank>Testsigma</b></a>.

<img src="https://i.imgur.com/EUrKZf2.png">
	
We will do the following:

<ul><li>Navigate to the OrangeHRM website</li>
<li>Enter the Username(Admin) the Username field</li>
<li>Enter the Password(admin123) in the Password field</li>
<li>Click on Login</li></ul><br>
When you <a href="https://testsigma.com/signup">create a trial account</a> with Testsigma, you will have a default Project named, <b>Testsigma</b> with a few samples. You may create a new Test Case in the existing Project or create a new Project and add test cases to this.

Now click on Add Test Steps to start writing the Test Steps for each of the 4 steps that we need to perform.<br>

<h2>Step 1: Navigate to the application</h2>
The first step is quite easy. Just type/copy and paste the URL of the application you wish to automate in the Go To field and hit Start!<br>


<img src="http://assets.testsigma.com/external/product/11-2019/Enter_URL_Testsigma.png"><br>
The first Test Step will automatically be added.


<img src="http://assets.testsigma.com/external/product/11-2019/Add_Next_Test_Step_Testsigma.png">


<h2>Step 2: Enter the Username</h2>

Now, to test the login scenario of this application. We will start by entering the Username.

Start typing, "Enter" and a list of grammar suggestions will appear.
From the list, choose the NLP grammar, <i>“Enter test data in the ui identifier field”</i> since this closely relates to what we need to perform.

<img src="http://assets.testsigma.com/external/product/11-2019/Enter_Action_Testsigma.png">



We see 2 keywords in the grammar; a <b>test data</b> and a <b>ui identifier</b>. 'Test data' are inputs we provide like your Name, or the Username in this example, etc.

A 'ui identifier' is the path we use to “identify” an element(the Username field) anywhere on the website or the web page so as to perform any action on that element on the web page.

Now, you only need to replace the <b>test data</b> part with the value, “<i>Admin</i>”. Also, replace the <b>ui identifier</b> part with some meaningful variable like ‘<i>UsernameLogin</i>’. We will assign the unique ui identifier/path of the Username field to this variable.

<img src="http://assets.testsigma.com/external/product/11-2019/Edit_ui_identifier_Testsigma.png">

You may as well skip this part and continue to add the Test Steps and later edit the ui identifier values. This is particularly useful if you are performing <a href="https://dzone.com/articles/in-sprint-test-automation-at-agile-and-dev-ops-spe" target=_blank>Test Automation in-sprint</a>.


Let's assign the ui identifier its value right away. If you are familiar with creating xpaths, you may <a href="https://youtu.be/zVCCduIjOXs" target=_blank>manually</a> create and store the ui identifier value or you could use Testsigma’s Chrome extension that will automatically identify and store the exact path of the Username field for you. Here’s how you do this using the <a href="https://youtu.be/Q2QOmclAx2A" target=_blank>Chrome extension</a>.<br>
<img src="http://assets.testsigma.com/external/product/11-2019/Ui_identifier_values_Testsigma.png">



Now, click 'Create and Continue' to continue adding next Test Steps.

<h2>Step 3: Enter the Password</h2>

Now, enter the Password in the Password field. Use the same NLP grammar as the Username, “Enter test data in the ui identifier field”.
Replace test data with <i>admin123</i> and replace ui identifier with some variable say, ‘<i>PasswordforLogin</i>’. i.e, “Enter admin123 in the PasswordforLogin field”.

Like before, you may either use the Chrome extension to get the ui identifier value of the ui identifier, ‘PasswordforLogin’ or you could try entering the ui identifier value manually by inspecting the Password field element.

Click on Create and Continue.

<h2>Step 4: Perform a click operation</h2>

Now, let's see how we perform the click operation to perform Login.
There’s no need to enter a test data value in this case, right? It’s just clicking on the Login button.
So, the NLP grammar is just “<i>Click on ui identifier</i>”. Replace the ui identifier with a name say, "Login" and assign its ui identifier value like we did previously.

Click on Create.

<h2>Step 5: Verify something</h2>
Here’s a bonus step! Let us also verify if some text is displayed in the page or not.
Click on Add Next Step. You just need to use the grammar, “<i>Verify that the current page URL is test data</i>”. You may try other NLP grammar suggestions too. Replace test data with your expected value.<br>

<img src="http://assets.testsigma.com/external/product/11-2019/Test_Steps_Testsigma.png">

To know what grammar to use, just refer the NLP grammar link at the  left pane of the tool or refer the Help section(a <b>?</b> symbol right next to the Test Steps) for the examples related to an action to be performed like Enter or Click.



<h2>Executing the Test Steps</h2>

Now, let’s run these 5 Test Steps. Just click on <b>Run</b> at the top right of the Test Steps page for a real quick execution of this test case and click Create and Run.


Once the test is run, check the Run Results. You will see the details of the execution with detailed test logs, screenshots and videos.

<img src="http://assets.testsigma.com/external/product/11-2019/Detailed_Run_Results_Testsigma.png">

If you’d like to learn more about this in detail, create a <a href="https://testsigma.com/signup">free trial</a> account with <b><a href="https://testsigma.com">Testsigma</b></a> for 30 days and see if it works for you.