Write Dynamic CSS Selector in Selenium using multiple ways

Selenium supports multiple locators which will help you to identify web element and perform the operation based on your requirements.We will discuss about CSS Selector in Selenium and you will feel the importance of the same.

Selenium supports 8 locators, please check below screenshot.

 

Selenium_locators

 

This is one of the most frequent asked questions in interview like how many selectors are present and which one is best and where to use which locator?

In terms of performance, CSS perform well as compared to XPATH and CSS will not change based on browsers, that is it will behave same in all browsers but xpath will behave differently in IE browser.

Recently I published an article on IE browser issues and raised the same point.

 

In this post we will discuss some basics CSS Selector in Selenium and usage of them.

Please find the below table which will give you brief introduction about different ways to write CSS in Selenium.

I have listed down only limited one but widely used in any application.

 

Symbol used while writing CSS selector in Selenium Webdriver

 

Css Selector Table

 

 

Please check the Youtube video for CSS 

 

 

 

 

Different ways to write CSS selector in Selenium to identify Dynamic elements

 

I will use WordPress application for demo purpose and will try to show all ways.

Before starting with CSS in Selenium make sure you have firebug installed and active.

If you are completely new to Selenium then download firebug and firepath and start your CSS exercise.

 

Start-Firebug-Select-CSS

 

 

Now type only  “a” in the search bar and you will notice all links with be highlighted but we do not want all the link so we will add some filter condition to get unique match.

 

 

Get all elements

 

Now have a close look and check what each link is doing.

 

 

get all input tags

 

Last time just type input and you will get 6 matching nodes.

It means it is returning all elements which, comes under input tags.

Check W3School link if you are not familiar with input tag.

get login using attribute

 

Now you are confident with single tag. So now lets add some condition and check the result.

 

 

 

Find CSS Selector using Single Attribute

 

 

 

CSS Single attribute

 

 

 

Find CSS using Multiple attributes.

 

 

 

Selenium_css_multiple_attribue

 

 

Find CSS using id and Class name

 

Class name generally will not be unique so always try class name with some other attributes.

Selenium_Css_Id_attribute

 

Selenium_Css_Class_attribute

 

 

Find CSS using contains

In CSS we will use * symbol to check particular attribute contains that value or not

In below example it will partially check if link title contains “Password lost ” if yes then it will match.

I have taken only link in this example but you can take any tag and any attribue.

 

8_css

One more example with id attribute

9_css

 

 

 

Find CSS using Start-with

 

In below example I have taken only link but you can take any element.

 

CSS Start-with method

 

 

Find CSS using ends-with

 

 

CSS Selector in Selenium

 

Now you must be having a clear picture in mind for CSS Selector in Selenium and I would recommend to try all technique at least once using same or some other applications.

Check this link from SauceLabs for CSS Selector

You can always use XPATH and CSS in your script depends on your requirement.

If you want to run your test script in all browser like Cross Browser testing then go with CSS because it will have same in all browsers.

 

Please drop your comment or your feedback below if any and if you find this article then please share with your friends as well.

 

You can like our Facebook Page for more updates Learn Automation Page
Join our facebook group for any query Selenium Group Discussion

 

 

35 Comments

  1. Shambo
  2. Shambo
  3. Shambo
  4. Shambo
  5. Veeresh
  6. anurag
  7. Nilesh
  8. sanjay