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");


Tag name and Sub-String (css=<HTML tag><[attribute^=prefix of the string]>)
Tag name Inner String (css=<HTML tag><:><contains><(text)>)


Hope!!! The above Tutorial on CSS Selector with Example in Selenium is helpful for You...

Team,

QA acharya

CSS Selector in Selenium With Example 


Post a Comment

0 Comments