Element recognition with cssSelector in Selenium Automation

 Now a days we are mostly preferring to use cssSelector than XPath. 

CSS selectors perform far better than Xpath and it is well documented in Selenium community. Here are some reasons,

Xpath engines are different in each browser, hence make them inconsistent

IE does not have a native xpath engine, therefore selenium injects its own xpath engine for compatibility of its API. Hence we lose the advantage of using native browser features that WebDriver inherently promotes.

Xpath tend to become complex and hence make hard to read in my opinion

However there are some situations where, you need to use xpath, for example, searching for a parent element or searching element by its text (I wouldn't recommend the later).

If you are testing content then do not use selectors that are dependent on the content of the elements. That will be a maintenance nightmare for every locale. Try talking with developers and use techniques that they used to externalize the text in the application, like dictionaries or resource bundles etc. 

• It’s faster than XPath.
• It’s much easier to learn and implement.
• You have a high chance of finding your elements.
• It’s compatible with most browsers to date.

Overall there are two circumstances where XPath is markedly slower than cssSelector. But they are easily avoidable.

The performance difference is slightly in favor of css-selectors for non-IE browsers and slightly in favor of xpath for IE browsers.

Following are few options how to make customer CSS.

1. id--> htmltag#id , #id

2. class --> htmltag.classname, .classname, .c1.c2.c3, htmltag.c1.c2.c3...cn

3. parent>childtag

ul#categories

#username

input#username

input.form-control.private-form__control.login-email

input#username.form-control.private-form__control.login-email

input.login-email

.form-control.private-form__control.login-email

4. htmltag[id='value']

//div[@id='test']

input[id='username'] -- css with one attribute

//input[@id='username'] --xpath

input[id='username'][type='email'] -- css with two attributes

//input[@id='username' and @type='email'] -- xpath

5. contains the text in css:

input[id*='user']

input[id*='name']

id = 

test_123

test_345

test_456

input[id*=test_]

6. starting the text in css:

input[id^='user']

7. ending the text in css:

input[id$='name']

8. comma in css:

div.private-form__input-wrapper, input#username

9. first-of-type in css:

ul#categories>li:first-of-type

10. last-of-type in css:

ul#categories>li:last-of-type

11. nth-of-type

ul#categories>li:nth-of-type(1)

ul#categories>li:nth-of-type(14)

ul#categories>li:nth-of-type(3)

ul#categories>li:nth-of-type(n) -- all

12. sibling of element:

div.private-form__input-wrapper + div

div.private-form__input-wrapper+div.private-form__meta

ul#categories>li:nth-of-type(3)+li

13. not operator in css:

input.form-control.private-form__control:not(.login-password)

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");