Selenium - Different types of locators

Selenium identifies elements with locators. There are total 8 different types of locators available and those are mentioned in below with examples.

1. xpath
2. cssSelector
3. name
4. id
5. className
6. linkText
7. partialLinkText
8. tagName

There are different ways of finding xpath:

Using single attribute:
sintax: // tagname[@attribute-name=’value1’]

Example:
//a[@href=’http://www.google.com’]
//input[@id=’name’]
//input[@name=’username’]
//img[@alt=’sometext’]

Using multiple attributes:
Syntax: //tagname[@attribute1=’value1’][attribute2=’value2’]

Example:
//a[@id=’id1’][@name=’namevalue1’]
//img[@src=’’][@href=’’]
//a[@href='/log-in/link' and contains(text(),'Email me a login link')]
//a[contains(text(),'Get Started') and @id='hero-cta']
//bdi[contains(text(),'Description')]

Using Contains method:
Syntax with examples:
//tagname[contains(@attribute,’value1’)]
//input[contains(@id,’’)]
//input[contains(@name,’’)]
//a[contains(@href,’’)]
//img[contains(@src,’’)]
//div[contains(@id,’’)]
//a[@href='/log-in/link' and contains(text(),'Email me a login link')]
//a[contains(text(),'Get Started') and @id='hero-cta']
//bdi[contains(text(),'Company')]

Using Starts method:
//tagname[starts-with(@attribute-name,’’)]
//id[starts-with(@id,’’)]
//a[starts-with(@href=’’)]
//img[starts-with(@src=’’)]
//div[starts-with(@id=’’)]
//input[starts-with(@id=’’)]
//button[starts-with(@id,’’)]

Using Following node:
Xpath/following::again-ur-regular-path
//input[@id=’’]/following::input[1]
//a[@href=’’]/following::a[1]
//img[@src=’’]/following::img[1]
''from gmail login page example
//input[@name='identifier']/following::button[contains(text(),'Forgot email')]
//div[@class='card-body']/p[contains(text(),'First way to initialize all tooltips')]/following-sibling::div[@class='docs-clipboard']
//bdi[contains(text(),'Company')]/following::input[1]
//bdi[contains(text(),'Description')]/following::textarea
Using Preceding node (next node)
Xpath/preceding::again-ur-regular-path
//input[@id=’’]/ preceding::input[1]
//a[@href=’’]/ preceding::a[1]
//img[@src=’’]/ preceding::img[1]

Absolute XPath method:
If we give whole path to identify element and it is called as absolute xpath.
Example: /html/head/body/div/input

Text method in XPath:
Syntax- tagname[text()=’text which is visible on page’]
Note- While using text() method make sure you provide the exact text else it will not match
Example //b[text()=’Admin’]

Text method with contains:
Syntax- tagname[contains(text(),’partial text which you want to search ‘)]
Example – //*[contains(text(),’Employee Distribution by Subunit’)]

Relative and Absolute XPath method
//parent-xpath/absolute xpath
//input[@id=’section’]/div/input

Xpath Axes
Following
Proceeding
ancestor

// means searches through the page
/ means searches only after the following element

various methods available in xpath
using And & Or
Contains()
Start-with()
Text()
Following::
Preceding::
Ancestor
Absolute Vs Relative Path

cssSelector:
in terms of performance, CSS perform well as compared to XPATH and CSS will not change based on browsers, that is it will behave same in all browsers but xpath will behave differently in IE browser.

symbol used while writing css selector in selenium
attribute symbol used
id #
className .
attribute tagname[attribute='value']
multiple attribute tagname[attribute1='value1'][attribute2='value2']
contains *
starts with ^
Ends with $

CSS Selector is the combination of an element selector and a selector value which identifies the web element within a web page. The composite of element selector and selector value is known as Selector Pattern.

CSS Selector: ID
Example:
css=input#Email

CSS Selector: Class
css=label.remember

CSS Selector: Attribute
css=input[type=’submit’]
css=input#Passwd[name='Passwd']

tagName[attributename=attributeValue]
Example 1: input[id=email]
Example 2: input[name=email][type=text]

WebElement ele1 = driver.findElement(By.cssSelector(".primary-btn"));
WebElement ele2 = driver.findElement(By.cssSelector(".btn.primary-btn"));
WebElement ele3 = driver.findElement(By.cssSelector(".submit.primary-btn"));

WebElement Email = driver.findElement(By.cssSelector("input[id=email]"));
Email.SendKeys("hello@sampleemail.com");