Learn CSS Selector Selenium WebDriver Tutorial [Without Using Any Tools]

CSS Selector Selenium WebDriver Tutorial

In the previous post, we have seen “locators in Selenium“. In this post, we see CSS Selector Selenium – How To Locate Element By CSS Selector In Selenium. Find the below links on How to find elements on a web page using different types of locators.

1. “How To Locate Element By ID Locator
2. “How To Locate Element By Name Locator
3. “How To Locate Element By Class Name Locator
4. “How To Locate Element By Tag Name Locator
5. “How To Locate Element By Link Text/Partial Link Text Locator
6. “How To Locate Element By XPath Locator

Coming to the actual post..

CSS Selectors Locator:

There is a debate on the performance of CSS Locator and XPath locator and the debate on the performance of CSS and XPath locator is out of scope of this post. Most of the automation testers believe that using CSS selectors makes the execution of script faster compared to XPath locator. CSS Selector locator is always the best way to locate elements on the page. CSS is always same irrespective of browsers. In this post, I will show you how to find element locators using CSS without using any tools like Firebug or Firepath.

Must Read: How To Write Dynamic XPath in Selenium WebDriver

CSS Selector Selenium

img: CSS Selector Selenium WebDriver Tutorial

Following 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

Refer to W3C CSS-Selectors for a list of generally available CSS Selectors

Tag and ID:

CSS ID Selector.

Syntax:

Open Mozilla Firefox and navigate to Gmail application.

Open Firebug and inspect the Enter your email input box. Take a note of its Tag and ID. Follow the below screenshot to do so.

Copy the below mentioned script and execute in your system.

Locate Element By CSS Selector Locator Tag ID

Value to be added in the By.cssSelector method:

Script:

Tag and Class:

If multiple elements have the same HTML tag and class, then the first one will be recognized.

Syntax:

Open Mozilla Firefox and navigate to Facebook application.

Open Firebug and inspect the Email input box. Take a note of its Tag and Class. Follow the below screenshot to do so.

Copy the below mentioned script and execute in your system.

Locate Element By CSS Selector Locator Tag Class

Value to be added in the By.cssSelector method:

Script:

Tag and Attribute:

If multiple elements have the same HTML tag and attribute, then the first one will be recognized. It acts in the same way of locating elements using CSS selectors with the same tag and class.

Syntax:

Open Mozilla Firefox and navigate to Gmail application.

Open Firebug and inspect the Enter your email input box. Take a note of its Tag and Attribute. Follow the below screenshot to do so.

Copy the below mentioned script and execute in your system.

Locate Element By CSS Selector Locator Tag Attribute Value

Value to be added in the By.cssSelector method:

Script:

Tag, Class And Attribute:

Syntax:

Open Mozilla Firefox and navigate to Facebook application.

Open Firebug and inspect the Email input box. Take a note of its Tag, Class and Attribute. Follow the below screenshot to do so.

Copy the below mentioned script and execute in your system.

Locate Element By CSS Selector Locator Tag Class Attribute

Value to be added in the By.cssSelector method:

Script:

SUB-STRING MATCHES:

CSS in Selenium has an interesting feature of allowing partial string matches using ^, $, and *.

Have a look on the below mentioned HTML

Starts with (^): 

To select the element, we would use ^ which means ‘starts with

Syntax:

Value to be added in the By.cssSelector method:

Add the below step in the script to find the element and write a text as “hi”

Ends with ($): 

To select the element, we would use $ which means ‘ends with’

Syntax:

Value to be added in the By.cssSelector method:

Add the below step in the script to find the element and write a text as “hi”

Contains (*): 

To select the element, we would use * which means ‘sub-string

Syntax:

Value to be added in the By.cssSelector method:

Add the below step in the script to find the element and write a text as “hi”

Also we can use ‘contains()’:

Locating Child Elements(Direct Child):

Syntax: parentLocator>childLocator

CSS Locator: div#buttonDiv>button

Explanation: ‘div#buttonDiv>button’ will first go to div element with id ‘buttonDiv’ and then select its child element – ‘button’

Locating elements inside other elements (child or sub-child):

Syntax: parentLocator>locator1 locator2

CSS Locator: div#buttonDiv button

Explanation: ‘div#buttonDiv button’ will first go to div element with id ‘buttonDiv’ and then select ‘button’ element inside it (which may be its child or sub child)

Locating nth Child:

To find nth-child css.

To locate the element with text ‘QTP’, we have to use “nth-of-type”

Similarly, To select the last child element, i.e. ‘Sikuli’, we can use

If you have any queries by finding elements using CSS Selector Selenium, please comment below in the comment section. Like this post? Don’t forget to share it!

Here are few hand-picked articles for you to read next:

CSS Selectors Selenium

Sumasri is a Sr. Software Test Engineer. Currently working in an MNC. She is a co-founder of Software Testing Material. She has an exclusive experience in the field of Software Testing. She writes here about Manual Testing and Automation Testing.

1 thought on “Learn CSS Selector Selenium WebDriver Tutorial [Without Using Any Tools]”

  1. By.cssSelector(“input:contains(‘id’)”)

    please explain above line.

Leave a Comment

Share via
Copy link
Powered by Social Snap