From a newbie to a test automation rock star, vol. 4: How to better understand what you’re doing
By: Tihomir Babić
Tags: Software Testing, Programming, Testproject, Test Automation, Web Apps

From a newbie to a test automation rock star, vol. 4: How to better understand what you’re doing Tihomir Babić Nov 14, 2019·9 min read

Learn the other way to create test steps

Image by Gerd Altmann from Pixabay

In our latest article, we’ve shown how to create the first simple test by using the test recorder. We’ll continue to build on the test we’ve already created and learn more about some cool TestProject functions. We’ll show a different way to add steps to your tests and learn how to use the same basic actions and element types.

Adding steps to an existing test

Let’s login to our TestProject, start the TestProject agent and go to „Home“, which looks like this.

Image by Tihomir Babić/screenshot

You will see the project which we created in our last article. Clicking on it will open it and show the following screen.

Image by Tihomir Babić/screenshot

Among other things, it will contain the tests we’ve created. In our case, it’s only one test. Clicking it will show us all the steps that we already have created. We’ll use the recorder again, but not in a way that we learned last time: by simply clicking on elements and that way automatically adding the steps, or by freezing elements. We’ll now show the other way to edit our test.

Image by Tihomir Babić/screenshot

Click on the record button (red dot in the upper right corner) and wait until the recorder opens in the new browser window.

Image by Tihomir Babić/screenshot

We want to add more steps to this test. Since the last step we have will log us in and lead to another screen, we should run the test and then see what other steps we can add. You can run the test by pressing the „Play“ button in the upper right corner which will execute all steps. After that, you can watch all the steps being executed in the recorder.

After the test is executed, you will see the list of the steps and, hopefully, all marked in green showing that the test was performed successfully. There is a big plus (no, quite literally, there is a big plus) below, and if you hover above it, you’ll see that it’s used for adding steps.

Image by Tihomir Babić/screenshot

Click on it to open an additional screen which will allow you to create a new step.

Image by Tihomir Babić/screenshot

Under „Type“ there is „Element action“. Click on it to see possibilities. TestProject offers three types of actions:

· Element action

· Action

· Test

Image by Tihomir Babić/screenshot

We will concentrate on Element action for now. So don’t change anything for now and go back to the previous screen for creating a step. We’ll start creating new steps now. We want to select our country first. Click on „Select element“ under „Element“ (in a yellow box, marked by me).

Image by Tihomir Babić/screenshot

It opens the following options.

Image by Tihomir Babić/screenshot

Since we still didn’t use element „country“, it’s not shown in our list of already used elements. Click on plus below to add a new element. Let’s type in the name „country“, then select element type „Select“ (since it’s a dropdown menu), then select locator „ID“, and type „country“ as our ID.

Image by Tihomir Babić/screenshot

Now click on „Add element“, and the element will show in our list.

Image by Tihomir Babić/screenshot

There are details of the step.

Image by Tihomir Babić/screenshot

To check if we selected the element we want, let’s click on Find to locate the element. If everything is OK, it will blink green.

Image by Tihomir Babić/screenshot

Click on „Select action“ and select „Click“.

Image by Tihomir Babić/screenshot

We have selected all that we want so we can click on „Create“.

Image by Tihomir Babić/screenshot

This added a step to our test.

Image by Tihomir Babić/screenshot

As you can see, this way of creating tests took more time than simply recording our action and allowing the recorder to translate it into test steps. You now probably realise how great it is to have a recorder, it saves a lot of time and energy. However, we will continue to add new steps manually in this article. There’s a reason for that: we want to learn what are the names of the basic actions. That way we won’t blindly use the TestProject, but understand how things work. Yes, it’s more difficult that way, I know. However, as Alexandre Dumas supposedly said:

“The merit of all things lies in their difficulty.”

So let’s again add a new step, and click „Select element“ under „Element“ section. We’ll now see that element „country“ is already there (since we used it already).

Image by Tihomir Babić/screenshot

Click on it and then go to „Select action“ under the „Action“ section. In the search field type in „Select an option“ to find an action we want, and that is „Select an option by value“. As it says in explanation, it will select an option according to an argument that we set up.

Image by Tihomir Babić/screenshot

Select this action then scroll down on the following screen, where you’ll see a box where you can type in the value of the input parameters. I will type in „HR“. No, it’s not Human Resources, this is an international abbreviation for Croatia. That’s where I’m from.

