Selenium with C# 8 - How to use CSS Selectors in selenium locators? How to locate elements by CSS?

Locating HTML elements using CSS selectors

What is a css locator?
Locating Element Using CSS Selectors.
Cascading Style Sheets (CSS) is a style sheet language

How locate the elements in webpage using selenium css selector?

1. * CSSSelector
This is a wildcard, which will select all elements in the DOM.

usage : driver.FindElements(By.CssSelector(“*”))

Selects all elements in DOM

2. # CSSSelector
This refers to Id , which will select all element which is having Id Attribute in the DOM.

usage : driver.FindElement(By.CssSelector(“#Email”))

This selector will select a element whose id is Email

3. . CSSSelector
This refers to class , which will select all element which is having class Attribute in the DOM.

usage :
driver.FindElement(By.CssSelector(“. form-control”)).

This selector will select a element whose class name is form-control.

4. tagname[attribute=“value”] CSSSelector
This refers to particular element with the tagname attribute and value

usage :
driver.FindElement(By.CssSelector(“input[name=‘Email’]”))

This selector will select a element whose tagname is input, attribute is name and value is Email.

5. ^ CSSSelector
This refers to any attribute , which will select the first element, we would use ^= which means ‘starts with.

usage :
driver.FindElement(By.CssSelector(“ a[href^='/Home']”))

This selector will select a element whose tagname is a, attribute is href^ and value is /Home

6. $ CSSSelector
This refers to any attribute , which will select last element, we would use $= which means ‘ends with’

usage :
driver.FindElement(By.CssSelector(“a[href$='Training']”))

This selector will select a element whose tagname is a, attribute is href$ and value ends Training

7. Element Element CSSSelector
This will select only the descendant element that is preceded by the former element

usage :
driver.FindElement(By.CssSelector("footer p")).Text

This selector will select a p element which is a descendant element of footer tag.

8. Element + Element CSSSelector
This will select only the element that is immediately preceded by the former element

usage :
driver.FindElement(By.CssSelector("h1+p")).Text

This selector will select p tag element of preceded h1 tag.

9. Element Attribute CSSSelector
This will select only the Attribute.

usage :
driver.FindElement(By.CssSelector("form[role]")).Text

This selector will select the element which is having a role attribute (With or without value).

10. Checked CSSSelector
This will select the element which is checked (Check box and radio button)
usage :
driver.FindElement(By.CssSelector("input[type=checkbox]:checked"))
This selector will select the checked checkbox.

Possible Interview Questions on css locators
How to use different types of CSSSelector?
How to select all elements in a DOM using CSS selector?
How to select only checked or unchecked check boxes or radio buttons?
How to select element by attribute name?

[AnkproTraining]

Thank you for watching this video.
Hit the *_like_* button and *_subscribe_* to our channel! That will be awesome. We would be grateful to you. And also share this video in your circle via whatsapp, facebook and twitter.

[aimlgenai]

Thank you very much. I was working on selenium since last one year and depend on xpath and ids and classnames, now using cssselector we can select anything in the webpage. I didn't know about this till now. Thank you for explaining all the posibilities. Subscribed already liked also.

[nithyajrao]

Great!! Its clean and crisp explanation.
A beginners best Guide.
Appreciate your method of explanation... Felt as classroom explanation.

[shaiknvlogs]

Hi, I have a small doubt . Why you have given index[1] for . css selector can you please explain

[PR-v-]

Hi,
Count is getting error, what should I do?

[sirishapochiraju]

could you give us the website to practice