The locators are the address that identifies the web element uniquely within the web page, it is a command, which tells the Selenium IDE 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 effective way to identify the web elements, therefore an increase in the effectiveness of the locator will increase the stability of an automation script.
Thus in order 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 Name under the Input Example and then select the inspect element.
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
Once you press enter, the name locator shows the element as a unique element, 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 delete the close browser.
Enter the arguments for the OpenBrowser and enter the ngIndia link https://ngendigital.com/practice and in the second argument as Chrome
Next, we need to Maximize the window and hence search for the keyword Maximize Browser Window and next select the 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 button 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 locator, Open the Facebook Login page and then right-click on the element and then select the inspect element.
In the above 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, we need to input some text in the textbox.
And 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.
If we want to input something in the email and to input something in the password we cannot use the same class.
For email, I am going to use the locator as a class and for the password, I am using the locator as name
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.
We had given the sleep as two seconds and hence we cannot capture the image
This is the most common way of locating elements by using the ID, the ID's are supposed to be unique for each element.
Lets open the page ngendigital and select the select Example and then right-click on the from the drop-down and select the inspect element
You can see the select tag and the id is Fromcity and try to create the Xpath of this element.
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 the log report is:
Test Execution report:
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 be used to navigate through the elements and attributes in the XML documents.
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.
Right-click on the selected element and select Copy and then select Copy Xpath under the copy.
Now, paste this copied Xpath in the Note pad, 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
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 after 4 sec the browser will close
A CSS selector is a combination of an element selector and a value 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 Select 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. The Demo log is as shown below