Filling in the sales form

The eagle has landed! 🦅

Our robot logged in to the intranet! On the page, there is a form where Maria can fill in the sales data for one sales representative.

Here's the form HTML markup for reference (this is what a web browser sees before it renders a nice-looking website for you):

<form id="sales-form">
  <div class="form-group">
    <label for="firstname">First name</label
    ><input type="text" id="firstname" name="firstname" required="" class="form-control" />
  </div>
  <div class="form-group">
    <label for="lastname">Last name</label
    ><input type="text" id="lastname" name="lastname" required="" class="form-control" />
  </div>
  <div class="form-group">
    <label for="salestarget">Sales target ($)</label
    ><select id="salestarget" required="" class="custom-select">
      <option value="5000">$5,000</option>
      <option value="10000">$10,000</option>
      <option value="15000">$15,000</option>
      <option value="20000">$20,000</option>
      <option value="25000">$25,000</option>
      <option value="30000">$30,000</option>
      <option value="35000">$35,000</option>
      <option value="40000">$40,000</option>
      <option value="45000">$45,000</option>
      <option value="50000">$50,000</option>
      <option value="55000">$55,000</option>
      <option value="60000">$60,000</option>
      <option value="65000">$65,000</option>
      <option value="70000">$70,000</option>
      <option value="75000">$75,000</option>
      <option value="80000">$80,000</option>
      <option value="85000">$85,000</option>
      <option value="90000">$90,000</option>
      <option value="95000">$95,000</option>
      <option value="100000">$100,000</option>
    </select>
  </div>
  <div class="form-group">
    <label for="salesresult">Sales result ($)</label
    ><input type="number" id="salesresult" name="salesresult" required="" class="form-control" />
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

The next logical step in our task, using plain English, will be Fill and submit the form.

You can use any language you want when writing your tasks and keywords, although many libraries provide keywords written mainly in English. Also, the syntax is case-insensitive.

This is a valid keyword name: DEjLigT at mødE dig!
That keyword can be called like this (case-insensitive): dejligt at møde dig!

Create a new user keyword called Fill and submit the form and add it to your Insert the sales data ... task.

Let's roll our sleeves

Open up Fill and submit the form keyword and click on the "Web Recorder" button to start again recording. In the browser window navigate to http://robotsparebinindustries.com and log in before starting the recording. When you are in the sales form, click "Record".

In the form, enter "John" in the "First name" field, "Smith" as "Last name", "$10,000" as "Sales target", "123" as the sales result and then finally, click "Submit". When you've done all of these steps, press esc when the browser window is active to stop recording. Now you should see this in the recording window:

Note! If anything went wrong, clear the "First name" and "Last name" fields and press "Record again".

In the same way as in the previous chapter, clean up the names of the locators to match the ones below. This is not required, but makes it easier to work with the locators in Automation Studio in the future.

When you have the names defined correctly, click "Save". The generated locators and keywords in Automation Studio should look like this:

Hold your horses! 🐎🐎🐎

Now let's try out now running the robot. To run the robot, go to the Task "Insert The Sales Data...". Make sure you have now all three user keywords in place (Open The Intranet Website, Log In, Fill And Submit The Form) and click "Run".

Running the robot starts fine, but we get an error: Element with locator 'id:firstname' not found.. Wait. What? The input field is there. You have seen it with your own eyes. What is going on here?

It looks like the robot could not find the sales form because the form was not there yet. Your robot is really fast. It does a thing and continues with the next as soon as it can. Faster than Maria ever would. That is a good thing, of course, but it also means that we need to teach the robot some patience.

Many web applications these days use lazy loading. Simplified, it means that some of the content on the page might not be there immediately when you open a page. It could take a few milliseconds or even longer for everything to be ready for action. This also means that your robot sometimes needs to wait for things to become available before interacting with them.

Luckily for us, there is an Selenium keyword we can take advantage of: Wait Until Page Contains Element. Provided with a locator, it will, well, wait until the page contains the said element (talk about good naming, eh?).

Where should we do this waiting? We could call the keyword in our Fill and submit the form keyword. Calling it in the Log in keyword might work, too. In the end, we decide that the login operation can be considered successful if the page contains the sales form (if the login fails, the robot will not see the sales form!).

Now we need to add the keyword. Search for the Wait Until Page Contains Element keyword in the left sidebar and drag it to the Log in keyword.

Now we need to add some element to wait for. Which element can we use? This is a good chance to try out the Web Inspector in Automation Studio. Click on the "Select a locator" and then click on the "Create new locator" button to open the Automation Studio inspector.

If the browser is not in the sales form anymore, browse again to the https://robotsparebinindustries.com/ web site, log in.

When the sales form is visible, click on the "Pick Element" button. Carefully click on the empty area next to the "Submit" to select the sales form element (see the image below).

When you have the correct element selected, click "Save" in the Inspector window to save your locator. The Log in keyword should now look like this:

Now run the robot again. After submitting the login form, it waits patiently for the sales form to appear and proceeds to submit the form.

Success! Poor "John Smith" has his horrible performance entered in the intranet.

We now have the basic outline of our form filling keyword done! Next, we need to figure out how to read real data from the Excel file and how to enter the data for multiple people in sequence (looping).

What we learned

• The Click Button keyword can click on buttons using the label as the locator (other locators work, too).
• Call the Wait Until Page Contains Element keyword to wait before proceeding to avoid failures due to the robot advancing too fast.
• Hard coding data is an acceptable practice for making progress and finding potential technical blockers faster.
• Take small steps. Iterate often.