Test Automation 101: (2) Capturing HTML elements on the Web page
Before creating automated tests, we must capture element locators (the HTML elements) required for a specific test scenario.
This tutorial will focus on using the XPath and CSS locator strategies, as they are more likely to be used in real projects.
How to build an XPath locator?
First, launch Docker Desktop and start the container we created in the previous tutorial.
Launch the Edge browser and go to http://localhost:8000.
Press F12 or go to Settings -> More Tools -> Developer Tools.
The Developer Tools sub-window should appear.
Click the arrow icon, point the mouse to an element on the page, and click it.
Once you click the element, it will highlight a portion of the HTML code.
Take note of the tag name, attribute, and value.
To build the corresponding XPath locator:
xpath=//tagname[@attribute='value']So, for our example, it should look like this:
xpath=//input[@id='exampleInputUsername']That’s the general concept. The focus of this tutorial is for you to be able to capture elements on a webpage and store them in your workspace so that you can interact with them. We won’t do a deep dive on XPath here. But if you want to know more, check this out.
Is there another way that isn’t manual? Yes.
Your browser’s Developer Tools already has a built-in tool to generate the XPath automatically for you. Right-click on the element on the webpage and select Copy > Copy XPath.
WARNING: I do not recommend this way of capturing locators. I am only showing this so that you can get started. It is still best to know how to construct locators independently.
How to build a CSS locator?
To give you an idea, we will convert the XPath locator we created to a CSS locator.
The “@id” in XPath is equivalent to simply “#” in CSS. The value is added directly after the “#”.
So for this XPath:
xpath=//input[@id='exampleInputUsername']CSS locator would be:
css=#exampleInputUsernameAs you can see, the CSS locator is shorter and more readable. If you want to discover the other CSS selectors, go here.
XPath or CSS locator?
Choose either of the two locator strategies for now and practice it until you become proficient. Focusing on one locator strategy will make it easier for you to learn the other later.
Now, you know how to build an XPath or CSS locator from scratch or use the auto-generated one. Next, we must include those element locators in our Robot Framework project.
Step 1
Launch your Visual Studio Code workspace (the setup we did in the previous tutorial), then open the Robot Test Suite we created and replace it with this code.
*** Settings ***
Library SeleniumLibrary
*** Variables ***
${USERNAME} css=
${PASSWORD} css=
${LOGIN} css=
*** Test Cases ***
Go to Puppy Bank
Open Browser http://localhost:8000
Close BrowserThe code above includes the Variables section. We declared three variables where we would place the CSS locator of the elements on the Puppy Bank login page.
Step 2
Using Developer Tools, capture the locator of the following fields:
*** Variables ***
${USERNAME} css=#exampleInputUsername
${PASSWORD} css=#exampleInputPassword
${LOGIN} css=[value="Log in"]Step 3
We need to check if the locators we declared are working. So, in the Test Cases section, we will include keywords to interact with each element.
*** Settings ***
Library SeleniumLibrary
*** Variables ***
${USERNAME} css=
${PASSWORD} css=
${LOGIN} css=
*** Test Cases ***
Go to Puppy Bank
Open Browser http://localhost:8000
Input Text ${USERNAME} text=admin
Input Password ${PASSWORD} password=password
Click Button ${LOGIN}
Close BrowserLet’s break down the keywords we used above.
The first argument of the “Input Text” keyword is the locator.
The second argument is the actual value typed on the field. *Note: press the Tab key in your IDE to indicate you are moving to the next argument.
“Input Password” is very similar to “Input Text”. The only difference is that “Input Password” does not log the given password on the INFO level of Robot Framework logs.
The “Click Button” keyword only requires the locator of the button.
Step 4
The image below shows what the final code should look like.
Let’s run it to see if it works.
There you go! You have a working automated test that interacts with the Puppy Bank web app.
The following tutorial will focus on the available keywords in Robot Framework and how to create custom keywords.
