CSS Selector In Selenium With Example using Java

CSS Selector In Selenium Webdriver Using Java

What is CSS Selector in Selenium?

In Selenium webdriver if we cannot locate the elements using ID, Name, Class, etc. then we should choose CSS selector as the best alternative.

CSS Stands for "Cascading Style Sheet" and is defined to display HTML in structured and colourful styles applied to a webpage.

Basic HTML Tags:

Before learning CSS Selector first understand the basic HTML tag.

HTML Tags

<!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

Type of CSS Selector in Selenium with Example

There are Five types of CSS Selector in Selenium

Tag name and ID
Tag name and Class
Tag name and Attribute
Tag name and Sub-String
Tang name and Inner String

How To Locate Element in Selenium Java With CSS Selector?

Tag name and ID (css=<HTML tag><#><Value of ID attribute>)

Syntax:

The basic syntax of the CSS Selector (Tagname and ID) is given below.

driver.findElement(By.cssSelector(“<tagname>#<id value>”));

Example:

To understand Css Selector (tagname#Id) we have taken example of facebook login page. We will locate the email id field using CSS Selector (tagname#id).

The Basic Example of the CSS Selector (Tagname and ID) is given below.

WebElement email= driver.findElement(By.cssSelector("input#email"));

CSS Selector Tagname and ID With Example

Selenium Code:

public class CssSelector {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		// TODO Auto-generated method stub
				System.setProperty("webdriver.chrome.driver","C:\\Users\\Admin\\Downloads\\chromedriver-win64 (1)\\chromedriver-win64\\chromedriver.exe");
		       WebDriver driver = new ChromeDriver();
		       //Hit URL
		       driver.get("https://www.facebook.com/");
		       //Enter email id
		      WebElement email=  driver.findElement(By.cssSelector("input#email"));
		      email.clear();
		      email.sendKeys("upcs.in@gamil.com");

Tag name and Class (css=<HTML tag><.><Value of ID attribute>)

Syntax:

The basic syntax of the CSS Selector (Tagname and Class) is given below.

driver.findElement(By.cssSelector(“<tagname>.<class value>”));

Example:

To understand Css Selector (tagname.class) we have taken example of facebook login page. We will locate the forgot password field using CSS Selector (tagname.class).

The Basic Example of the CSS Selector (Tagname and ID) is given below.

driver.findElement(By.cssSelector("div._6ltj")).click();

CSS Selector in Selenium With tagname and Class With example

Selenium Code:

public class CssSelectorExample {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		// TODO Auto-generated method stub
				System.setProperty("webdriver.chrome.driver","C:\\Users\\Admin\\Downloads\\chromedriver-win64 (1)\\chromedriver-win64\\chromedriver.exe");
		       WebDriver driver = new ChromeDriver();
		       //Hit URL
		       driver.get("https://www.facebook.com/");
		       //Enter email id
		      driver.findElement(By.cssSelector("div._6ltj")).click();
		      driver.close();
		  

Tag name and Attribute (css=<HTML tag><[attribute=Value of attribute]>)

Syntax:

The basic syntax of the CSS Selector (Tagname and attribute) is given below.

driver.findElement(By.cssSelector(“<tagname>[href=’<href value>’]”));

Example:

To understand CSS Selector (tagname[attribute='value']) we have taken the example of the Facebook login page. We will locate the password field using CSS Selector (tagname[attribute='value'])

The Basic Example of the CSS Selector (Tagname and ID) is given below.

WebElement password = driver.findElement(By.cssSelector("input[type='password']"));

CSS Selector example tagname and attribute With Example

Selenium Code:

public class FirstProgram {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		// TODO Auto-generated method stub
				System.setProperty("webdriver.chrome.driver","C:\\Users\\Admin\\Downloads\\chromedriver-win64 (1)\\chromedriver-win64\\chromedriver.exe");
		       WebDriver driver = new ChromeDriver();
		       //Hit URL
		       driver.get("https://www.facebook.com/");
		       //Enter email id
		      WebElement email=  driver.findElement(By.cssSelector("input#email"));
		      email.clear();
		      email.sendKeys("upcs.in@gamil.com");
		    	 //enter password
		      WebElement password = driver.findElement(By.cssSelector("input[type='password']"));
		      password.clear();
		      password.sendKeys("Tulsipur");
		     