Test Automation 101: (2)Capturing HTML elements on the Web page

*Please read the tutorial introduction, in case you haven’t yet. Here’s the link -> [LINK]

*Previous article in the tutorial series -> [LINK]

Before we can create Automated Tests, a prerequisite is for us to have captured element locators (the HTML elements) required for a specific test scenario.

8 locator strategies are included in Selenium:

  • Identifier
  • Id
  • Name
  • Link
  • DOM
  • XPath
  • CSS
  • UI-element

For this tutorial, the focus will be on using the XPath locator strategy.

How to build an XPath locator?

Launch the Chrome browser and go to facebook.com.

Press F12 or go to Settings -> More Tools -> Developer Tools.

The Developer Tools sub-window should appear.

Click the arrow icon and point the mouse to an element in the page then click it.

Once you click the element, it will highlight a portion in the HTML code.

Take note of the tagname, attribute, and value.

To build the corresponding XPath locator:

xpath=//tagname[@attribute='value']

So for our example, it should look like this:

xpath=//input[@type='text']

That’s the general concept. But XPath locator strategy is a much larger topic. There are a lot of resources regarding the topic if you want to know more about it.

The focus of this tutorial is for you to be able to capture elements on a webpage and store it in your workspace so that we can interact with it.

If you are comfortable in manually generating the XPath, great.

Is there another way that isn’t manual? Yes.

There are tools readily available to make our lives easier. Like TruePath extension in Chrome browser.

Install TruePath extension in your Chrome browser and watch this video.

So basically, you just need to right-click on the element on the webpage and TruePath will automatically generate the XPath for you. Select from the list of the XPaths generated and copy it to the clipboard.

Now you have an idea how to build an XPath locator from scratch or using the TruePath extension. Next we have to include those element locators in our Robot Framework project.

Step 1

Launch your eclipse workspace (the setup we did in the previous tutorial), then open the Robot Test Suite we previously created and replace it with this code.

*** Settings ***
Library Selenium2Library
*** Variables ***
${firstname} xpath=
${lastname} xpath=
${mobile} xpath=
${password} xpath=
*** Test Cases ***
Go to Facebook
Open Browser http://facebook.com chrome

The code above includes the Variables section. We declared 4 variables where we will place the XPath locator of the elements in the Facebook signup page.

Step 2

Using TruePath, capture the xpath of the following fields:

  • First name
  • Last name
  • Mobile number
  • Password
*** Variables ***
${firstname} xpath=//input[contains(@name,'firstname')]
${lastname} xpath=//input[contains(@name,'lastname')]
${mobile} xpath=//input[contains(@name,'reg_email__')]
${password} xpath=//input[contains(@data-type,'password')]

TruePath generates a lot of possible XPaths, so how do you choose which one to use? For now, keep in mind these two things:

  • Always look for an XPath which uses the ‘contains’ keyword. This means that it will look for a partial match, not an exact match. The values of the element attributes are likely to change so even if there are slight changes to the value, if we use partial match, we increase the chances that our XPaths will continue to work.
  • Use XPaths which use the common attributes: name, id, class. Either individually or a combination of those attributes.

The above guidelines are simplified ones. There are more complex considerations when defining standards in capturing XPath.

Step 3

We need to check if the XPaths we declared are working. So in the TestCases section, we will include an “Input Text” keyword for each of the elements.

*** Test Cases ***
Go to Facebook
Open Browser http://facebook.com chrome
Maximize Browser Window
Input Text ${firstname} Cloud
Input Text ${lastname} Strife
Input Text ${mobile} FF7
Input Text ${password} ilovetifa4evs

The first argument of the “Input Text” keyword is the locator.

The second argument is the actual value that will be placed on the field.

*Note: I added a “Maximize Browser Window” keyword after the “Open Browser.” This will just do what the keyword says — maximize the browser window. Pretty straightforward, right?

Step 4

This is how the final code should look like.

Let’s run it to see if it works.

There you go! You have a working automated test which interacts with the Facebook web page.

In the next tutorial we will focus on the keywords readily available in Robot Framework and how you can create your own custom keywords.

*If you ran into some issues, I’d be happy to assist. Just leave a comment and I’ll respond as soon as I can.

Topics:

  1. Workspace Setup Guide — Simple and Easy
  2. Capturing HTML elements on the Web page
  3. Creating Keywords and Tests in Robot Framework <<< === HERE!!!
  4. Robot Framework Project and GitHub integration
  5. Project Structure Sample
  6. Robot Framework and Jenkins Integration

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store