Logging into the intranet

Now that it has opened the browser, our robot needs to log into the intranet, using Maria's credentials.

Create a new user keyword called Log in and add it to the task. If you need a reminder of how to do that, have a look at previous chapter where we did the same thing. Great! Now we have to tell our robot to find the username and the password fields on the page and fill them.

Finding a form field

You, a human being (just assuming!), can see and find things such as forms and fields on a web page. Your robot, however, lacks both vision and the ability to think. It needs precise instructions to find anything.

A web page is written in HTML (Hypertext Markup Language). It defines the meaning and structure of sweb content. The RobotSpareBin intranet is also built using HTML.

To find forms, fields, and other elements from an HTML web page, your robot needs to know their selectors. Think of a selector as the street address for an element, such as the username field on the RobotSpareBin intranet login page. These selectors along with their name and other instructions are stored in locators, in a file called locators.json, from which they can be referenced to in the code or used directly as in-line selectors. Don't worry, this will start to make more sense when we start using the locators.

If you want, you can go deeper and learn more about how to find interface elements in web applications and the concept of locators in this dedicated article.

You don't have to inspect the HTML elements during this course unless you want to. All the HTML snippets are provided right here for your convenience. Still, learning how to find and interact with elements is the bread and butter of web automation, so make some time to learn it well eventually!

Inspecting elements in Chrome looks something like this (all the major browsers provide similar tools):

This is what the username field HTML markup looks like in the intranet login form:

<input type="text" id="username" name="username" required="" class="form-control"/>

It is an input element. It has several attributes, such as type, id and name. We can use these to locate (find) the elements.

Inputting text to form fields

We need to tell the robot to fill in the login form. The Selenium library provides keywords for interacting with web page elements. The keywords we will be using for logging in are Input Text for inputting text, Input Password for inputting a password and Click Element for clicking on web page elements.

Luckily, we can take a bit of a shortcut and let Automation Studio handle some of the hard work of creating the keywords and defining their parameters for us.

Automation Studio (and VS Code Extensions) provide two tools for easy selection of elements from a web page: the Web Recorder and Web Inspector. Web Recorder records chains of actions on web pages and creates automatically keyword calls from them. Web Inspector, on the other hand, makes it easy to create individual locators for elements so that you can use them in your keyword calls.

In Automation Studio, you can find Web Recorder on the top bar, next to the Run button while the Web Inspector is opened from under the Locators panel on the left. Recorder is great for defining quickly interactions on a web page, such as filling in a form, while Inspector gives more fine-tuned options for targeting specific elements and adjusting their selectors.

First navigate to the web page address https://robotsparebinindustries.com/ and in the Inspector window, click "Record". This will start the recording of your interactions. To stop recording, you need to have the browser window selected and press the esc key on your keyboard.

Fill in the username field with maria, passoword field with thoushallnotpass and click "Log in". Now press esc to stop recording. If everything went correctly, your recording should look like the one below.

The automatically created names of locators can sometimes be not as descriptive as they could be. Let's see how to edit a locator name in the Recorder. Click pen next to the .btn text in the inspector window and again pen next to the locator name in the window that opens up and rename your locator to "LoginButton" (see image below).

Edit the other locators in the same way and save them to make sure their names match the ones below (Username, Password). Excellent! Now you can just save your locators. After saving, the keywords for typing the inputs and clicking the button get created automatically:

There is still one change we want to do to the recorded keywords: we are now using Input Text for inputting the password, but using Input Password would be a better practice, since it doesn't accidentally store the passoword text in log files when the robot is run.

You could drag the Input Password from the left sidebar and change its parameters to match the Input Text. But let's take a shortcut again. What makes Automation Studio unique is that you can move to the code view to do changes to your robot that would be more complex in the visual editor. Let's try that out.

Open up code view from the top-right corner of Automation Studio, change the password entry to use Input Password instead of Input Text and switch back to the visual view. Ta-da, you did now some coding, you're one step towards becoming a software robot developer!

After these steps, your Log in keyword should look like this:

Open up the "Insert The Sales Data..." task and run the robot one more time. You should see it opening the browser, navigating to the intranet, and happily logging in, just like Maria does. You now have a general understanding of how robots are built (define tasks and keywords, import libraries, run and iterate.). Congratulations!

Note: You should never write or commit your credentials in your robot code in a real project. Here we break that rule to keep things simple! Learn more about using credentials in a safe way.

What we learned

• You can use the recorder to interact with user interface elements on a web page.
• You have learned about locators and selectors.
• You should use the Input Password keyword to fill password fields.
• You should not write or commit credentials directly into your project. We do it here to keep things simple, but you should never do this in the real world.
• Learning how to find and interact with elements is the bread and butter of web automation.