Selenium IDE- Locating Strategies by Name, XPath , CSS and DOM

Last updated on Dec 02 2021
Manikaran Reddy

Table of Contents

Selenium IDE- Locating Strategies by Name, XPath , CSS and DOM

Selenium IDE- Locating Strategies (By Name)

• The name locator type will locate the primary element with an identical name attribute.
• For example, name=username.
Let us consider an example on the way to use name locator as a target for commands in Selenium IDE.
We will create a login test, in order that you’ll get a far better understanding of locating elements through name locator.
• Launch Firefox browser.
• Click on the Selenium icon present on the highest right corner on your browser.
• It will launch the default interface of Selenium IDE.
• Click on the command text box present on the Test Script Editor Box.

Selenium Web Driver
Selenium Web Driver

• Modify the properties of first command as:
o Command: open
o Target: https://mail.rediff.com/cgi-bin/login.cgi
o After execution, this command will load the Rediff login page on your Firefox browser.

Selenium Web Driver
Selenium Web Driver

For second command to be entered, we’d like a singular identification element for the Username text box which can help the IDE to spot the target location.

o Right click on the “Username” text box and choose Inspect Element.

Selenium Web Driver
Selenium Web Driver


o It will launch a window containing all the precise codes involved within the development of the “Username” text box.

Selenium Web Driver
Selenium Web Driver

• Pick element with the matching name attribute that contains the precise name for the “Username” text box.

Selenium Web Driver
Selenium Web Driver

• Modify the properties of second command as:
o Command: click at
o Target: name=login
o After execution, this command will click on the Username text box.

Selenium Web Driver
Selenium Web Driver

We will use an equivalent element for our next command.
• Modify the properties of third command as:
o Command: type
o Target: name=login
o Value: username
o After execution, this command will type the username within the Username text box

Selenium Web Driver
Selenium Web Driver

We will now add a command which will click on the “Password” text box. For this command, we’d like a singular identification for the “Password” field which can help the IDE to spot the target location.

o Right click on the “Password” text box and choose Inspect Element.

Selenium Web Driver
Selenium Web Driver


o It will launch a window containing all the precise codes involved within the development of the “Password” text box.

Selenium Web Driver
Selenium Web Driver


o Pick element with the matching name attribute that contains the precise name for the “Password” text box.

Selenium Web Driver
Selenium Web Driver

• Modify the properties of fourth command as:
o Command : click at
o Target : name=passwd
o Upon execution this command will click on the Password text box.

Selenium Web Driver
Selenium Web Driver

We will use an equivalent ID element for our next command which involves typing the password as login credential.
• Modify the properties of fifth command as:
o Command : type
o Target : name=passwd
o Value : **********(User Login Password)
o Upon execution this command will type the user password because the login credential.

Selenium Web Driver
Selenium Web Driver

At last, we’d like a singular identification element for the Login Submit button which can help the IDE to spot the target location.

o Right click on the “Go” button and choose Inspect Element.

Selenium Web Driver
Selenium Web Driver


o It will launch a window containing all the precise codes involved within the development of the “Go” submit button.

Selenium Web Driver
Selenium Web Driver


o Pick element with the matching name attribute that contains the precise name for the “Go” submit button.

Selenium Web Driver
Selenium Web Driver

• Modify the properties of sixth command as:
o Command : click at
o Target : name=proceed
o After execution, this command will click on the “Go” submit button.

Selenium Web Driver
Selenium Web Driver

• Click on the “Run Current Test” button present on the tool bar menu of the IDE. it’ll execute all of your inserted commands on the browser and provides you an overall summary of the executed test script.
• The Log pane displays the general summary of the executed test scripts.

Selenium Web Driver
Selenium Web Driver

Thus, you’ll see that we’ve used name locator as a target for many of our Selenium commands.

Selenium IDE- Locating Strategies (By XPath)

