From a newbie to a test automation rock star, vol. 3

Tihomir Babić
6 min readNov 7, 2019

--

Creating a web test using the test recorder

Welcome back to our series! I hope you’re feeling comfortable with what we’ve learned so far. Still not feeling like a rock star? Don’t worry about that, AC/DC was famously singing:

„It’s a long way to the top if you wanna rock’n’roll”.

I think they know what they were singing about. But they were also playing and having fun at the same time. That’s exactly what we’re going to do this time: play and have fun.

We’ve covered some basic theory in the latest article and we’ve also installed TestProject Agent in our first article. I think now we’re ready to see what this tool can do. Let’s create our first test!

Recording test steps

We’re going to create and perform Web tests. TestProject is compatible with the following browsers:

· Chrome

· IE

· Edge

· Safari

· Firefox

However, since we’re going to use Recorder to create our first step, please switch to Chrome. The Recorder is compatible only with this browser for now (but for executions of your tests you can use any of the above mentioned supported browsers).

Let’s now log in to the TestProject and start the TestProject agent that we’ve already installed. If you’ve just started following us, please go back to the first article and follow the steps described.

Picture: Tihomir Babić/screenshot

Once you’ve logged in, your screen should look something like this.

Let’s now click on „Add a project“ to create a new project. We will use this project to save all our tests. Let’s give a name to our project, e.g. „TestProject rockstar“, and let’s write a short description, e.g. „Becoming a test automation rock star“, as shown below.

Picture: Tihomir Babić/screenshot

Click „Create“ and your next screen should look something like this:

Picture: Tihomir Babić/screenshot

By clicking „Create a test”, a new screen will open:

Picture: Tihomir Babić/screenshot

We said that we’re going to create a Web recorded test, so let’s click „Web“ and then „Next“. Now you’ll see the next screen like the one shown below. Let’s name the test, e.g. „FirstWebTest”, and write a short description, e.g. „TestProject test web page“. Click „Next“.

Picture: Tihomir Babić/screenshot

This will lead you to the next screen.

Picture: Tihomir Babić/screenshot

When you click on „Web applications“, this will be the next screen. Everything will be blank because we didn’t use any web applications yet.

Picture: Tihomir Babić/screenshot

Clicking on „Add a new application for testing“ will lead you to the screen shown below. Under „Name“ let’s type „TestProject example site“. Under URL copy the following link: https://example.testproject.io and click „Finish“. The next screen will look like this.

Picture: Tihomir Babić/screenshot

By clicking „Next“ we will get three options to create a test:

· Record

· Edit

· Blank Test

We will use the recorder, which will allow us to easily create the steps that we want to perform in our first test. No coding knowledge required, you’ll see how simple it is to use. Even I know how to use it, that’s how easy it is!

Let’s now click on „Record“ and then „Start Testing“.

Picture: Tihomir Babić/screenshot

Then the recorder will open in a new Chrome window. It should look like this:

Picture: Tihomir Babić/screenshot

Now we’re going to create a test which will test if the logging in is working properly. If you click the „Full name” box, this will automatically add a step to your recorder, which I marked by the yellow box in the picture below.

Picture: Tihomir Babić/screenshot

If you hover above the „Full name” box with your cursor, you’ll see the instruction that says pressing double Shift will freeze the element.

Picture: Tihomir Babić/screenshot

Let’s do exactly as told, which will allow us to uncover some interesting things we can do with the frozen element. We will select „Actions“ and decide which action we will use.

Picture: Tihomir Babić/screenshot

We should select „Type text“, which will allow us to edit the test step. If you scroll down a little, you will see the „Input parameters” section where you can decide what name you want to be typed in the „Full name” box, as part of our test. Type whatever the name you want, I’ll type „James Brown”. Is there any specific reason for that? Yes, I like James Brown. By the way , you could also pass this as a parameter by clicking the Plus icon and easily enhance your test to become a data-driven test by attaching a CSV file (with different values) to your test from the project area.

Picture: Tihomir Babić/screenshot

Click „Create“. By doing this you will add the step to our recorder and you will see the „Full name“ containing exactly what you typed as your input.

Picture: Tihomir Babić/screenshot

Let’s now create a test for the „Password” box. The same as above, clicking on the box will add the new step. Follow the steps as above and under „Input parameters” type in „12345" as a password.

Picture: Tihomir Babić/screenshot

Click „Create“ and the recorder will do the rest. Now we have 5 testing steps created.

Picture: Tihomir Babić/screenshot

The last step will be to check if logging in works with this name and password. Simply click on „Login“, which will automatically add a step.

Picture: Tihomir Babić/screenshot

This is enough steps for our first test. Let’s now stop recording by simply closing this second Chrome window that opened when we started recording. You will see the screen containing the test we’ve just created by recording steps. Hovering over it will give you some options that you can do with it. Let’s click „Run”, kick back and enjoy watching our first test being performed right in front of our eyes!

Picture: Tihomir Babić/screenshot

If everything went smoothly, you’ll see a small green chart icon (linking to the test’s full report dashboard) and by hovering above it you will see the time when the test was last run and the status, „Passed“ in my case.

Picture: Tihomir Babić/screenshot

Simple and fun, right? Almost like starting to learn some black art? According to Lorca, it’s more or less the same:

„Besides black art, there is only automation and mechanization.“

Conclusion

In this article, we’ve started to learn our way around TestProject. We’ve created our first project, and our first web application test. We’ve done it using the TestProject Recorder and test site. The idea was to test if it’s possible to type in the name, the password, and log in to the page. After simply recording all the steps, we’ve run it again and it was completed successfully. In the next article, we will add some new steps to our test, check some other possibilities and actions, and dive deeper into the TestProject possibilities.

Keep on rockin’ in an automated world!

--

--

Tihomir Babić

Data Analyst and Reporting Expert turned Database Designer and Developer from Zagreb, Croatia. Recently started learning about test automation.