Selenium CSS Selector

Filed Under: Selenium

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

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


css=tag#id

Example:

  1. Open Chrome browser and navigate to Gmail web application.
  2. Right-click Email or phone input box and select Inspect.
  3. Email Inspect

    Email Inspect

  4. Below screenshot shows Tag and ID of Email or phone element.
  5. Email Tag ID

    Email Tag ID

Value to be added in the By.cssSelector method:

css=input#Email

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:

  1. Open Chrome browser and navigate to Facebook application.
  2. Right-click Email or phone input box and select Inspect.
  3. Email Inspect Facebook

    Email Inspect Facebook

  4. Below screenshot shows Tag and Class of Email or phone element.
  5. Email Tag Class

    Email Tag Class

Value to be added in the By.cssSelector method:


css=input.inputtext

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:


css=tag[attribute=value]

Example:

  1. Open Chrome browser and navigate to Gmail application.
  2. Right-click Email or phone input box and select Inspect.
  3. Inspect Email CSS

    Inspect Email CSS

  4. Below screenshot shows Tag and Attribute of Email or phone element.
  5. Email Tag Attribute

    Email Tag Attribute

Value to be added in the By.cssSelector method:


css=input[name=identifier]

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:


css=tag.class[attribute=value]

Example:

  1. Open Chrome browser and navigate to Facebook application.
  2. Right-click Email or phone input box and select Inspect.
  3. Below screenshot shows Tag, Class, and Attribute of Email or phone element.
  4. Email Attribute

    Email Attribute

Value to be added in the By.cssSelector method:

css=input.inputtext[name=email]

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:

css=<[attribute^=string prefix]

Value to be added in the By.cssSelector method:

css=input.input[id^='Em']

In the script add the below step to find the element and write a text as “journaldev”


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:

css=[attribute$=attributeValue]

Value to be added in the By.cssSelector method:

css=input[id$='100']

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:

css=[attribute*=attributeValue]

Example:


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.


driver.findElement(By.cssSelector("input:contains('id')")).sendKeys("journaldev");

6. Locating Child Elements (Direct Child)

Syntax: parentLocator>childLocator

Example:

For the Sample HTML:


<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:


<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.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages