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

TRANSCRIPT

Hello and welcome to an introduction to Web automation using Leapwork. 

In this video, you will learn how to design web automation flows by connecting the Leapwork basic building blocks.

We are taking Microsoft Dynamics 365 as an example to show you how to automate the Sign In process for the Microsoft Dynamics 365 application. 

We suggest you use this as an example and automate a similar process in your application to get the most benefit out of this lesson.

Let’s double-click on the Leapwork shortcut to open it. Here is how Leapwork Looks after it is fully loaded. To start with, you need to create a new flow, Click, New from the left menu 

Click on Flow and give a meaningful name. As you can see, you begin with a START block.

Here with Leapwork, we have an option of Record and Play, So we do the recording of our steps to create our first flow.

To start the recording, we need to drag the Start Block’s green connector and leave the mouse. 

We get the ‘Add Building block’ menu , you can see the ‘Start Recorder’ option on the top, Select the Start Recorder option and you can see the recording started,  On the bottom left corner, we start getting the Recording button.
Hover on the Red dot and Click on the ‘+’ icon. We got the option to ‘Start the Browser’ or the application. Here we choose ‘Start Web Browser’ to launch the URL in the Chrome Browser.

The selected browser is ‘Chrome’ and Enter the URL in the ‘Web Address (URL)’ text field.
After entering the details Click on the ‘Start’ button.

It launches the browser with the given URL.

Hover on the page, we can see leapwork starts Capturing the elements. 

Now Capture the ‘Sign In’ text field and select the ‘Type Web Text’ block from the list of blocks. 

Enter the email id in the “Type Value” field: “phyllis@pmgdemo.onmicrosoft.com” and Click on ‘Apply’ button. This will record the step and shows the entered data in the application.

Capture the ‘Next’ button and select ‘Click Web Element’ from the displayed option.
Select ‘Apply’ button.

Capture the text field and select ‘Type Web Text’ block from the list of blocks. 

You can expand this field and set the password as hidden rather than plain text by changing the ‘TYPE’ value to ‘Password’ and click on ‘Apply’ button.

The data entered in the text field is masked now.
Capture the ‘Sign In’ button and select the ‘Click Web Element’ from the displayed option and select the ‘Apply’ button.

Capture the ‘No’ button and select the ‘Click Web Element’ from the displayed option and select the ‘Apply’ button

Excellent – it works. And we are Signed in
Let’s stop the recording and save the recorded steps by hovering on the Red dot displayed on the bottom left corner of the screen (which is by default placed at the bottom left corner) and Click on tick icon.

Here the recording is stopped, and the recorded steps are visible on the Canvas. 

Please note, all blocks are connected with the Green Connector pointing to the direction of execution of the flow, this means the flow will execute the sequence defined by green connectors.

Before moving further let’s do some changes on the Leapwork Screen:
To look the whole block on a screen, use ‘Zoom to fit flow’ icon from the top bar.

Now we can see the complete block.
Minimize the left panel by clicking on the arrow at the left bottom corner.
Ahh screen looks good now, let’s continue the flow. 

Now, to prove that the flow works, we need to verify something after the Sign in. An easy way to determine this is to find ‘PC’ which is the user initials of our user name “Phyllis Causer” in this case.

Here, we will use a find Web element block to capture the PC inital. This block doesn’t do anything, except verify that it can see the element.

To continue adding the Steps to complete the flow, again drag the Green connector of the last block and select the ‘Start Recorder’ option.

Now we can see the recording is started.

Capture the Username displayed on the top right corner of the screen, here it is “PC” and select the ‘Find Web Element’ from the displayed option.

Now stop the Recording by hovering on the Recording option and Click on the tick i.e. Save and Close Recorder.

Now to get the Pass after the successful execution, add the ‘Pass’ block as the last block – otherwise flow will fail by default.

Passing means – the flow must Sign me in and find evidence that I’ve been Signed in to pass.

To Add the ‘Pass’ block at the end of the flow, drag the Green connector of the last block, you get the ‘Add new building block’ , there start typing “Pass” and select the ‘Pass’ block from the selected blocks.

Now the flow is completed. Let’s execute the complete flow by Clicking on the ‘Run’ button.

Once the execution is successfully done we will 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.

One can see the complete Step by step execution by clicking on the activity log, which shows the Time, block name, and message in the logs.

When we click on the individual log entry the video of the application displays the state of the application during the execution with the field highlighted in green color on the video.

At the same time, the block under execution is highlighted on the Canvas with an orange border, this helps in verifying and debugging the flow.

The last log entry shows the state of the flow it is either Fail, Pass, or Done. In this case, our test Passed.

In this video, we learned, how to create a basic Sign-in flow, and how to use Canvas to debug the flow at a high-level using activity logs.

Now try creating this simple Sign-in flow in your application to experience how easy is to build your own flow with Leapwork.

Conclusion

If you want to learn more, check out our on-demand webinar on the best practices for web automation with Leapwork.