Let’s see how web application automated testing is done with Testsigma. We shall take an account login scenario using OrangeHRM (an HR and Leave Management application).
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:
- 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 and click Create.
- You can choose to add automated Test Steps from the Test Case details page that opens up.
- To add a Test Step, Click on "Create Test Step." The Test Step creation wizard opens up.
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.
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:
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,
- the application url - “http://opensource.demo.orangehrmlive.com/”
- the username - “admin”
- the password - “admin” are all test data.
(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’
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:
- The following page appears now:
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.
- 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.
The test case execution will start now.
- 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.
That's how a web application automated test case is created and run.
Happy Automation Testing!!