How to find css slector in Chrome browser

How to find css slector in Chrome browser
Steps:
1) Load the URL in chrome browser
2) Right click on mouse and select inspect option
3) Select inspect option in tool bar (first option (has arrow symbol))
4) Now select which filed locator you want
5) It highlights html code with blue color
6) We dont see css selector in right click options
7) See below hight lighted (below tool bar)
8) Mouse hiover on each and observe highted in page
9)  capy hightted code and paste in your selenium code
10) Works fine
ex - facebook email filed ()

Regular expresstion for locators (css selector)

Regular expresstion for locators (css selector)
it can be used when values are keep changing
ex - username1,username2 etx...
Note: Keep contstant word a side
syntax - tagName[Attribute*='value')]
ex - input[name*='username')]

Regular expresstion for locators (xpath)

Regular expresstion for locators (xpath)
it can be used when values are keep changing
ex - username1,username2 etx...
Note: Keep contstant word a side
syntax - //tagName[contains(@attribute,'value')]
ex - //input[contains(@name,'username')]

Different ways to write css selector

Different ways to write css selector
css selector syntax -
1)  tagName[attribute='value']
2) tagName#id (input#username)
3) tagname.classname

Different ways to write xpath

way 1:
Xpath syntax 1 - //tagName[@attribute='value']
way 1 - driver.findElement(By.xpath("//input[@id='email']")).sendKeys("hello");
way 2:
Xpath syntax 2 - //*[@attribute='value']
way 2 - driver.findElement(By.xpath("//*[@id='email']")).sendKeys("hello");

Note : here, * represents tagName (* verifies directly where //*[@id='email'])

How to validate xPath (whether the written xpath exist in page or name)

How to validate xPath (whether the written xpath exist in page or name)
Steps:
1) Load the URL in chrome browser
2) Right click on mouse and select inspect option
3) Select inspect option in tool bar (first option (has arrow symbol))
4) Now select which filed locator you want
5) It highlights html code with blue color
6) Right click on high lighted line
7) select Copy
8) select copy xpath
9) Go to console tab
xpath validation - $x ($x("//*[@id='pass']"))
css validation - $ ($("#loginbutton"))

How to find xPath in Chrome browser

How to find xPath in Chrome browser
Steps:
1) Load the URL in chrome browser
2) Right click on mouse and select inspect option
3) Select inspect option in tool bar (first option (has arrow symbol))
4) Now select which filed locator you want
5) It highlights html code with blue color
6) Right click on high lighted line
7) select Copy
8) select copy xpath
9) paste in your selenium code
10) Works fine
ex- facebook email filed (//*[@id="email"])