1. What is Selenium CSS Selector?
It is one of the locators in selenium using which we identify web elements on the web page. CSS stands for Cascading Style Sheets, which is used for styling the different elements of an HTML webpage. CSS Selector locator is always the best way to locate elements on the web page. CSS is always the same irrespective of browsers.
2. Benefits of CSS Selector
- It is faster compared to other selectors
- More readable
- Most offenly used
3. Syntax of CSS Selector
CSS Selector Syntax
- HTML Tag: It is the tag used to denote the web element.
- #: The # sign is used to symbolize the ID attribute. It is mandatory to use the # sign when using ID attribute.
- Value of ID attribute: It is the value of an ID attribute which is being accessed. The value of ID attribute is always preceded by a # sign.
4. Commonly used CSS Selector Formats
Below are some of the mainly used formats of CSS Selectors.
- Tag and ID
- Tag and Class
- Tag and Attribute
- Tag, Class, and Attribute
- Sub-String Matches
- Starts With (^)
- Ends With ($)
- Contains (*)
- Child Elements
- Direct Child
- Sub-child
- nth-child
4.1) HTML Tag and ID
|
1 2 3 |
css=tag#id |
Example:
-
- Open Chrome browser and navigate to Gmail web application.
- Right-click Email or phone input box and select Inspect.
Email Inspect
-
- Below screenshot shows Tag and ID of Email or phone element.
Value to be added in the By.cssSelector method:
|
1 |
css=input#Email |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
package com.journaldev.selenium; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class SeleniumCSSLocators { public static void main (String [] args){ WebDriver driver = new ChromeDriver(); driver.get("https://www.gmail.com"); // Here Tag = input and Id = Email driver.findElement(By.cssSelector("input#Email")).sendKeys("journaldev"); } } |
4.2) HTML Tag and Class
If multiple elements have same HTML tag and class, then selenium will recognize first one.
Syntax: css=tag.class
Example:
-
- Open Chrome browser and navigate to Facebook application.
- Right-click Email or phone input box and select Inspect.
Email Inspect Facebook
-
- Below screenshot shows Tag and Class of Email or phone element.
Value to be added in the By.cssSelector method:
|
1 2 3 |
css=input.inputtext |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
package com.journaldev.selenium; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class SeleniumCSSLocators { public static void main (String [] args){ WebDriver driver = new ChromeDriver(); driver.get("https://www.facebook.com/"); // Here Tag = input and Class = email driver.findElement(By.cssSelector("input.inputtext[name=email]")).sendKeys("journaldev"); } } |
4.3) HTML Tag and Attribute
If multiple elements have the same HTML tag and attribute, then selenium will recognize the first one.
Syntax:
|
1 2 3 |
css=tag[attribute=value] |
Example:
-
- Open Chrome browser and navigate to Gmail application.
- Right-click Email or phone input box and select Inspect.
Inspect Email CSS
-
- Below screenshot shows Tag and Attribute of Email or phone element.
Value to be added in the By.cssSelector method:
|
1 2 3 |
css=input[name=identifier] |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
package com.journaldev.selenium; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class SeleniumCSSLocators { public static void main (String [] args){ WebDriver driver = new ChromeDriver(); driver.get("https://www.gmail.com"); // Here Tag = input and Id = identifier driver.findElement(By.cssSelector("input[name=identifier]")).sendKeys("journaldev"); } } |
4.4) HTML Tag, Class and Attribute
Syntax:
|
1 2 3 |
css=tag.class[attribute=value] |
Example:
-
- Open Chrome browser and navigate to Facebook application.
- Right-click Email or phone input box and select Inspect.
- Below screenshot shows Tag, Class, and Attribute of Email or phone element.
Email Attribute
Value to be added in the By.cssSelector method:
|
1 |
css=input.inputtext[name=email] |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
package com.journaldev.selenium; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class SeleniumCSSLocators { public static void main (String [] args){ WebDriver driver = new ChromeDriver(); driver.get("https://www.facebook.com/"); // Here Tag = input and Class = email driver.findElement(By.cssSelector("input.inputtext[name=email]")).sendKeys("journaldev"); } } |
5. Substring Matches
There are some special CSS selectors to match partial values of the attributes like ^, $, and *.
5.1) Starts with (^)
In order to select the element that starts with something, we use ^ which means ‘starts with’.
Syntax:
|
1 |
css=<[attribute^=string prefix] |
Value to be added in the By.cssSelector method:
|
1 |
css=input.input[id^='Em'] |
In the script add the below step to find the element and write a text as “journaldev”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
package com.journaldev.selenium; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class CSSLocatorsStartswith { public static void main (String [] args){ WebDriver driver = new ChromeDriver(); driver.get("https://www.facebook.com/"); driver.findElement(By.cssSelector("input[id^='Em']")).sendKeys("journaldev"); } } |
5.2) Ends with ($)
In order to select the element that ends with something, we use $ which means ‘ends with’.
Syntax:
|
1 |
css=[attribute$=attributeValue] |
Value to be added in the By.cssSelector method:
|
1 |
css=input[id$='100'] |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
package com.journaldev.selenium; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class CSSLocatorsEndswith { public static void main (String [] args){ WebDriver driver = new ChromeDriver(); driver.get("https://www.facebook.com/"); driver.findElement(By.cssSelector("input[id$='100']")).sendKeys("journaldev"); } } |
5.3) Contains (*)
In order to select the element that contains a substring, we use * which means ‘sub-string’.
Syntax:
|
1 |
css=[attribute*=attributeValue] |
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
package com.journaldev.selenium; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; public class CSSLocatorsContains { public static void main (String [] args){ WebDriver driver = new ChromeDriver(); driver.get("https://www.facebook.com/"); driver.findElement(By.cssSelector("input[id*='id']")).sendKeys("journaldev"); } } |
We can also use the contains() method.
|
1 2 3 |
driver.findElement(By.cssSelector("input:contains('id')")).sendKeys("journaldev"); |
6. Locating Child Elements (Direct Child)
Syntax: parentLocator>childLocator
Example:
For the Sample HTML:
|
1 2 3 4 5 |
<div id="buttonDiv" class="small"> <button id="submitButton1" type="button" class="btn">Submit</button> </div> |
CSS Locator: div#buttonDiv>button
Description: ‘div#buttonDiv>button’ will first go to div element with id ‘buttonDiv’ and then it will select its child element – ‘button’.
7. Locating elements inside other elements (child or sub-child)
Syntax: parentLocator>locator1 locator2
CSS Locator: div#buttonDiv button
Description: ‘div#buttonDiv button’ will go first to div element with id ‘buttonDiv’ and then it will select ‘button’ element inside it (which may be its child or sub child).
8. Locating nth Child
Example:
For the Sample HTML:
|
1 2 3 4 5 6 7 |
<ul id="testingTypes"> <li>Load Testing</li> <li>Security Testing</li> <li>Manual Testing</li> </ul> |
CSS Locator: #testingTypes li:nth-child(2)
Description:: ‘#testingTypes li:nth-child(2)’ will select the element with id ‘testingTypes’ and then locate the 2nd child of type li i.e. ‘Security Testing’ list item.
9. Conclusion
Selenium CSS Selector is one of the most frequently used strategies to locate web element because of its simplified syntax.