Question

What are CSS Selectors and how they can be used as locators in Selenium Webdriver

Answer 1

Hi Randeep, CSS Selectors are string patterns used to identify an element based on a combination of HTML tag, id, class, and attributes. Locating by CSS Selector is more complicated than locating by Id or Name, but it is the most common locating strategy of advanced Selenium users because it can access even those elements that have no ID or name. CSS Selectors have many formats, but we will only focus on the most common ones.

• Tag and ID: Syntax for CSS Selector with Tag and ID is css=tag#id
  For eg. "css=input#email"

• Tag and class: Syntax for CSS Selector with Tag and ID is css=tag.class
  For Eg. "css=input.inputtext"

• Tag and attribute: Syntax for CSS Selector with Tag and ID is css=tag[attribute=value]
  For eg. "css=input[name=lastName]"

• Tag, class, and attribute: Syntax for CSS Selector with Tag and ID is css=tag.class[attribute=value]
  For eg. "css=input.inputtext[tabindex=1]

• Inner text: Syntax for CSS Selector with Tag and ID is css=tag:contains("inner text")
  For eg. "css=font:contains("Boston")"