Add some Keywords

In this chapter, you will learn about how to build your automation by using keywords and locators.

Working with keywords

In Automation Studio robots are built by dragging keywords and control structures (For, If, etc) from the left sidebar to the main editor area in the middle.

You can use both library keywords and create your own user keywords, which let you reuse code between different tasks. For each keyword, you can see brief documentation by hovering on them in the left sidebar:

Keyword Documentation

Open a web browser

First we need to open a web browser and navigate to the correct web page.

In the left sidebar under keywords, search for "browser" and drag the "Open Available Browser" keyword to the middle area. Click on the just added keyword and in the right sidebar, add as the url address "https://robotsparebinindustries.com/#/robot-order".

Open Available Browser

Click on a button

If you go to the web page address, you notice that it opens an annoying popup that is in front of everything else. We need to close it before we can start to fill out the form.

To interact with specific elements in web pages and Windows applications, you need to create locators. They are saved references to elements that can be used in your robots. Behind the scenes, the locators use technologies such as XPath and CSS to refer to elements on web pages and in applications.

Annoying Popup

To close the popup, drag a "Click Element" keyword into your task. Then, click on "Select a locator" and then "Create a new locator".

Create Locator

This opens up the "Robocorp Inspector" — a small tool that runs as part of Automation Studio and lets you target elements on web pages and in desktop applications.

When selecting elements from a web page, Robocorp Inspector opens up a new browser that is separate from the browsers that you are already running. That means that to find the correct element, you have to first navigate to the correct web address in the browser window that opened up. In that window, enter the address "https://robotsparebinindustries.com/#/robot-order" and load the page.

Robocorp Inspector

Next, click on the "Pick Element" button in the inspector and then hover on the "OK" button on the website until you see a purple border around it. Click then on the element. If everything went well, you should see the correct element in the Inspector, like in the picture below. If not, then you can try again by clicking "Pick Element".

Robocorp Inspector with a selection

In this view, you can select from the drop-down other locator strategies, such as XPath strategy.

You can also click on the "Edit Selector" toggle if you wish to edit your selector manually. When adjusting a selector manually, you can see all the elements that match the selector under the "Matching elements" title. For the most common use-cases, the number of matches should be one.

Click on the pen icon next to the 'Locator "Button"' text and change the name of the locator to "OK Button", which is more descriptive. Renaming locators is not mandatory but makes it easier to work with them. Save your locator.

Now you have added your first locator to the robot! When used in Automation Studio, locators have a green bar next to them.

To learn more about locators and selectors, see our guide on How to find user interface elements using locators in web applications

Now add the rest of the keywords

Next, let's fill in the rest of the form in the same way, by adding keywords and creating locators for them. This is a bit tricky and requires some patience to get everything right. Rename your locators to make it easier to work with them.

  1. Head, Select From List by Label keyword — pick a locator for the drop-down, and under "Labels" in the sidebar, type "Andy Roid head".
  2. Body, Click Element keyword — pick a locator by clicking on "Roll-a-thor Body"
  3. Legs, Input Text keyword — pick a locator for the field and set "4" as the text
  4. Address, Input Text keyword — pick a locator for the field and set "13 Foobar Avenue" as the text

As the last step, click on the "Preview" button with "Click Element". Phew, almost done! 😅

Now that you have the form filled in, the only thing we need to do is to store the picture that was created:

  1. Add a "Sleep" keyword with a time of "0.5s" to make sure the preview image is fully loaded
  2. Add a "Capture Element Screenshot" keyword with a locator for the preview image of the robot which opens up after clicking on the preview button.

Your code should now look like this:

First phase code

Switch over to the code view to see the code that was generated for your task. This is the actual Robot Framework code that the automation is built on. All the changes you make in the code view are visible in other views immediately.

Code View

Next, check out the flow view. Here you can see your robot on a high level. This can be useful in particular for understanding the structure of complex robots, as well as for communicating how the robot works to experts and decision-makers.

Flow View

In the flow view, you can zoom and drill down into keywords, switch between tasks and even perform undo/redo actions here. The flow block diagram is generated directly from the robot code, so it is updated when you edit your robot and does not need or create any extra files in your robot folder.

Great! You have now automated fillin in the form and capturing a screenshot of it! Let's go to the next chapter to see if your robot runs correctly.