Locators CSS and XPath

Identifying UI elements:
1. XPath (DOM structure) - Search elements based on hierarchy
2. CSS (CSS Selectors) - Search elements based on CSS Selectors

Whether to use CSS or XPath?
Try to find the element uniquely with CSS if its not possible go for XPath
Disadvantages with XPath:
Few of the XPath designed in one browser may not work in other
Comparatively slower than CSS

Helpful cheatsheet if we want to learn more different Locators:
https://www.red-gate.com/simple-talk/development/dotnet-development/xpath-css-dom-and-selenium-the-rosetta-stone/

Most common ways that we use in day to day work-
XPath: tag-name, attributes, text, indexes…….
CSS: Id, class, attributes, indexes….
How to construct locators: Manually(recommended) or any tool like fire path(FF add-on)

XPath examples:
1) Identify h1
eg: //h1
2)Identify using attribute value
eg: //div[@class=’css1’]
3) Identify using text
eg:
//li[text()=’apple’] [OR]
//li[normalize-space(.)=’apple’]
4) Using indexing
eg: //ul[@class=’a1’]/li[1]
5) Using and/or condition in xpath
eg:
//div[id=’x1’ and class=’css1’]
//div[id=’x1’ or class=’css1’]
6) using contains, starts-with, ends-with
For text:
//h1[contains(.,’Welcome’)]
For attriubute values:
//input[@class, ‘css2’]
//input[starts-with(@class,’css’)]
6a)preceding and preceding-sibling
//li[text()=’onion’]//preceding::li
//li[text()=’onion’]//preceding-sibling::li
6b)following and following-sibling
//li[text()=apple]//following::li
//li[text()=’apple’]//following-sibling::li

CSS selectors examples:
1)using tag-name
h1
2)Using attribute values
div[id=’x1’]
3)Using id
div#x1
4)Using classname
div.css1
5) multiple attribute values
div[id=’x1’] [class=’css1’]
6) attribute value—
Start with: ul[class^=’a’]
ends-with: ul[class$=’1’]
Contains: ul[class*=’a’]
7.Indexing:
li:nth-child(1)