CSS Selector in Selenium: Locate Elements with Examples
Shreya Bose, Technical Content Writer at BrowserStack - February 11, 2023
Table of Contents
This article will discuss and describe, with examples, how one can use CSS selectors in Selenium test scripts to identify web elements. It will also depict CSS selectors’ syntax in Selenium.
It is recommended to gain a deeper understanding of locators in Selenium before narrowing it down to CSS selectors in particular.
What is a CSS Selector?
The CSS Selector combines an element selector and a selector value that can identify particular elements on a web page. Like XPath in Selenium, CSS selectors can locate web elements without ID, class, or Name.
Also Read: Quick CSS Selectors Cheat Sheet
Types of CSS Selectors (with Examples)
There are five types of CSS Selectors in Selenium tests:
- ID
- Class
- Attribute
- Sub-String
- Inner String
1. ID
In this example, the script will access the Email text box on the login form at Gmail.com.
The text box carries an ID attribute with the value “Email”. In this case, the ID attribute and its value are utilized to create a CSS selector that allows access to the text box.
How to create the Selenium CSS Selector for the web element
Locate the web element – Email textbox. The HTML tag here is “input” and the ID attribute’s value is “Email”. Combined, they refer to the Email textbox. This is the data required to create the CSS selector.
Verify locator value
Type “css=input#Email”(locator value) in Selenium IDE. Click on the Find button. The Email text box is highlighted, verifying the locator value.
Syntax
css=<HTML tag><#><Value of ID attribute>
- HTML tag: used to denote the web element to be accessed
- #: used to symbolize the ID attribute. Note that the hash is mandatory in cases where ID attribute is used to create a CSS Selector.
- Value of ID attribute: the value of the ID attribute being accessed. The hash always precedes this value.
When specifying CSS Selector in the target text box of Selenium IDE, ensure that it is preceded by “css=”.
Note: The first element marked in the page source will be identified if multiple web elements have the same HTML tag and attribute value.
2. Class
In this example, the script will access the “Stay signed in” checkbox that appears below the login form at Gmail.com.
The checkbox carries a Class attribute with the value “remember”. This Class attribute and value can be utilized to create a CSS selector that accesses the selected web element.
Here’s how to create a CSS Selector for the web element
Locate the web element – “Stay signed in” checkbox. The HTML tag, in this case, is “label” and the ID attribute’s value is “remember”. Combined, they refer to the “Stay signed in” checkbox.
Verify locator value
Type “css=label.remember”(locator value) in Selenium IDE. Click on the Find Button. The “Stay signed in” checkbox is highlighted, verifying the locator value.
Syntax
css=<HTML tag><.><Value of Class attribute>
- . : The dot is used to symbolize the Class attribute. Note that the dot is mandatory in cases where a Class attribute is used to create a CSS Selector. A dot always precedes the value of the Class.
Also Read: How to handle Action class in Selenium
3. Attribute
In this example, the script will access the “Sign in” button located beneath the login form at Gmail.com.
The “Sign in” button carries a type attribute with the value “submit”. This attribute and its value can be utilized to create a CSS Selector that will access the preferred web element.
Here’s how to create a CSS Selector in Selenium for the Web Element
Locate the web element – “Sign in” button. The HTML tag, in this case, is “input”, the attribute is the type, and the attribute’s value is “submit”. Combined, they refer to the “Sign in” button.
Verify locator value
Type “css=input[type=’submit’]” (locator value) in Selenium IDE. Click on the Find Button. The “Sign in” button will be highlighted, verifying the locator value.
Syntax
css=<HTML tag><[attribute=Value of attribute]>
- Attribute: Used to create the CSS Selector. It can be a value, type, name, etc. It is best to select an attribute with a value that uniquely identifies the accessed web element.
- Value of attribute: the value of the attribute that is being accessed.
4. Sub-string
In Selenium, CSS allows the matching of a partial string which offers a way to create CSS selectors utilizing sub-strings. This can be done in three ways.
Types of mechanisms used to match sub-strings
- Matching a prefix
- Matching a suffix
- Matching a substring
Match a prefix
This purpose is to correspond to the string by using a matching prefix.
Syntax
css=<HTML tag><[attribute^=prefix of the string]>
- ^ : the symbol used to match a string using a prefix
- Prefix: the string based on which the match operation is performed.
If one intends to identify the “Password textbox”, the CSS Selector, in this case, would be:
css=input#Passwd[name^='Pass']
Match a suffix
This purpose is to correspond to the string by using a matching suffix.
Syntax
css=<HTML tag><[attribute$=suffix of the string]>
- #: the symbol used to match a string using a suffix.
- Suffix: the string based on which the match operation is performed.
Again, if one intends to identify the “Password textbox”, the CSS Selector, in this case, would be:
css=input#Passwd[name$='wd']
Match a substring
This purpose is to correspond to the string by using a matching substring.
Syntax
css=<HTML tag><[attribute*=sub string]>
- *: the symbol to match a string using sub-string
- Sub string: the string based on which the match operation is performed.
Again, if one intends to identify the “Password textbox”, the corresponding CSS Selector would be:
css=input#Passwd[name$='wd']
5. Inner text
Using inner text helps identify and create CSS Selectors in Selenium WebDriver by utilizing a string pattern that the HTML Tag manifests on the web page. This mechanism is used most frequently to locate web elements because of its simplified syntax.
In this example, focus on the “Forgot email?” hyperlink present beneath the login form at Gmail.com.
The anchor tag that represents this hyperlink has some text within it. This text can create a CSS Selector that locates the required web element.
Syntax
css=<HTML tag><:><contains><(text)>
- : – the colon is used to symbolize the contains method
- contains – the value of the Class attribute that is being accessed
Update: The <contains> feature is deprecated and no longer supported by the W3C standard. CSS Selectors Level 3 standard is applicable across all major browsers. - text – the text displayed anywhere on the web page, irrespective of its location
It is helpful to find an element by CSS selectors, mainly because advanced developers and testers use it. By mastering it, one can use Selenium to its full potential, thus optimizing its abilities for automated Selenium testing.
Was this post useful?
We're sorry to hear that. Please share your feedback so we can do better
Thanks a lot for your feedback!
