How to Use CSS Selector to
Identify Web Elements
for Selenium Scripts
Presented by: Mr. CHHOY Sokunthaneth
Software Engineering, Batch 3
CSS SELECTOR
• Id (#)
• Class (.)
• Attribute (<attribute>)
• Id/class and attribute
• Substring
• Inner text
Id
Syntax: css=<HTML tag><#><Value of ID attribute>
Syntax: css=<HTML tag><.><Value of Class attribute>
Class
Syntax: css=<HTML tag><[attribute=‘Value of attribute’]>
Attribute
Syntax: css=<HTML tag><. Or #><value of Class or ID
attribute><[attribute=‘Value of attribute’]>
Note: Two or more attributes can also be furnished in the syntax.
For example,
“css=input#Passwd[type=’password’][name=’Passwd’]”.
Id/Class and Attribute
Syntax:
Prefix: css=<HTML tag><[attribute^=prefix of the string]>
Suffix: css=<HTML tag><[attribute$=suffix of the string]>
Substring: css=<HTML tag><[attribute*=sub string]>
Substring
Syntax: css=<HTML tag><:><contains><(text)>
Inner text
Question?

How to use CSS Selector to identify Web Elements for selenium scripts

Editor's Notes

  • #3 Selector : identify web element within the webpages. CSS selector: combination of an element selector and web element selector to identify a particular web element within the webpages. Primitive type of CSS selector
  • #4 Html tag denotes webelement
  • #8 Substring: part of the string