Image by Tihomir Babić/screenshot

Click on „Create“ and you’ve added another step in our test.

Image by Tihomir Babić/screenshot

Let’s now create a new step for the element „Address“. Since we didn’t use it before, we’ll have to create it the same way we did it for „Country“. Follow the steps as in that example until you come to adding element details. Type in „address“ under „Name“, then „Textbox“ under element type, then select „ID“ as a locator, type in „address“ as an ID.

Image by Tihomir Babić/screenshot

Click on the element we just created showing up in the list and then Select action.

Image by Tihomir Babić/screenshot

We’ll choose „Click“ as our action and then create a new step.

Image by Tihomir Babić/screenshot

It showed in our test steps list. Let’s now test is it possible to enter our address. The principle is the same as previous, create a new step, select „Address“ as the already existing element. We’ll then select the action, and the action will be „Type text“. Let’s type that in a search field and select it.

Image by Tihomir Babić/screenshot

Let’s define parameters by entering the address, for example, „100 Nikola Tesla Boulevard, 10000 Zagreb“.

Image by Tihomir Babić/screenshot

Clicking „Create“ will, as we know, add a new step to our list.

Image by Tihomir Babić/screenshot

Now we want to test the „email“ element. As we already know, we will have to create a new step, add a new element. The action which will be covered in this text will also be clicking and adding text, but before that, we want to check if the textbox is empty. Let’s create an element: „email“ under „Name“, the type is „Textbox“, the locator is „ID“, and the ID is „email“.

Image by Tihomir Babić/screenshot

When selecting the first action for this element, we will choose „Contains text?“.

Image by Tihomir Babić/screenshot

If we leave input parameters blank, that means that we want the textbox to be empty.

Image by Tihomir Babić/screenshot

Create it and add a new step to our list. Let’s now create „Click“ action for the element „email“.

Image by Tihomir Babić/screenshot

Create and add a new step.

Let’s now create action „Type text“ for the same element, with example email babic@gmail.com as the input parameter.

Image by Tihomir Babić/screenshot

Creating will add a new step.

Now we’ll create a test for the „Phone“ element. We want to test whether it’s possible to type in the wrong phone number, then delete it, and then type in the right number. As in previous examples, create a new element as shown in the picture below.

Image by Tihomir Babić/screenshot

The first action we want to create is „Click“, we know how to do that.

Image by Tihomir Babić/screenshot

Then we want to type a phone number by using „Type text“ action, i.e. 061600600.

Image by Tihomir Babić/screenshot

Then we realise that it’s a wrong number. What should we do? We should use the next step that performs the „Clear contents“ action.

Image by Tihomir Babić/screenshot

Then we will add the correct phone number, e.g. 060700700, by using the action „Type text“.

Image by Tihomir Babić/screenshot

Now that we’ve filled in all the required info, we want to save it. So we have to test if the button „Save“ is working properly. Let’s create a new step, then add a new element with the following info: name is „save“, the element type is „Button“, the locator is „ID“, and ID is „save“.

Image by Tihomir Babić/screenshot

After that, we just have to add „Click“ as the action we want to perform. By clicking „Create“ we’ve added the latest step to our test.

Image by Tihomir Babić/screenshot

If we press the „Play“ button in the upper right corner, the complete test will be performed right in front of you.

Image by Tihomir Babić/screenshot

Every step is marked green, so it seems the test passed. Let’s now close the recorder browser. We can also run the test from our homepage, to see if everything is OK. Press „Run“.

Image by Tihomir Babić/screenshot

Select your agent and browser, and click „Next“.

Image by Tihomir Babić/screenshot

Then select the first option and click „Run“.

Image by Tihomir Babić/screenshot

If you carefully followed all the steps, your test’s status will be „Passed“.

Image by Tihomir Babić/screenshot

Conclusion

We’ve learned the more complicated way to create steps that forced us to pay more attention to the names of the actions, such as „Click“, „Select an option by value“, „Type text“, and „Clear contents“. We’ve also learned to create new elements and got introduced to different types of elements, such as „Select“, „Textbox“, and „Button“. That way we allowed ourselves to learn more and understand better what we’re trying to achieve by test automation.

Keep on rockin’ in an automated world!