CSS-Complete

CSS Selector: ID
Syntax:css=<HTML tag><#><Value of ID attribute>
Ex:css=input#Email

CSS Selector: Class
Syntax:css=<HTML tag><.><Value of Class attribute>
Ex:“css=label.remember”


CSS Selector: Attribute

Syntax:css=<HTML tag><[attribute=Value of attribute]>
Ex:“css=input[type=’submit’]”

CSS Selector: ID/Class and attribute
Syntax:css=<HTML tag><. Or #><value of Class or ID attribute><[attribute=Value of attribute]>
Ex:“css=input#Passwd[name=’Passwd’]”
Two or more attributes can also be furnished in the syntax. For example, “css=input#Passwd[type=’password’][name=’Passwd’]”.

CSS Selector: Sub-string

CSS in Selenium allows matching a partial string and thus deriving a very interesting feature to create CSS Selectors using sub strings. There are three ways in which CSS Selectors can be created based on mechanism used to match the sub string.

Types of mechanisms

Match a prefix

It is used to correspond to the string with the help of a matching prefix.

Syntax:css=<HTML tag><[attribute^=prefix of the string]>              

^ – Symbolic notation to match a string using prefix.
Prefix – It is the string based on which match operation is performed. The likely string is expected to start with the specified string.
Ex:css=input#Passwd[name^=’Pass’]

Match a suffix

It is used to correspond to the string with the help of a matching suffix.

Syntax:css=<HTML tag><[attribute$=suffix of the string]>              

# – Symbolic notation to match a string using suffix.
Suffix – It is the string based on which match operation is performed. The likely string is expected to ends with the specified string.
For Example: Lets again consider “Password textbox”, so the corresponding CSS Selector would be:
Ex:css=input#Passwd[name$=’wd’]

Match a sub string
It is used to correspond to the string with the help of a matching sub string.

Syntax:css=<HTML tag><[attribute*=sub string]>              

* – Symbolic notation to match a string using sub string.
Sub string – It is the string based on which match operation is performed. The likely string is expected to have the specified string pattern.

Ex: css=input#Passwd[name$=’wd’]

CSS Selector: Inner text

Syntax:css=<HTML tag><:><contains><(text)>