WEB AUTOMATION - Lesson 1: Create your first web automation flow

  • How to design web automation flows by connecting the LEAPWORK building blocks. 
  • How to use the most common building blocks for web automation: Click, Find, and Type Text.
  • How to verify a flow by using the "Run case from here" feature.
  • How to use the recorded video, the activity log, and the highlighting of active building blocks to debug a flow.
Go to next video.

You will learn:

  • How to design web automation flows by connecting the LEAPWORK building blocks. 
  • How to use the most common building blocks for web automation: Click, Find, and Type Text.
  • How to verify a flow by using the "Run case from here" feature.
  • How to use the recorded video, the activity log, and the highlighting of active building blocks to debug a flow.
Go to next video.


Welcome to the first lesson in web automation with LEAPWORK.

In this lesson we will go through the basics of LEAPWORK and build a small web automation flow.

The first automation flow looks like this:

- Show flow

When I run the flow, a browser will open and navigate to a LEAPWORK demo web site.
On the web site it will click a login button,
fill in credentials in the login form
and verify that the login succeeded.

Let's start with the beginning.


Automation flows in LEAPWORK are made up of building blocks, and you design and maintain the flows on the design canvas.
When you create a new flow, you only have one building block to start with. The Start building block.

You can move the building block around on the canvas, and you can zoom and center using the buttons in the lower right corner of the canvas.

When we build a flow we start by pulling the connector on the start building block.
The connector is flexible and we can add the next building block where ever we want.
When I release the connector, the building block menu pops-up and shows all the categories of building blocks.

I can either open a category and select a building block or just use type ahead if I know the name of the building block.

In this case I'll open the web blocks and select the Start Web Browser building block.
As we can see there is a green wire pointing from the Start block to the Start Web Browser block.
This tells the flow to start executing the Start block,
and once finished,
hand over the execution to the Start Web Browser block.
So you could say that the green wires drives the execution of the flow.

All the web blocks are using the Selenium WebDriver as the engine, so when ever one of the web blocks executes as part of a flow
it is actually producing Selenium code under the hood.

The Start Web Browser building block is in most cases the first building block added when doing web automation.
In the block you can select which browser to use for the test case, and you can specify the URL to navigate to.

In this case we will use Chrome and specify http://leapwork_demo as the URL.
Now we have a small scheleton for a flow that will open a browser and navigate to the demo web site.

Once the web page is opened we want to click on the "Login" button, as shown in the beginning of this video.
To do this we add a Click Web Element block after the Start Web Browser block.

This block will click a web element when the flow is running, and we can select the element by clicking
"Select web element to click".

When we click, the selected browser opens and navigates to the URL specified.

When the page is fully loaded, it goes into the so-called capture mode,
which means we can now use the mouse to easily select the element we want to click as part of the flow.
Hovering a selectable element on the web page, will highlight the element with a blue border.

We select the Login button and click with the mouse.
This captures the element back into the building block and an image of the element is shown in the building block.
The selection is based on object inspection which means the element is identified by a unique property, like the ID or name of the web element.
The image of the object is to make it easy to understand what the flow is actually doing.

Let's run the flow.

- Run flow

It's called a preview run when we start the flow from the editor.
After the flow has run we get access to a video recording of the flow,
and we can follow the execution of the flow
by watching the orange border around the building block as the video plays.

We can also see the activity log, and by clicking the individual log entries we can see which building block
was responsible for writing the individual log entry in the editor window.

The flow ended in status Fail, which is the default if we are not explicitly telling the flow how to succeed and end in status Pass.
More about that later.

If we look in the browser, we can see that clicking the login button opened the login form.
The next part of the flow is to insert the username and password and click login.

To insert text into the field, I add a Type Web Text,
Capture the email field,
and insert an email address.

Notice that we are using the same browser that was opened from the preview run, to capture elements from.

This block insert the text specified at the point of focus - in this case in the username field.

Instead of re-running the entire flow to verify that is works, I can instead right click the Click web element
and select "Run case from here". Again LEAPWORK will use the open browser and just run the flow from the selected building block.
In this case clicking the field and inserting the text.

The ability to add a few building blocks and then verify them in the context of the open browser
makes it very fast to develop new flows. You work through the process a few blocks at a time and keeps verify that it works.

I will do the same with the password field. Start by clicking inside the field,
followed by a Type Web Text to insert the password. In the case of a password,
I can choose to expand the building block and select the type password.
This will hide the actual password and show dots instead.
Most building blocks have more features and functionalities when expanded.
Press F1 on the selected building block to get all the information about that particular block.

The last thing on the login form is to click on the "Login" button,which is handled by a click Web Element.

I'll just run the flow from the password field, and we end up seeing the confirmation screen.

In any type of flow it is always important to understand the success criteria.
In other words, how can we as part of the flow prove that the flow ran as expected.

In the case of a login flow, we would look for something that could prove that the login actually
happened. This could be a confirmation message, a picture of the user logged in or simply a name
on the screen.

We are using a Find Web Element to capture the name users trivial name from the screen.
This block doesn't do anything but stating whether an element can be found or not,
so it's often used to assert if a flow ended successfully or not.

The last block to add is a Pass block. Per default a flow in LEAPWORK fails,
if it doesn't end in a pass block.
This means that if anything unexpected occur that prevent the flow from reaching the Pass block
the flow will end in status Failed.

I'll rerun the entire flow by pressing the play button at the bottom of the design canvas.
This opens up a new instance of the selected browser, free of cache and cookies,
and we can see the flow succeeding and ending in status Pass.

In this lesson we looked at the basics of building an automated flow with LEAPWORK.
We looked at building blocks, and how to connect them using the green connectors, to make a flow.

We also looked at some of the most used building blocks for web automation: Click, Find and Type text,
and how we could add the blocks and verify them using the "Run case from here" feature.
Using the recorded video, the activity log and the highlighting of active building blocks showed how
easy and straight forward it is to debug a flow.