Creating a PDF

Maria creates a PDF from the sales data table in the intranet and sends it out as a company newsletter to ensure that her colleagues look at it.

After all, it would be a shame if no one saw the result of all that copy-pasting!

Maria copies the table into Microsoft Word and exports it to PDF with some additional software. Our robot, instead, will do it all by itself automatically.

We want to turn the table on the left into the PDF on the right:

As always, let's start by adding a new step in our Task. Create a keyword called Export the table as a PDF and add it to the task. We implement the keyword in small steps. (Remember the poor elephant we are eating? 🐘)

Our plan for this keyword is:

• we isolate the part of the page that contains the sales table
• we assign the content (HTML markup) of that part of the page to a variable
• we create a PDF with the HTML content of the table.

Getting the HTML table element out of the page

The HTML markup of the table area on the page looks like this:

...
<div id="sales-results">
  <table class="table table-dark table-striped">
    ...
  </table>
</div>
...

The table is wrapped in a <div> element with an id attribute of sales-results.

We want to make sure that the sales-results element has been loaded before we use it, so add a Wait Until Element Is Visible keyword into the Export the table as a PDF keyword that you just created.

For the keyword, click "Select a locator", "Create new locator" to open up the web inspector and a browser window. In the browser window, if needed, browse back to the sales form and fill it in to see the results table. We want to select the table.

Selecting the table is a bit difficult: hover on the border on the table to get the purple border to show around the table and then, when the border looks correct, click to select it. If you find this hard, you can also toggle to the "Edit Selector" view and type in the selector field #sales-results (next to "CSS") to find the correct element. Rename the locator to SalesResultTable so that you won't mix it up with the other locators in the robot.

Next, we want to put the HTML markup of that element into a variable. Do this with the Get Element Attribute keyword (Selenium library) like this:

Ok, we admit this was not too easy to guess. 😅 But no panic! Let's see what's going on on this new line.

We create a variable (sales_results_html). We store into it what we get out of the Get Element Attribute keyword. We pass two arguments to that keyword: the first is the locator for the element and the second is the name of the attribute of the element we want to get.

In our case, we want all the HTML markup of that element, including everything inside it, so we choose the outerHTML attribute.

You can read more about the Element API if you are interested. It gets pretty technical, though. Please don't say we did not warn you! 🙂

Alright! Rerun our robot.

The log shows the robot has now grabbed the HTML markup for the table:

Creating the PDF file out of the HTML contents variable

Only one more step to go!

Now that we have the HTML contents of the table in a variable, we need to create a PDF file out of it. Let's add the final line to our keyword.

Use the Html To Pdf keyword provided by the PDF library to create a sales_results.pdf file out of our sales_results_html variable's contents, and place it again into the output folder (${OUTPUT_DIR}${/}).

And that's it!

Now run the robot one final time. Open the generated sales_results.pdf file from the run view sidebar:

The PDF file contains the generated sales data! 🎉🎉🎉

Tip! You can also access the robot in the file system by clicking on the folder icon in the top-left of the editor.

What we learned

• You can use the Get Element Attribute keyword from the Selenium library to get the actual HTML markup of any element using the outerHTML attribute.
• You can create a PDF file from HTML content using the PDF library and the Html To Pdf keyword.