Selenium Webdriver is very powerful to automate web applications. We can identify web elements in Selenium Webdriver using various locators and CSS Selector is one of them.CSS Selector in Selenium acts as the best workaround to find an element when we don’t have an option to locate an element using Id or Name. Also, it is faster and simpler than XPath.To know more about XPath please refer exclusive article on Xpath XPath in Selenium WebDriver with Example.In the following examples, we will see how to use CSS Selectors in Selenium.
CSS Selectors by Attribute
Suppose we have an Html tag with the following attributes.
|
1 2 3 |
<input type="text" id="testid" name="username" class="myclass"> |
The syntax to locate elements by attribute are as follows
tagName[attributename=’attributeValue’]
Example 1
|
1 2 3 |
driver.findElement(By.cssSelector("input[name='username']")); |
Since name might not be a unique property on the web we can combine more than one attribute to find an element uniquely. For that, the syntax is as follows:
|
1 2 3 |
tagName[attributename1='attributeValue1'][attributename2='attributeValue2'] |
Example 2
|
1 2 3 |
driver.findElement(By.cssSelector("input[name='username'][id='testid']")); |
CSS Selector Tag and ID Attribute
In CSS, a hash (#) notation refers to the id attribute of an element.
Syntax 1: <Html tag><#><ID attribute value>
Syntax 2: <#><ID attribute value>
Example 1:
|
1 2 3 |
driver.findElement(By.cssSelector("input#testid")) |
Example 2:
|
1 2 3 |
driver.findElement(By.cssSelector("#testid")) |
CSS Selector Class Attribute
A dot (.) notation is used to refer to the class attribute of an element.
Syntax 1: <Html tag><.><ID attribute value>
Syntax 2: <.><Class attribute value>
Example 1:
|
1 2 3 |
driver.findElement(By.cssSelector("input.myclass")) |
Example 2:
|
1 2 3 |
driver.findElement(By.cssSelector(".myclass")) |
Handling Multiple Classes or Space Character in Class Name
Suppose we have an Html tag with the following attributes.
|
1 2 3 |
<input type="text" id="testid" name="username" class="abc pqr xyz"> |
In the above HTML tag, three classes (abc, pqr, and xyz) are being used for the single text. box. You can not write a statement like By.cssSelector(“.abc pqr xyz”) to identify an element.If you write such code Selenium will throw NoSuchElementException error. Developers can use such class having multiple class names for different elements on the page. Out of all the class names, a few of the names might be unique. To handle such a scenario we have to join the classes using a dot(.) notation unless the required element is identified uniquely. The following are the possible ways to refer to the element.
- css=.abc
- css=.abc.pqr
- css=.pqr.xyz
- css=.abc.xyz
- css=.abc.pqr.xyz
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
driver.findElement(By.cssSelector(".abc")); //or driver.findElement(By.cssSelector(".abc.pqr")); //or driver.findElement(By.cssSelector(".pqr.xyz")); //or driver.findElement(By.cssSelector(".abc.xyz")); //or driver.findElement(By.cssSelector(".abc.pqr.xyz")); |
Locate Elements with Sub-strings or Partial Match
Using CSS locators, we can also locate elements with some matching patterns or sub-strings. It becomes very helpful to identify elements with dynamically generated ids. This is achieved by using three special characters ^, $, and *.
‘^’ symbol, represents the starting text in a string.
‘$’ symbol represents the ending text in a string.
‘*’ symbol represents contains text in a string.
Let’s consider a web page has the following HTML Tags
|
1 2 3 4 5 |
<div id="1234_test"> <div id="apple_6789"> <div id="1234_abcd_xyz"> |
CSS Selector Starts With
It helps in locating element that starts with a particular value. we would use ^= which means “starts with”.
Syntax:
css=(HTML tag[attribute^=starting characters of the string])
Example: Locating the first element of the Div tag.
|
1 2 3 |
driver.findElement(By.cssSelector("div[id^='1234']")) |
CSS Selector End with
It helps in locating elements that end with a particular value. we would use $= which means “end with”
Syntax:
css=(HTML tag[attribute$=ending characters of the string])
Example: Locating the second element of the Div tag.
|
1 2 3 |
driver.findElement(By.cssSelector("div[id$='6789']")) |
CSS Selector Contains
It is used to locate an element by using a matching substring. To select the last div element, we would use *= which means “sub-string’
Syntax:
css=(HTML tag[attribute*=sub string])
Example: Locating the second element of the Div tag.
|
1 2 3 |
driver.findElement(By.cssSelector("div[id*='_abcd_']")) |
CSS :not() Selector with Multiple Classes
The :not() selector is used when you want to select an element that doesn’t have a certain class. Basically, it prevents specific items from being selected.
Suppose you have various elements on a page that have the same attribute and attribute value except some of them have additional values. See the below example.
|
1 2 3 4 5 6 7 |
<div class="bevon alpha carrier-1 middleContainer clearfix" > <div class="bevon beta carrier-2 middleContainer clearfix"> <div class="bevon carrier-3 middleContainer"> <div class="bevon carrier-4 middleContainer"> |
As you can in the above tags all four divs contain “carrier-“ but the first two also contain “clearfix”.Suppose we don’t want to select the first two.
Example:
The CSS selector for Not selecting the first two divs is
|
1 2 3 |
driver.findElement(By.cssSelector("div[class*='carrier-']:not([class*='clearfix'])")); |
Locating Child Element using nth-of-child
Child elements are used to locate elements inside other elements.
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul id="automationTool"> <li>LeanFT</li> <li>Selenium</li> <li>UFT</li> <li>LoadRunner</li> </ul> |
You can observe that the individual list elements don’t have any attribute value associated with them. To locate any of the list elements with a required text we have to use nth-of-type. For example, Selenium is the second element that can be located using the following code.
Example:
|
1 2 3 |
driver.findElement(By.cssSelector("ul#automationTool li:nth-of-type(2)")); |
Example:
|
1 2 3 |
driver.findElement(By.cssSelector("ul#automationTool li:first-of-type")); |
Recommended Posts
- Handle Dynamic Web Tables In Selenium WebDriver
- Select Value From Multi-Select Dropdown And Dropdown with CheckBoxes
- How to Select a Value from a DropDown In Selenium WebDriver?
- Top #23 Most Useful Selenium WebDriver Commands That You Must know
- XPath in Selenium WebDriver with Example
- How to Use AutoIT In Selenium WebDriver
- Read and Write Excel File in Java Using Apache POI Lib
- Intuitive Way of MySQL Database Testing in Selenium | LeanFT
- Page Object Model (POM) & Page Factory in Selenium WebDriver
