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 website.
On the website 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.
*** PROJECTS, OBJECT BROWSER ETC.
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 drive the execution of the flow.
All the web blocks are using the Selenium WebDriver as the engine, so whenever 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 skeleton for a flow that will open a browser and navigate to the demo website.
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 it 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 user's 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 occurs that prevents 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 end 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 straightforward it is to debug a flow.
IIf you want to learn more, check out our on-demand webinar on the best practices for web automation with Leapwork.