Automate Academy Tasks
Automate Desktop

Web Browser Automation: Login

Chapter 6 | Automate Tasks

Learn how to use web browser actions to input your username and password credentials to login to a website. Brigette Matz, Automate Trainer/Consultant, gives you a guided tutorial on setting up a website login task. In this video you’ll learn how to:

  • Locate the web browser actions
  • Use the Open and Create Session actions to automatically open a web browser and start a new session
  • Use the Set Value and Click actions to automate inputting a value into a web browser and clicking on buttons 

Watch this chapter now to learn how to get started.

 

Transcript

Brigette:          In part one of the website automation tutorial, we will use the automate web browser actions to input our user name and password credentials and log into a website. We will begin by locating the web browser actions from our actions menu. We will do this by typing in the word "web" into our search bar. That's why [00:00:30] for the website login we will be using the "open" action to open our browser, the "create session" action to allow us to continue working with that browser, the "set value" action to input our username and password and the "click" action to complete the login. We will begin by dragging and dropping the open action into our task builder. Notice that you have different options for the browsers you can open with [00:01:00] automate. However, we suggest using Internet Explorer for all website automation, as it is the most compatible option.

                                We will then paste in the URL we want to open. In this case, we will visit and login to our community portal webpage. Let's test this first step to ensure the browser will open and fully load before [00:01:30] we begin inputting our login credentials. Click the run button. As you can see, the website did open and load successfully. However, if we look back to our automate task builder, we will see that this step resulted in an error with the cause being that the webpage could not be loaded. Sometimes [00:02:00] automate throws this error because it has a predetermined time out period for the page to load. If automate does not see the page load within it's preset timeframe, the error will occur. We can sidestep this error in a couple of different ways to allow automate to move on with the rest of this task.

                                The first way that we will work around this error is by editing the step. We can set "on error" options to allow the task to continue running after the error occurs. We'll select "continue to [00:02:30] next step" from the after error event dropdown. The other workaround that we will use is by editing the original preset properties of the step. Under the advanced options we will deselect the "wait until the page is completely loaded" option. Then we will add a manual wait time to allow automate to account for the time it takes for this webpage to load rather than using the predetermined set time. [00:03:00] We will go ahead and add a wait time here. We'll type in the word "wait" and using our waiting actions, we're going to wait for a specific duration of time. In this case we'll wait for five seconds for that page to load.

                                [00:03:30] Let's run this again to see how it works. As we see here it did take some of [00:04:00] the additional time to load that page. If we go back to our automate, we'll notice that the task did not result in an error in this case. The next step is to add our username and our password to the given fields and to click our sign in button. We will again locate our web browser actions within our automate actions pane. Using the "create session" action will ensure that automate is using the correct URL and webpage [00:04:30] to input the username and password information. Although we created browser session one in the first step when we opened our web page, we'll start using browser session two for the remaining steps in this task.

                                We will use the magnifying glass to select the window. As you can see, the green box appears surrounding the window. This will ensure automate locates that window and the correct URL. [00:05:00] We'll click "Okay" to save the changes. Then we will begin using the "set value" action to input both our username and our password into the designated fields. Drag the "set value" option into the task builder. We want to make sure we change the default session to browser session two. Again, using the magnifying glass will allow automate [00:05:30] to find the page with which it is interacting. Once we see the green border around the selected window, we can release our mouse button. We will then use the HTML locator to draw a blue border around the field in which we will place our username.

                                Notice in the bottom right corner of the screen we'll see identifying tags such as the text box for control, the identifier as username and the HTML tag itself as input. [00:06:00] When I release the mouse button, automate does put in the username. You'll see here that it puts in the input and the other attributes located on that screen. Automate will automatically select the attribute that it needs, however, you can toggle additional attributes to make sure that automate finds that field. At the bottom of this window we'll select our interaction. Here's where we will set the text or [00:06:30] our username. Let's put in another wait time here to ensure that automate has time to insert our text in the username before moving onto the password field. We will use our wait action again and this time we will just wait for three seconds.

                                [00:07:00] Now we will put our password in the password field. We will use our web browser actions and we will do the "set value" option yet again. We'll make sure to change this to browser session number two, we will use the magnifying glass to select the window we're interacting with and we will use the "drag" option [00:07:30] to pinpoint that HTML element, the fields that we're inputting our passwords into. You may have to move it around a little bit to ensure that you get that password text, password input option as the identifier. Automate will just use a couple of seconds to input that information and again, you will see here that it's only selected the identifier as the password. However, you could use the HTML tag, [00:08:00] the "locate by name" or any of the other attributes to ensure that automate locates that field.

                                The next thing we'll do is we'll add our password for the input fields and click "okay." After that, the last piece will be to click that sign in button. So I'll have automate locate that field and send a click to that button itself. We'll put in another wait time here just to ensure that automate gives itself time [00:08:30] to input that password before it moves to the button itself. We'll copy and paste that wait time and we'll drag it down to the bottom of our task. This time we'll use our click action, we'll drag that into our task builder, we'll make sure that we identify browser session two and again we'll use our magnifying glass to identify that window with the green border. We'll [00:09:00] use our HTML element detector to find that sign in button. You might have to move it around a little bit. As you can see, that corner box is changing slightly but when we find the information, the correct control identifier and HTML tag, automate will input those.

                                The interaction options at the bottom allow you to double click and or wait until the page is ready for input. We only [00:09:30] require a single click and since this is the last step of our task, we will leave both of those options unselected. Let's now run our task one last time for the full effect. Notice while the task is running that the green status bar in the bottom left area of the window will show us as each task step completes. [00:10:00] As we can see, automate has successfully logged us in as we're at our home page.

Ready for the next chapter?

Chapter 7: Web Browser Automation: Best Practices