What is CSS Selector in Selenium WebDriver

1.What is CSS ?

• CSS Selectors are string patterns used to identify an element based on a combination of HTML tag, id, class, and attributes.
• A CSS Selector is a combination of an element selector and a value which identifies the web element within a web page
• Locating by CSS Selector is more complicated than other methods, 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.

2.Locating by CSS Selector - Tag and ID

   Syntax :-   tagname#id

Example:

    css=input#P11_USERNAME

3.Locating by CSS Selector - Tag and Class

Locating by CSS Selector using an HTML tag and a class name is 

similar to using a tag and ID, but in this case, a dot (.) is used 

instead of a hash sign.

Syntax:- tagname.className

 

Example:

    

    css=a.htmldbInstruct

4.Locating by CSS Selector - Tag and Attribute

This strategy uses the HTML tag and a specific attribute of the 

element to be accessed.

Syntax:- tagname[any attribute='value of attribute']

Step 1. Navigate to Mercury Tours' Registration page 

(http://newtours.demoaut.com/mercuryregister.php) and inspect the 

"Last Name" text box. Take note of  its HTML tag ("input" in this 

case) and its name ("lastName").

 

Example:

    css=input[name=lastName]