• XPath may be a language used for locating nodes in XML documents.
• XPath are often used as a substitute once you do not have an appropriate id or name attribute for the element you would like to locate.
• XPath provides locating strategies like:
o XPath Absolute
o XPath Attributes
XPath Absolute (not recommended)
• XPath Absolute enables users to say the entire XPath location from the basis HTML tag to the precise elements.
• It isn’t recommended because it takes the entire XPath location and if the situation of the online element is modified or it belongs to another parent then XPath are going to be unable to locate the specified element.

• Syntax: //html/body/tag1[index]/tag2[index]/.../tagN[index]

• Example: //html/body/div[2]/div/div[2]/div/div/div/fieldset/form/div[1]/input[1]
XPath Attributes
• XPath Attributes is usually recommended once you do not have an appropriate id or name attribute for the element you would like to locate.
• XPath Attributes allows us to locate web elements using their different attributes.

• Syntax: //htmltag[@attribute1='value1' and @attribute2='value2']

• Example: //input[@id=’passwd’ and @placeholder=’password’]
Let us consider an example on the way to use XPath as a target for commands in Selenium IDE.
We will create a login test, in order that you’ll get a far better understanding of locating elements through XPath. Since, XPath Absolute isn’t recommended therefore we’ll use XPath Attributes so as to locate web elements.
• Launch Firefox browser.
• Click on the Selenium icon present on the highest right corner on your browser.
• It will launch the default interface of Selenium IDE.
• Click on the command text box present on the Test Script Editor Box.

Selenium Web Driver
Selenium Web Driver

• Modify the properties of first command as:
o Command: open
o Target: https://www.testandquiz.com/user-login
o After execution, this command will load the Test and Quiz login page on your Firefox browser.

Selenium Web Driver
Selenium Web Driver

For second command to be entered, we’d like the identification elements for the “Username” text box which can help the IDE to spot the target location.

o Right click on the Username text box and choose inspect elements.

Selenium Web Driver
Selenium Web Driver


o It will launch a window containing all the precise codes involved within the development of “Username” text box.

Selenium Web Driver
Selenium Web Driver

Thus, we will see that the identification elements involved within the development of “Username” text box include: id, class, name and placeholder.

Selenium Web Driver
Selenium Web Driver

Therefore, we’ll write the XPath Attribute for “Username” text box as: //input[@id=”email” and @placeholder=”Email”]
• Modify the properties of second command as:
o Command: click at
o Target: //input[@id=”email” and @placeholder=”Email”]
o Upon execution this command will click on the “Username” text box.

Selenium Web Driver
Selenium Web Driver

We will use an equivalent XPath Attribute for our next command which involves typing the username as a login credential within the “Username” text box.
• Modify the properties of third command as:
o Command: type
o Target: //input[@id=”email” and @placeholder=”Email”]
o Value: username
o After execution, this command will type the username within the “Username” text box.

Selenium Web Driver
Selenium Web Driver

We will now add a command which will click on the “Password” text box. For this command, we’d like the identification elements for the “Password” text box which can help the IDE to spot the target location.

o Right click on the “Password” text box and choose Inspect Element.

Selenium Web Driver
Selenium Web Driver


o It will launch a window containing all the precise codes involved within the development of “Password” text box.

Selenium Web Driver
Selenium Web Driver

Thus, we will see that the identification elements involved within the development of “Password” text box include: id, class, name and placeholder.

Selenium Web Driver
Selenium Web Driver

Therefore, we’ll write the XPath Attribute for “Password” text box as: //input[@id=”password” and @placeholder=”Password”]
• Modify the properties of fourth command as:
o Command: click at
o Target: //input[@id=”password” and @placeholder=”Password”]
o After execution, this command will click on the “Password” text box.

Selenium Web Driver
Selenium Web Driver

