Go back

Your first UI Automation Test Case with Katalon Studio

Katalon Studio (2)


Katalon Studio is primarily a tool that allows us to perform different types of automation testing, ranging from UIAPI, or Mobile to pure scripting test case writing, all of which include very simple and complete graphical user interfaces in conjunction with lots of tools that are already incorporated, so we don’t have to trawl the internet for dependencies and/or tutorials on how to use/install them.This is the first part in a series of articles where we will learn how to take screenshots, configure the free cloud feature that comes with Katalon Studio, and much more besides.

Katlon Studio 1
Katlon Studio 2

How to use Katalon Studio?

For this article we are going to focus on how to set up our first web UI test case. This is a good tool for beginners that want to start implementing some kind of automation to free up some time during deployments by executing an automated test suite for quick sanity, smoke or integration testing with their teams.So, let’s get started, first things first, we need to get the Katalon Studio software, which we can do by going to their official website.
Katlon Studio 3
In order to get the software we first need to register using a business email address: that means no Gmail, no Hotmail, etc. You should log in with something like myemail@myowndomain.com.Once we are in, we can click on the download button. We will be redirected to the download page where we can select the platform that we are using.
Katlon Studio 4
There is almost no difference in the app’s UI between platforms. For this article we are going to be using the Windows  version.

Execution of the Program

Once downloaded, we get a .zip file that we need to unzip, which will create a folder which contains the program to be executed.
Katlon Studio 5
Katlon Studio 6
That’s it! Now we just need to execute the Katalon.exe file (for macOS a regular installation will be needed).
Katlon Studio 7
The first time we execute this program it will activate and it may ask for our credentials,
which are the email address and password that we used to create our account on the Katalon Studio website.If it asks, just add them and activate the license, and it won’t ask for them again next time.And we’re in! We are presented with a screen that gives us some information about what we can do with the software, and some links to tutorials, plug-in stores, etc.
Katlon Studio 8

Let’s get started

With everything working, let’s start creating our first project in Katalon Studio. Relax- it’s really easy!In order to get started, we need to click on the new project link that’s in the top left panel.Take a mental note of this because we are going to be using it a lot.We are going to:

  • Name our project
  • Select web from the type options
  • Leave project blank
  • For repository url we won’t enter anything (although keep in mind that you can have this project within a repository in github, bitbucket, etc.)
  • Select the location where we want to save our local project
  • Add a description if we want to.
  • Click on ok

Katlon Studio 9

Record your Project

In newer versions of Katalon Studio we will be asked to configure or select testOPS, which is a cloud dashboard that tracks and gives us more information on the execution of our scripts. We’ll come back to this later in this article.

Katlon Studio 10
Just click ok and that’s it, we have our new project created and ready to start automating. Since this is a simple test, we are going to be focusing on recording and executing our test case so, for this, let’s just focus on the areas highlighted in yellow.
Katlon Studio 11
Now let’s use the web recorder, this opens a “recorder” where we should first enter the URL we want to record, and then just click the browser icon.After doing this, a web browser will be opened on our machine, and it will start recording everything we do in it: what we click on, the forms we fill in, etc.
Katlon Studio 12
You’ll notice first that if you click on the arrow next to the chrome icon, you’ll get a list of browsers that are available to work with. In this article we are going to be using the latest version of Chrome, but feel free to use any of the ones from the list.
Katlon Studio 13
Before it starts recording it may prompt you about an update for your chrome driver. This driver is the one that allows us to control Chrome and it’s updated in almost all new chrome versions that are released, so just click OK and then click on the chrome icon again to start recording, as the driver update will stop our first recording.
Katlon Studio 14
Now you will see the browser opened to the URL we entered, so just use the website as you wish. For this article we did the following:

  • Opened github.com
  • Clicked on the search box in the top right
  • Wrote AUTOMATION in it
  • Hit the ENTER key on our keyboard
  • Clicked the octopus icon in the top left that redirected us to the homepage

As you can see, all these actions were recorded in the order we did them.
Katlon Studio 15
Now, let’s just click on the stop recording button in the top right of the recorder. You’ll notice that a new step was automatically added which says close browser, this is just to close the browser window that was automatically opened, to avoid having lots of them open on our machine.
Katlon Studio 16

What Happened?

So, what now? Well, how about a replay of what we just did? But of course, we won’t do anything. Just click the green play button in the web recorder, sit back, and relax.That was easy, and somewhat “relaxing”, right?  Now, once this is complete the section at the bottom of the recorder will display a log with information regarding the execution, which is useful in case it doesn’t go as planned and we need to check what happened.
Katlon Studio 17
That’s not all of course, as the recorder allows us to edit the test case we have been creating, so how about setting the size of the browser window to a different screen resolution?This is easy and we can do it without leaving the recorder screen. We just need to click on the arrow that’s next to the ADD button and we will see a dropdown menu with several options. We are going to use web UI Keyword. After clicking on it you will notice that a new item is added at the bottom of the list. It’s a drop down box, so we are going to search for and select the option that says set view, port size, and hit enter.

Katlon Studio 18
Katlon Studio 19
Katlon Studio 20

Previous
Next
Great! Now let’s just double click and set the size of the browser window. In our case we’ll use 1920×1080
Katlon Studio 21
Click ok, and we’re done.
We are at the very end of the test case, and we need the window to set that size right after we access the URL we selected. To do this we just need to click the move up button located at the top of the recorded actions while we have our view port step selected. Keep clicking the move up button to move it into third position.
Katlon Studio 22

How do we Save our Project?

We’re almost done, now click on the run button and relax, notice that the window is opened, the url is loaded and then it changes size to the one we configured, before continuing with the rest of the steps.That’s it! Now we need to save, and don’t worry, if you need to make any changes you will be able to do so but in the script window, so just click on the save script button.
Katlon Studio 23
In this window you will be able to arrange all the objects you just recorded and keep them more organized. For now just click ok, you will be able to make these changes later whenever you want.
Katlon
And here is the view we are going to be using to maintain our test cases. We can also execute them whenever we want just by clicking on the green play button.
Katlon Studio 25
From this list you are able to choose any web browser (installed on your computer) you want, but one of my favorite features is the possibility of running it in “headless” mode,
so what does that mean?Well, it’s the ability to run our test case without seeing the browser being opened, navigating and doing what we configured it to do. It just runs in the background on a “virtual” monitor. You can choose this option so your machine isn’t taken as hostage during the execution of a test case.And that’s it for this part. I hope you enjoyed this article and that it helped you improve in your work as a tester.

Martin-Navarro-mail

About the Author

Martín Navarro is a detailed Quality Assurance professional with full system development lifecycle experience, including designing, developing and implementing test plans, test cases and test processes.