Understanding Selenium WebDriver Locators
What is a Locator?
The Locators are the way to identify an HTML element on a web page.
Selenium WebDriver uses any of the below locators to identify the element on the page and perform the Action.
Types of Selenium Locators
Selenium WebDriver boasts a collection of locators, each possessing its unique charm tailored to specific scenarios and HTML structures. Let's embark on a captivating journey through the key locators:
🔍 ID Locator:
This locator uses the "id" attribute of an HTML element to identify it.
Example:
<input type="text" placeholder="Username" id="inputUsername" value=" ">Usage:
By.id("inputUsername")
🧭 XPath Locator:
This locator uses XPath expressions to locate elements.
Example:
<input type="text" placeholder="Username" value=" ">Usage:
By.xpath("//input[@placeholder='Username']")
🎨 CSS Selector Locator:
This locator uses CSS selectors to identify elements.
Example:
<input type="text" placeholder="Username" value=" ">Usage:
By.cssSelector("input#inputUsername")
🏷 Name Locator:
This locator uses the "name" attribute of an HTML element.
Example:
<input type="text" placeholder="Username" value=" ">Usage:
By.name("inputUsername")
🌈 Class Name Locator:
This locator uses the "class" attribute of an HTML element.
Example:
<input type="text" placeholder="Username" value=" ">Usage:
By.className("inputUsername")
🏷 Tag Name Locator:
This locator uses the HTML tag name of an element.
Example:
<input type="text" placeholder="Username" value=" ">Usage:
By.tagName("input")
🔗 Link Text Locator:
This locator is used for hyperlinks and uses the exact text of the link.
Example:
<a href="https://example.com">Clickme</a>Usage:
By.linkText("Click me")
🔗 Partial Link Text Locator:
This locator is similar to the link text but uses a partial match of the link text.
Example:
<a href="https://example.com">Clickme</a>Usage:
By.partialLinkText("Click")
Diving into the Aesthetics of CSS Selector and XPath
🎨 CSS Selector:
Class Name:
tagname.classname(e.g.,input#inputUsername)Attribute:
tagname[attribute='value'](e.g.,input[placeholder='Username'])Substring Match:
tagname[attribute*='value'](e.g.,input[type*='pass'])
🗺 XPath:
Attribute Match:
//tagname[@attribute='value'](e.g.,//input[@placeholder='Username'])Indexing:
//tagname[@attribute='value'][index](e.g.,//button[contains(@class,'submit')])Relative Path:
//parentTagname/childTagname(e.g.,//header/div/button[1]/parent::div)
Elevating Your Locator Selection Game:
✨ Priority: Embrace ID, name, or class name for efficiency.
⚡ XPath and CSS: Choose wisely; XPath offers flexibility, but CSS selectors often race ahead.
🚀 Avoid Absolute XPath: It can be brittle; opt for relative XPath for resilience.
🔍 Regular Expressions: Embrace
contains()for a touch of flexibility.
Find Locators effectively using Browser Extensions:
Examples:
ChroPath (for Chrome):
Extension Link: ChroPath - Chrome Web Store
Usage: ChroPath is a Chrome extension that enhances the developer tools in Chrome. It allows you to inspect elements and generate unique and optimized XPath and CSS selectors. After installation, you can open ChroPath from the developer tools and interactively generate selectors for elements on the page.
SelectorsHub (for Chrome):
Extension Link: SelectorsHub - Chrome Web Store
Usage: SelectorsHub is an xpath plugin and cssSelector plugin. It can be used as a smart editor to write and verify xpath, cssSelector, Playwright selectors, jQuery and JS Path. SelectorsHub can also be used to auto-generate the unique #xpath, CSS Selector and all possible selectors.
This magical guide through locator strategies equips you to traverse the captivating realm of web elements with finesse. As you embark on your Selenium WebDriver automation journey, selecting the right locators ensures scripts that are not just robust but also enchantingly maintainable, adding a touch of brilliance to your test automation efforts. Happy coding! 🌟