We will use an equivalent XPath Attribute for our next command which involves typing the password as a login credential within the “Password” text box.
• Modify the properties of fifth command as:
o Command: type
o Target: //input[@id=”password” and @placeholder=”Password”]
o Value: ******* (User Login Password)
o After execution, this command will type the user login password within the “Password” text box.

Selenium Web Driver
Selenium Web Driver

At last, we’d like the identification elements for the Log in Submit button which can help the IDE to spot the target location.

o Right click on the “Log In” button and choose Inspect Element.

Selenium Web Driver
Selenium Web Driver


o It will launch a window containing all the precise codes involved within the development of “Log In” submit button.

Selenium Web Driver
Selenium Web Driver

• Thus, we will see that the identification elements involved within the development of “Log In” submit button include: class, type and link.

Therefore, we’ll write the XPath Attribute for “Log In” button as: //button[@class=”btn btn btn-primary” and @type=”submit”]
• Modify the properties of sixth command as:
o Command: click at
o Target: //button[@class=”btn btn btn-primary” and @type=”submit”]
o After execution, this command will click on the “Log In” submit button.

Selenium Web Driver
Selenium Web Driver

• Click on the “Run Current Test” button present on the tool bar menu of the IDE. it’ll execute all of your inserted commands on the browser and provides you an overall summary of the executed test script.
• The Log pane displays the general summary of the executed test scripts.

Selenium Web Driver
Selenium Web Driver

Thus, you’ll see that we’ve used XPath locator as a target for many of our Selenium commands.

Selenium IDE- Locating Strategies (By CSS)

• CSS stands for Cascading Style Sheets. it’s a method sheet language which is employed to explain the design and formatting of a document written in terminology .
• Locating web elements through CSS involves use of CSS Selector which identifies a component supported the mixture of HTML tag, id, class and attributes.
• Locating web elements through CSS Selector is far more complex compared to previous locating strategies.
Like XPath, CSS even have capabilities to locate a component having no ID, class or name.
CSS Selector works in six modes to spot and locate web elements.
1. Locating by ID
2. Locating by Class
3. Locating by Attribute
4. Locating by ID/Class & Attribute
5. Locating by Sub-string
6. Locating by inner text

Selenium Web Driver
Selenium Web Driver

Selenium IDE- Locating Strategies (By DOM)

DOM stands for Document Object Model. In simple words, DOM specifies the structural representation of HTML elements.
There are four ways through which we will identify and locate an internet element using DOM.
1. getElementById
2. getElementsByName
3. dom:name (applies only to elements within a named form)
4. dom:index

1.getElementByID

• Syntax: document.getElementById("id of the element")

• Id of the element – it’s the worth of the Id attribute which is beig accessed.
• For example, we’ll define the DOM value for the “Username” text box of Test and Quiz login page as: document.getElementById(“email”)
2.getElementsByName

• Syntax:document.getElementByName("name")[index] Name - it's the worth of name attribute which is being accessed.

• Index – An integer value wont to specify the situation of the specified element.
• For example, we’ll define the DOM value for the “Username” text box of Test and Quiz login page as: document.getElementByName(“email_id”)
3.dom:name

• Syntax : document.forms["name of the form"].elements["name of the element"]

• Name of the shape – it’s the worth of the name attribute of the shape tag that contains the element you would like to access.
• Name of the element – it’s the worth of the name attribute of the element you would like to access.
• Example: “document.forms[“home”].elements[“userName”]”
4.dom:index

• Syntax : document.forms[index of the form].elements[index of the element]

• Index of the shape – The integer value of the index (starting at 0) of the shape with reference to the entire page.
• Index of the element – The integer value of the index (starting at 0) of the shape with reference to the entire form that contains it.
So, this brings us to the end of blog. This Tecklearn ‘Selenium IDE- Locating Strategies by Name , XPath , CSS and DOM’ blog helps you with commonly asked questions if you are looking out for a job in Selenium and Automation Testing. If you wish to learn Selenium and build a career in Automation Testing domain, then check out our interactive, Selenium Certification Training, that comes with 24*7 support to guide you throughout your learning period. Please find the link for course details:

https://www.tecklearn.com/course/selenium-training-certification/

Selenium Certification Training

About the Course

Tecklearn’s Selenium Certification Training enables you to master the complete Selenium suite. The Selenium Training is designed to train developers and manual testers to learn how to automate web applications with a robust framework, and integrate it within the DevOps processes of an organization. This Selenium Certification Training will also help you master important concepts such as TestNG, Selenium IDE, Selenium Grid, Selenium WebDriver, etc. Get hands-on experience on widely used automation frameworks such as Data-Driven Framework, Keyword-Driven Framework, Hybrid Framework, and Behavior Driven Development (BDD) Framework. Throughout this online Instructor-led Selenium Certification Training, you will be working on real-life industry use cases.

Why Should you take Selenium Certification Training?

• The average salary of a Selenium Test Automation Engineer is $94k per year – Indeed.com.
• Automation Testing Market is expected to grow at a Compound Annual Growth Rate (CAGR) of 18.0% in the next three years.
• Global software testing market to reach $50 billion by 2020 – NASSCOM. Selenium tool supports more browsers and languages than any other testing tool.

What you will Learn in this Course?

Getting started with Selenium
• Introduction to Selenium testing
• Significance of automation testing
• Comparison of Manual and Automation Testing
• Installation of Java JDK, JRE and Eclipse
Setting the environment in Eclipse for Selenium
• Java Introduction
• Creating a Java function and executing
• Concepts of Java
• Properties File
• Reading Data from Excel File
• Database Connection
• Hands On
Advantages of Selenium automation testing
• Selenium Features
• Concept of Selenium Integrated Development Environment
• Understanding of the Selenium IDE features
• Addition of Script assertions and general commands
• Deploying the first Selenium Script
• Sample project IDE
• Recording Selenium test case
• Hands On
Selenium Web driver Automation
• Architecture of Selenium Web Driver
• Download and installation
• Creating a Java function using Selenium and execution
• Hands On
Deploying Web Drivers for scripting
• Getting the HTML source of Web Element
• Table and Form Elements
• Firebug extension and Fire Path installation
• Advance User Interactions and Cross Browser Testing
• Hands On
Deep dive into Selenium Web Driver
• Action Commands
• Web Table / Date Picker
• How to Implement Switching Commands in WebDriver
• Alerts
• Frames
• Hands On
Switching Operations in WebDriver using Window
• Selenium Webdriver Wait
• Implicit wait, Explicit wait
• Deploying searching elements using the link text, name, using XPath
• Calendar
• Hands On
Introduction to TestNG Framework
• Introduction to TestNG
• Advantages of TestNG
• Installing TestNG on Eclipse
• Rules to write TestNG
• TestNG Features
• Annotations
• Grouping
• Sequencing: Prioritization and Dependency
• Enable/Disable a test case
• Parameterization: Using Xml file and DataProvider
• Parallel Testing & Cross Browser Testing
• TestNG Report: HTML Report, Console Report, XML Report
JUnit Operations and Test Framework
• Annotations, Methods in JUnit
• Junit Test Suites, ANT Build and JUNIT reporting
• Types of Test Automation Framework
• Module Based Testing Framework
• Data Driven Testing Framework
• Keyword Driven Testing Framework
• Hybrid Driven Testing Framework
• How to implement Testing Framework in Project
Object Repository
• Understanding of Object Repository
• Learning sample scripts using object repository
• Page Object Modelling
• Page Factory
JavaScript Functions
• Autosuggestion
• Headless Browser
• Sikuli
• XPath

Got a question for us? Please mention it in the comments section and we will get back to you.

0 responses on "Selenium IDE- Locating Strategies by Name, XPath , CSS and DOM"

Leave a Message

Your email address will not be published. Required fields are marked *