.svg "Leapwork")
TRANSCRIPT
Welcome to the fourth lesson in web automation with LEAPWORK.
In this lesson we will focus on setting values in a form
and how to work with the different types of field and controls in a web page.
We will use a page that is familiar to most people
and that serves as a good example of a web form: the Facebook registration page.
We start with a Start Web Browser block with facebook.com specified as the URL.
On the registration form we will start by adding a value in the first name field
using a Type Web Text block. Pretty simple ad it works for all text fields.
We do the same with the Last Name field.
For the Password field we can do it a bit different.
Again we use a Type Web Text block and capture the field,
but instead of hard coding the value, we can use a Generate Password block
to give us a random text value.
Expanding the Generate Password blocks reveals a few parameters
to configure the random password.
The next fields is the birth day, which is a combination of 3 dropdown fields.
We will use the Set Web Dropdown building block to handle this type of fields.
First we capture the dropdown field, and then we have a few options for setting the value.
$$$ Powerpoint
If we look at a dropdown field, it is specified in a SELECT tag on the web page
with a number of Options tags included inside the SELECT tag.
We can select a value in 3 different ways:
Either select it by the value property, in this case "Jan", "Feb" etc.
Or select it by the text shown for the different options, in this case "January", "February" etc.
The last way is to set it by the individual elements index in the list.
We will set it by the text we can see, so we set the Action property to "Set by text"
and insert "Oct" as the text.
We do the same with the day and the year.
(Insert 2 set web dropdowns).
We now have one field type left in the form - the radio button
This field type is handled the same way we would handle a checkbox.
Simply just use a Click Web Element and select the right option.
Let's try to run the flow from the start.
We can see all the values inserted into the form.
But what if we want to read the data from an external data source, like a database.
How do we do this for these controls.
Well let's start by adding a database block and add in the necessary query.
I have a local database running which contains some sample person data,
we can use for this demo.
When I click refresh,
we can see all the available columns returned from the query,
exposed as blue properties.
We'll start by connecting the text fields - usually pretty easy,
but keep the password. We still want this to be auto-generated for each run of the flow.
For the birthDay, we need to extract the year, month and day from the date in the database,
in order to use them as input in the 3 Set Web Dropdown blocks.
We can use a Set Date/Time block for this.
We add the birthDate field as input to the block,
and by expanding the Date/time property we can get the individual values of the birth date.
The month in the database is not specified as the name of the month,
but as the number of the month,
so we need to change the Action from 'Set by text' to 'Set by value' instead.
For the day and the year is just as straight forward as with the text fields.
The gender returned from the database is a number.
1 for females and 2 for males.
This is a bit more complicated to handle,
and we need to go into the strategy editor to handle this.
When we look at the strategies for the captured radio button,
we can see that strategy number 2 includes the actual value set in the radio button.
1 for females and 2 for males, matching the data coming from the database perfectyl.
Insead of the value we insert a dynamic field and click save.
Then we connect the gender to the Click Web Element block which is the last field in the form.
Let's try to run the flow with the data from the database.
$$$ Run the flow
As we can see all the fields were set as expected.
The last little details would be to transform the form part of the flow into a reusable sub flow.
I select all the blocks that sets the values, right-click, and select "Create Sub flow".
I name it "Facebook registration form" and click Save.
To make it easier to use I open the sub flow and rename the input parameters.
Looking at the flow now, its simple and easy to overview - a good example of a sub flow.
In this lesson we looked at some examples of how to set values in a web form.
We looked at simple text fields, dropdowns and radio buttons
and saw how we can use the database block to drive all the values dynamically into the web form.
At the end we created a sub flow handling all form interactions,
making the actual flow simple.
Thanks.