Collecting the results

All the sales data has been entered. Nice! After entering all the sales data, Maria takes a screenshot of the sales summary:

Our robot can handle this case too!

Let's start. Add a new keyword Collect the results and add it to the task. Great! Open up the keyword, let's make it take a screenshot.

Taking a screenshot

The Selenium library provides the Screenshot keyword to help us with this step. We give it a locator of the element we want to take a screenshot of, and a path for the image file.

Add the keyword Screenshot to the Collect the results keyword. Select the keyword and from the right sidebar, click "Select a locator" and then "Create new locator", like we did in the previous chapter.

Now, in the browser window that opens up, sign in back to the web site, if needed, and enter some data in the sales form to display the sales result table. Now, click on "Pick Element" and point at the result table in the top-right corner. This creates you a new locator:

This locator would probably work fine, but it looks a bit unrealible. The locator uses ".alert" CSS class for finding the sales results. It might work for a while, but what if there is some other alert window popping up on the page? To make the locator more stable, let's use the "Edit Selector" feature of the Inspector.

Click on "Edit Selector" and the Inspector window changes a bit. The selector input field is now editable. Expand the "Matching elements" to see details for the sales results table. Under the "Matching elements" you can see all elements that match the current selector.

We can see, that there is a better CSS class name that we can use in our selector called .sales-summary. In the field below the "Pick Element" button, change .alert to .sales-summary. Then, above the preview image, rename the locator to "SalesSummary" instead of "Alert".

The Inspector automatically checks how many elements on the page match the selector. On bottom of the inspector, it should say "Matches 1 element". Great, that is exactly what we wanted! Now click "Save".

The css:.sales-summary locator means: "Using the CSS strategy, find me an element that has the sales-summary CSS class." With extra cheese. Grazie! Danke schön!

If you want, see the How to find user interface elements using locators in web applications article to learn how to view the HTML markup of web pages using browser tools.

Saving the file to the output directory

As the second argument, pass the Screenshot keyword the path to use for the screenshot image file. We want the file to be called sales_summary.png and added to the output directory.

The output folder is where Control Room will look for files generated by our robot. Check the robot.yaml specification page for more information.

Our path for the file will be this: ${OUTPUT_DIR}${/}sales_summary.png.

But what are those variables?

• ${OUTPUT_DIR} is a special Robot Framework runtime variable that represents the output directory.

• ${/} is a built-in variable that represents a directory path separator (/ or \). This variable makes sure the path separator will work in any operating system (macOS, Windows, Linux).

When you have a file already on you machine that you want to access, you can click on the folder icon next to the file input to select a file. The path and special characters are automatically created for you!

The Collect The Results keyword should now look like this:

Run the robot. A screenshot of the sales summary is stored in the output folder at the end of the run, you can see it in the right sidebar and open it from there:

Click on the > icon next to the Collect The Results keyword to see the screenshot output as a keyword preview:

Done!

What we learned

• The Screenshot keyword of the Selenium library takes screenshots of elements.
• Knowing how to use locators gets you a long way when automating web applications.
• There are many types of locators. Choose a good one for your use case!
• The ${OUTPUT_DIR} runtime variable represents the robot output directory.
• The ${/} built-in variable represents the path separator for the current operating system.
• The output folder is where we should put files that our robot generates.