Selenium Locators

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..

Types of Locators

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:

Name Locator

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 the First Name under the Input Example and then select the inspect element.

name-locating-and-inspecting

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

finding-the-uniquness-of-the-element

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

ngenindia-link-as-argument

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

input-keywords-to-test-case

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
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

test-open-browser-of-automation

Class Locator

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.

select-and-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 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.

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

write-test-case-for-facebook1

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

demo-log-for-facebook

test-execution-log-of-facebook

test-open-browser-for-facebook

ID Locator

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

select-element-fromngendigital

You can see the select tag and the id is Fromcity and try to create the Xpath of this element.

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

Once you run the test case the ngendigital page will open and after five seconds the window will maximize

opening-the-page

And the log report is:

the-demo-log-is

Test Execution report:

test-execution-report

Locating Elements with an Xpath

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:

  • Absolute Xpath
  • Relative Xpath

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.

copy-xpath-for-facebook

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.

copy-xpath-of-facebook-password

The copied Xpath of Facebook Email and Password

cpoied-xpath-of-facebook

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

test-case-for-xpath-locator

Select the test case click on Run and then Start, then the facebook page will open and after 4 sec the browser will close

test-case-exeution-of-xpath-locator

CSS Selector Locator

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.

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

Once the test case is ready, select the test case and Run. The Demo log is as shown below

test-execution-log-of-css-locator

test-case-report-of-css-locator



Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions