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..
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:
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
The following example demonstrates the Name Locator
Open the link https://ngendigital.com/practice and then right-click on the
First Nameunder the
Input Exampleand then select the
Place the cursor on the attributes and press
ctrl+f, the Xpath creator tab will open.
Now enter the tag and attribute values in the tab according to the syntax as shown below
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.
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
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.
The log reports are :
Test Log Report:
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.
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.
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
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
Go back to the test case and enter the arguments as shown below
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.
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
Once you select inspect element, the following line will be highlighted which contains
id=FromCity as shown below
Create the Xpath of this element as shown below
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
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
And the log report is:
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 :
Now, Open the Facebook login page and right-click on the email and select the Inspect 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.
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.
The copied Xpath of Facebook Email and Password are as below
Open the Ride Editor and create a test case by using the XPath
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
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.
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.
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