welcome to the first lesson in web automation in the new book in this lesson we'll go through the basics of bleep work and build a small web automation flow and flow looks like this when I run the flow a browser will open and navigate to the Deep Web FEMA website on the website it will click a login button fill in the credentials in the login form and verify that the login succeeded let's start with the beginning all flows in the port are organized in folders start by clicking new to add a folder or a new flow in this case I add a new flow to the existing tutorial folder and give it a name less than one automation flows in debug 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 and you can zoom and pan using the buttons at the lower right corner of the design canvas when we build a flow we start by pooling the connector on the start building block the connector is flexible and we can add the next building block wherever 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 type a hit 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 now a green wire pointing from the start block to the start web browser block this tells the float to start executing the start block and once finished handle with the execution to the start web browser block so you could say that the green wires drives the execution of the float all the web blocks are using the selenium webdriver as the engine so whenever one of the web blocks executes as part of the 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 flow and you can specify the URL to navigate to in this case we'll use Chrome and specify Depot demo as the URL now we have a small skeleton for flow that will open a browser and navigate to the demo website once the web page is opened we want to click on the locking 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 elements you 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 objective inspiration 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 try to run the flow it 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 look at the activity lock and by clicking the individual lock interest we can see which building block was responsible for writing the individual log entry indeed several the flow ended in status failed which is the default if we are not explicitly telling the flow how to succeed an INT in stages passed more about that later if you look in the browser we can see that clicking the login button open the login form the next part of the flow is to insert the username and the password and click on the login button to insert text into a field I add a type web text block 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 instead of rerunning the entire flow to verify that it works I can instead right-click the type web text and select run flow from here again Lee Boyd will use the open browser and just run the flow from the selected building block in this case inserting the text into the email field 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 a new flows you work through the process a few blocks at a time and keep verifying that the blocks works I will do the same with the password field at type web text block select the password field and then specify the value I can choose to expand the building block and select the type password instead of type text 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 the particular building block the last thing to do on the login form is to click on the login button which is handled by a click web element I just run the flow from the password field and we end up seeing the confirmation screen in any type of flow it's always important to understand the success criteria in other words how can we as part of the flow prove that the flow rain as expected in the case of a login flow we would look for something that proved that the logon 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 fine webinar meant to capture the 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 deep work 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 instances 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 cash and cookies and we can see the flow succeeding and ending in status costs in this lessons we looked at the basics of building an automated flow we'll deep work we looked at building blocks and how to connect them using the green connectors to make up a flow we also looked into 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 lock and the highlighting of active building blocks showed how easy and straightforward it is to debug the flow thank you