Selenium Locators in Robot Framework

The locators are the address that identifies the web element uniquely within the web page. It is a command, which tells the Selenium and GUI elements to operate on the Text Box, Buttons and CheckBox, etc..

Types of Locators

We have a wide range of web elements like Textbox, Radio Buttons, CheckBox, etc..These web elements require an accurate and unique way to identify the web elements. Therefore an increase in the effectiveness of the locator will increase the stability of an automation script.

Thus to locate the web elements accurately, selenium makes use of different types of locators, they are as follow:

Basics of CSS Selector

Name Locator in Robot Framework

The name locator is an effective way to locate an element with the name attribute, with this strategy the first element with the value of the name attribute will be returned, if no element has the matching name attribute, then NoSuchElementException will be raised.

The following example demonstrates the Name Locator

Open the link https://ngendigital.com/practice and then right-click on theFirst Nameunder the Input Exampleand then select theInspect.

select-inspect-under-input-example

Place the cursor on the attributes and press ctrl+f, the Xpath creator tab will open.

xpath-creator-tab

Now enter the tag and attribute values in the tab according to the syntax as shown below

finding-the-uniquness-of-the-element

Once you press enter, the name locator shows the element as a unique element by highlighting in yellow color and representing it with 1 of 1 as shown above, and we can use this element property in the robot framework to enter the name in the text box.

Open the Ride Editor and then open the OpenBrowser test case and Enter the arguments for the OpenBrowser keyword, the first argument as the ngIndia link https://ngendigital.com/practice and in the second argument as chrome, the browser name as shown below.

ngenindia-link-as-argument

Next, we need to Maximize the window and hence search for the keyword Maximize Browser Window and next, Select Frame and then select the keyword as Input Text and pass an argument as name=FirstName and the second argument as NgenDigital and then select the test case and click on the Run tab and then click on Start

input-keywords-to-test-case-with-name-locator

To find the iframe id, right-click on any element and select inspect and then search for iframe in the developer tool, you will find the iframe id if it has. iframe-id-of-an-element

Once we click on the start button, the ngendigital page will open and after two seconds the windows will maximize and then the name locator will be inserted in the Input Example.

maximized-window

The log reports are :

demo-log-web-automation

Test Log Report:

test-execution-log-for-automation

Excel Library in Robot Framework

Class Locator in Robot Framework

We can locate the element by using the class attribute, Open the Facebook Login page and then right-click on the Email or Phone element and then select the inspect element.

inspect-face-book-login-element

In the below image, you can see that the tag is the input tag, and we can see the class attribute and the name attribute. Consider the class attribute, which is an inputtext, and we need to input some text in the textbox.

select-and-inspect-element

In the same way, if you consider the password and inspect element, we will get the same attributes, Create an XPath by clicking on the selected element and press Ctrl+F

creating-xpath-for-facebook-eleemnt

We have found the two elements for the inputtext login_from_input_box, one is email, and another one is password. We cannot use the same class to set text in both Emails and the password.

For email, I am going to use the locator as a class, and for the password, I am using the locator as a name.

Go back to the test case and enter the arguments as shown below

write-test-case-for-facebook1-in-open-brwoser

Select the test case and Run and then click on the Start button, the facebook login page will open and after two seconds maximize the window and then input the text in the email as ngendigital and inputs the password as abcd.

We had given the sleep as two seconds, and hence we cannot capture the image, you can see the details in the log report.

demo-log-for-facebook

Data Driven Test case

ID Locator in Robot Framework

The id attribute specifies an id for an HTML element The id attribute is mostly used to style an element in the CSS, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

This is the most common way of locating elements by using the ID, the ID's are supposed to be unique for each element(Most of the time they will not be unique).

Lets open the page ngendigital and select the select Example and then right-click on the From drop-down menu and select the inspect option

inspect-element-from-select-example

Once you select inspect element, the following line will be highlighted which contains id=FromCity as shown below

select-element-fromngendigital

Create the Xpath of this element as shown below

creating-xpath-for-fromcity

The identified element is a unique element, let us write a test case by using the id. Open the Ride editor and then write the test case as shown below

test-case-for-fromcity-in-open-brwoser

Once you run the test case the ngendigital page will open and after five seconds the window will maximize and verifies the id locator FromCity which is selected Toronto by default

opening-the-page

And the log report is:

the-demo-log-is

Keyword Rewind Functionality

Locating Elements with an Xpath in Robot Framework

An Xpath is a syntax for defining the parts of an XML Documents, an XPath uses the path expression to navigate in XML documents. Xpath can also be used to navigate through the elements and attributes in the HTML files.

There two types of Xpath in Robot Framework :

  • Absolute Xpath
  • Relative Xpath

Now, Open the Facebook login page and right-click on the email and select the Inspect element.

inspect-face-book-login-element

Once the element has opened in the HTML page, Right-click on the selected element and select Copy and then select Copy Xpath under the Copy.

copy-xpath-for-facebook

Now, paste this copied Xpath in the Notepad, and in the same way, copy the Xpath of password and paste it in the notepad for future use.

copy-xpath-of-facebook-password

The copied Xpath of Facebook Email and Password are as below

cpoied-xpath-of-facebook

Open the Ride Editor and create a test case by using the XPath

test-case-for-xpath-locator-in-open-brwoser

Select the test case click on Run and then Start, then the facebook page will open and enters the email ngendigital and password as abcd after 4 sec the browser will close

test-case-exeution-of-xpath-locator

Build your Xpath

CSS Selector Locator in Robot Framework

A CSS selector is a combination of element attributes and values which identifies the web element within the web page.

The CSS selectors are the string representation of HTML Tags, Attributes, ID and Class.

Open the Facebook login page and right-click on the email and select the inspect element. again right-click on the selected HTML element and select the Copy Selector which is nothing but a CSS selector under the Copy and paste it in the notepad for future use.

finding-the-facebook-email-selector

In the same way, copy the selector of the Facebook password and paste it in the notepad for future use.

Open the Ride Editor and create a test case by using the CSS selector.

test-case-for-css-locators-in-open-brwoser

Once the test case is ready, select the test case and Run. Once the Test case starts executing, the robot framework identifies the CSS selector locators Email and password and enters the valid email id and password and then closes the browser. The Demo log is as shown below

test-execution-log-of-css-locator

Learn how to build CSS Selector

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions