.svg "Leapwork")
TRANSCRIPT
Welcome to Lesson 4: Automating form fields and web controls in web automation with Leapwork.
In the previous lesson, we looked at the data-driven approach and understand how to use Excel as a data source for a flow.
In this lesson, we will focus on setting values on a web page and working with different types of fields and controls. We will be using a D365 page that contains various elements to cover a wide range of blocks available in Leapwork.
Let’s move to the Leapwork and see how we can handle multiple fields and controls on the D365 page,
To begin, I have already added the steps utilizing a Sign In sub-flow which is created in Lesson 2 to reach the "Generate invoice batch Processing" pane.
We can reach the "Generate invoice batch Processing" pane, by selecting the ‘Subscription billing’ from the Homepage, Expand the Schedules option, and Billing schedules will be selected by default, else expand the same. Click on Generate Invoice batch processing link.
We can add the blocks either by recording the actions or without recording, in this case, we will proceed without recording to allow for easy adjustments in the flow if needed.
Execute the flow as we need to add building blocks without recording, to do that, the Browser window should be opened previously using the Start Web Browser block.
The flow is executed, and the "Generate invoice batch Processing" pane opens.
The first field on the page is a dropdown labeled "Filter By" with options "Start date" and "End date." Since it's a dropdown, we can use the "Set Web dropdown" block to handle it.
To work on the Canvas, click on the "Edit" button.
To add the ‘Set Web dropdown’ block, we drag the green connector from the last block, and start typing "Set Web dropdown," and select the block from the options.
Next, we need to capture the dropdown element by clicking on "Select Dropdown element" in the block.
Hover over the "End Date" option available under ‘Filter By’ field on the page and click on it to select. The type of element should be displayed as "Input" in the Capture Window at the bottom right corner of the screen. Once the element is captured, it will be displayed as an image on the block in Leapwork.
To proceed, we expand the "Set Web dropdown" block by clicking on the "Expand" option at the bottom of the block.
Inside the expanded block, there is an attribute named "Action" that is set to "Set by value" by default.
Clicking on the dropdown menu, we can see two additional options: "Set by text" and "Set by Index." We will explore these options further.
To better understand the options, we open the Strategy Editor by right-clicking on the element or its image in the block and selecting "Edit web Element."
In the Strategy Editor, we first validate the element by clicking on the "Validate" button.
The element will be highlighted in red on the application.
In the leftmost pane of strategy Editor, we can see the elements listed as 'li' elements. By selecting one of the elements from the left pane, we can see the attributes in the middle pane. We find the "index in parent" attribute in the parent element, which we can use for "Set by Index." The "Content" attribute can be used for "Set by text." Additionally, some elements may have a "value" attribute that can be used for "Set by Value."
Here we are going to use the ‘Set by text’, for End Date we have “End date” and for Start Date, we have ‘Start date’ in the content attribute of the element.
After closing the Strategy Editor, we return to the Canvas. We select "Set by Text" under the "Action" menu and provide the value "Start date" for the dropdown.
Moving on, the next field is a toggle button for "Consolidate by customer" lies under “Consolidation” which is set to "No" by default. We need to set it to "Yes."
To handle this, we use the "Click Web Element" block.
Drag the green connector from the "Set Web Dropdown" block, start typing "Click Web Element," and select the block.
Capture the web element by right-clicking on the property and selecting "Capture new web element." Hover over the toggle button on the page and click on it to capture the element.
The element is captured, and the image is displayed on the block in Leapwork.
The next block we are going to look at is the "Type Web Text" block, which is used to enter text in text fields.
We will work with the "Task description" field to add text to the page. To do this, add the "Type Web Text" block to the flow.
Capture the web element by right-clicking on the property and selecting "Capture new web element."
Hover over the text field on the page, the type of element should be displayed as "Input" in the Capture Window at the bottom right corner of the screen.
click on the selected field to capture the element.
Once the element is captured, it will be displayed as an image on the block in Leapwork.
In the "Type Web Text" block, provide the desired text in the "Text value" attribute, such as "Task Demo 1." Additionally, to clear the default text in the field and enter the provided text during execution, expand the block and check the "Clear Field" checkbox.
Now, let's move on to the next action on the page. Click web element. We need to click on the "Recurrence" tab, which can be accomplished using the "Click Web Element" block.
Add the “Click Web Element” block to the Canvas and capture the "Recurrence" tab element by following the same process as before.
After adding the block, the "Define Recurrence" form opens, where we have radio buttons to handle.
Let's work on selecting the "RECURRENCE PATTERN." We can use the "Set Web Radio Button" block to select the radio button.
Add the ‘Set Web Radio Button’ in the flow, Capture the element using the "Capture New web Element" option after right-clicking on the property or selecting the Radio Button element field of the block.
Select any one radio button that lies under the “Recurrence Pattern”.
The "Set Web Radio Button" block also has the same options under the "Action" attribute as the "Set Web Dropdown" block.
In this case, we will use "Set by Text" as the action attribute and set the value to "Hours."
We can refer to the Strategy Editor and check the value that lies under the ‘content’ attribute for all the radio buttons available as we did earlier.
To save the entered values, we need to click on the "OK" button.
For this, we add the "Click Web Element" block. Capture the "OK" button element by following the same process as before.
Finally, to save the "Generate invoice batch processing" details, we have to click the "OK" button.
Add one more "Click Web Element" block to handle the final "OK" button.
Once the "OK" button is clicked, we will be navigated to the home page, and a message will be displayed at the top of the page stating,” The Task Demo 1 job is added to the batch queue."
To confirm the successful completion of the task, we need to scrape this message and perform verification.
In the next lesson, we will learn how to use the "Get Web" blocks in Leapwork to scrape data. For now, let's add a "Pass" block, save the flow, and execute it to see how it works.
Now, the flow gets passed.
In the application we can see the message is displayed The Task Demo 1 job is added to the batch queue."
In this lesson, we have learned how to automate the form fields and web controls, in the next lesson we continue with this flow and will learn how to scrape the data from the Web application and use it further in the flows.
Keep practicing and exploring the various capabilities of Leapwork.
Thanks.