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.
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
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.
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.
Now have a close look and check what each link is doing.
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.
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']
Find CSS using Multiple attributes.
Syntax- tagname[attribute1='value1'][attribute2='value2']
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.
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.
One more example with id attribute
Find CSS using Start-with
Syntax- tagname[attribute^='value']
In below example I have taken only link but you can take any element.
Find CSS using ends-with
Syntax- tagname[attribute$='value']
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 |
Hi mukesh, how to use Chropath in chrome? can you share any links?
Hi Jay,
Thanks for approaching me. Please check this link https://www.youtube.com/watch?v=Su3Vku9bmuI
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
Hi Chris,
Kindly check this link http://appium.io/docs/en/commands/element/find-elements/
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
Hi Vissu,
There is a library called Watchservice API using which you check changes in a folder. Check this link https://howtodoinjava.com/java8/java-8-watchservice-api-tutorial/
Hi Mukesh,
I have recently started learning automation through your videos..and currently I am watching
https://www.youtube.com/watch?v=Hby6_WiidqM&list=PL6flErFppaj2ArNxLyR4nQ4JV8qFc56-M&index=12
I am unable to add fire path/firebug add on in firefox…
it seems it’s discontinued since 2017
so is there any alternative plugin/addon of firepath that i can use to practice css/xml locators..
or how can i practice in chrome.
Hi Angle,
You can use chropath for firefox & chrome.
Chrome: https://chrome.google.com/webstore/detail/chropath/ljngjbnaijcbncmcnjfhigebomdlkcjo?hl=en
Firefox: https://addons.mozilla.org/en-US/firefox/addon/chropath-for-firefox/
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
Hi Shashank,
Apologies, I never tried such combination and don’t know whether it is syntactically correct or not.
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
Hi Shambo, I am using FF 46 now and its working fine.
Yahh Mukesh i will definitely reply you very soon.Thanks for ur reply
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.
Hi Shamboo,
Try with Firefox 32 bit version & don’t use beta version. Reply back with your comments.
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
Hi Shamboo,
Kindly tell me the version of java, selenium, & firefox which you are using?
Hi Mukesh
Can you tell me the disadvantages if we use CSS over Xpath
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.
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.
Hi Anurag,
Give a try to relative xpath
hi Mukesh,
Can we use combination of xpath and css?
No Nilesh.
Thank you sir, all your tutorials really helped me alot. You are one of the best selenium tutor i could say.
Hey Sanjay,
Thank you so much for your kind word. Keep learning 🙂
It’s very helpful and detail.
Thanks Krishna
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.
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.
Thanks so much for the above info. Can you please share the syntax for using CSS with multiple attributes?
Thanks mate will update the same.
Super explanations..Its very easy to understand.
Thanks Shaik 🙂
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.
Thanks Mate keep visiting.
sir could u post dynamic webtable example
Hi Manas,
Kindly check below post.
https://vistasadprojects.com/mukeshotwani-blogs-v2/handle-calender-in-selenium-webdriver/
Hi Mukesh,
Could you tell me how to identify visible text using css, like in xpath we make use of text().
Hi Tarun,
will update you soon on this.
Useful as always
Thanks Mallikarjun
Thank you for sharing good about CSS selector.
Thanks Roopesh
thanks sir,your Tutorial r very useful .
Thanks Rama