Automation

Selenium WebDriver tutorial Step by Step

You are here: Home / Basic Selenium / Write Dynamic CSS Selector in Selenium using multiple ways

Write Dynamic CSS Selector in Selenium using multiple ways

by 45 Comments

Selenium_locators

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

 

 

Syntax- tagname[attribute='value']



Example- input[id='user_login']

 

CSS Single attribute

 

 

 

Find CSS using Multiple attributes.

 

Syntax- tagname[attribute1='value1'][attribute2='value2']

 

 

Selenium_css_multiple_attribue

 

 

Find CSS using id and Class name

 

Syntax using ID

tagname#id



Syntax using Classname

tagname.classname

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

Syntax- tagname[attribute*='value']

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

 

Syntax- tagname[attribute^='value']

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

 

CSS Start-with method

 

 

Find CSS using ends-with

Syntax- tagname[attribute$='value']

 

 

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

 

 

Reader Interactions

Comments

  2. Chris says

    Hi Mukesh,

    Is there a way to use css selector in an Appium Webview for identical radio button as shown below in xml format

    All these CSS Selector I have tried but receiving 404 error
    My code option 1
    driver.findElement(By.cssSelector(“p:contains(‘+ Add Another’)”)).click();
    My code option 2
    driver.findElement(By.cssSelector(“li div input.radio p:contains(‘+ Add Another’)”)).click();
    My code option 3
    driver.findElement(By.cssSelector(“input[type=’radio’][value=’+ Add Another’]”)).click();

    XML:

    Use Permanent Address

    + Add Another

    Reply

  3. vissu says

    Hi Mukesh,

    I have a scenario After clicking on exported to excel button data should exported to excel(Excel file is downloaded) But How to give wait To Script Till excel file is downloaded.

    Usually it takes 50 sec to one minutes to download file after clicking on exported to excel button

    Reply

  5. Shashank says

    Hi Mukesh.

    Is it possible to write css for visible text.

    Ex: div:contains(‘Container’)

    Where html for above is

    div

    Container
    .

    I did not work for me. What is css equivalent for xpath text() function

    Reply

  6. Shambo says

    Hi Mukesh
    Still its not working…its ben so many days that my eclipse is not working.How to fix this has been a headache for me??

    As u said i tried with this version of firefox(51.0.1 (32-Bit)).But still no luck

    Reply

  8. Shambo says

    Heyy Mukesh,

    This is Shambo
    Thanks for your reply.
    Java-1.8 version
    Selenium-2.53.1
    Firefox-52.0b1 (64-bit)

    Plese tell me the solution.

    Reply

  9. Shambo says

    Hi sir.
    Please resolve this issue asap.I am not able to practice from a very long time in eclipse.Whenever i run any code,i get this error.

    1.org.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms.

    2.Exception in thread “main” org.openqa.selenium.WebDriverException: Failed to connect to binary FirefoxBinary(C:\Program Files\Mozilla Firefox\firefox.exe) on port 7055; process output follows:

    please provide me the output.I am in dire need of the solution

    Reply

    • Mukesh Otwani says

      Hi Veeresh,

      There is always a question among selenium user about usage of CSS or Xpath. CSS works best if you are using IE but also it also works in Chrome and firefox. Traversing the DOM using CSS in IE8 doesn’t works and here xpath performs. No doubt CSS works faster than Xpath. But when automating complex applications, you will find difficulty with creation of CSS and that time xpath help you to traverse through DOM in detail.

      Finally, I would say that if your script works with CSS then go with it otherwise go for Xpath.

      Reply

  11. anurag says

    plz resolve this issue
    how to handle css value that changes each time when page reloads
    driver.findElement(By.cssSelector(“#ctl00_ContentPlaceHolderMain_GvLairagePen_ctl01_ddlAddLairageSize > option[value=\”132\”]”)).click();
    above value changes every time.i have to check every time source page to know last one value plz tell how to handle this dynamically changed value.

    Reply

  15. Gaurav Khurana says

    Nice explanation thanks

    Do using the xpath will always cause failures in different browsers ? Then i think we should not use xpath and use CSS as most of the applications these days are tested on most of the browsers.

    Reply

    • Mukesh Otwani says

      Hi Gaurav,

      Some application do not have id and other attributes in most of cases so we have to take help of xpath and CSS. I always use my custom xpath and CSS to make my script robust.

      Reply

  18. pankaj says

    Thank’s man you are simply awesome .I try to learn selenium with different – different site but your article’s are so simple that anyone can understand it easily .I follow your all article’s and video’s.

    Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.