How to become genius in CSS Selector in Selenium || Create Custom Dynamic CSS Selectors

In this videos, I have explained how to create custom - dynamic CSS selectors in Selenium WebDriver.
CSS selector is always faster than Xpath, so it's important to learn to create your own CSS Selectors.
~~Subscribe to this channel, and press bell icon to get some interesting videos on Selenium and Automation:
th-cam.com/users/Naveen%20Au...
Follow me on my Facebook Page:
/ naveenqtpexpert
Let's join our Automation community for some amazing knowledge sharing and group discussion on Telegram:
t.me/joinchat/COJqZUPB02r5sB7...
Paid courses (Recorded) videos:
Java & Selenium Course: www.naveenautomationlabs.com/p...
API Course: www.naveenautomationlabs.com/p... ➡️Get Our Courses✔️
📗 Get My Paid Courses at
Paid courses (Recorded) videos:
Java & Selenium Course: www.naveenautomationlabs.com/p...
API Course: www.naveenautomationlabs.com/p...
-------------------------------
✔️SOCIAL NETWORKS
Facebook: / naveenqtpexpert
Twitter: / naveenkhunteta
Blog: www.naveenautomationlabs.com
--------------------------------
Support My Channel✔️Or Buy Me A Coffee
Paypal: paypal.me/naveenkhunteta
Google Pay: [e-mail]
--------------------------------
✔️Thanks for watching!
देखने के लिए धन्यवाद
Благодаря за гледането
感谢您观看
Merci d'avoir regardé
Grazie per la visione
Gracias por ver
شكرا للمشاهدة

[@naveenautomationlabs]

here is the list of all CSS locators discussed in video:
Custom CSS
1. id--> htmltag#id , #id
2. class --> htmltag.classname, .classname, .c1.c2.c3, htmltag.c1.c2.c3...cn
3. parent>childtag
ul#categories
#username
input#username
input.form-control.private-form__control.login-email
input#username.form-control.private-form__control.login-email
input.login-email
.form-control.private-form__control.login-email
4. htmltag[id='value']
//div[@id='test']
input[id='username'] -- css with one attribute
//input[@id='username'] --xpath
input[id='username'][type='email'] -- css with two attributes
//input[@id='username' and @type='email'] -- xpath
5. contains the text in css:
input[id*='user']
input[id*='name']
id =
test_123
test_345
test_456
input[id*=test_]
6. starting the text in css:
input[id^='user']
7. ending the text in css:
input[id$='name']
8. comma in css:
div.private-form__input-wrapper, input#username
9. first-of-type in css:
ul#categories>li:first-of-type
10. last-of-type in css:
ul#categories>li:last-of-type
11. nth-of-type
ul#categories>li:nth-of-type(1)
ul#categories>li:nth-of-type(14)
ul#categories>li:nth-of-type(3)
ul#categories>li:nth-of-type(n) -- all
12. sibling of element:
div.private-form__input-wrapper + div
div.private-form__input-wrapper+div.private-form__meta
ul#categories>li:nth-of-type(3)+li
13. not operator in css:
input.form-control.private-form__control:not(.login-password)

[@balajibabu6286]

Thanks a lot Naveen

[@Imran-M-]

Hi Naveen, is it possible to validate the locator(xpath, css) in edge browser as well in the same way we did in chrome? If yes, how to do it? Please let me know

[@mudaseer21]

Best of India

[@avanthichelimilla4981]

Hi Naveen,
If there is only text present then how to write CSS for that.

[@mudaseer21]

@@avanthichelimilla4981 doesn't support text

[@rajputyuvraj6558]

I must say, You are a great Contributor to QA community. You are giving back to community what every legends do. Pls keep sharing stuffs like this.

[@FitnessMyLife]

Very well documented. Previously I was just copying the Css Selectors from the browser and editing, now I know how I can write my own and of course in different ways. Simply Perfect. :)

[@naveenautomationlabs]

Thank you Shreya

[@mansigaikwad8520]

Hi Naveen Sir. Am a trainer too but I would definitely say that if am doing well in my career then the half of the credit goes to you Sir. Dnt stop being awesome....

[@ashwina.k5602]

You have made tutorials on literally every topic I can think of, mad respect for you!❤

[@devendrapratapsingh9931]

Hi navin sir, you r a gem. I am continuously following your videos. How much dedications you have to explain these concepts in so better way. Really hats off to you Sir

[@Swarno2004]

You make it so simple that after watching your video feel very confident

[@swatiagrawal1489]

Always wanted to know more about css selector and finally have gained so much after watching this video..... Thank you Naveen 😀😊

[@uvitalkumar]

Intact, I'm waiting for this video. I never see this kind of explanation. Thank you Naveen.

[@gayathrivr]

Your tutorials are helping me a lot in real time testing. Thank you so much sir.

[@SarangHoley]

Most detailed video on this topic on TH-cam 👍😊

[@rajsona2804]

Thank you so much Naveen i am following your classes from last 3 years the way your explanation is really really superb thank you 🎉

[@amolnawale2177]

Thanks Naveen for this video on css selectors. Now that i can equally have css selectors also along with the xpaths in my framework.

[@littonsinha2959]

This video on CSS has been the best I have ever come across. Thanks Naveen. Hope to reach 100k subscribers soon.

[@JP-xb1fo]

Very well Explained. I was able to understand both X path and CSS from your videos. Thanks a ton Naveen.

[@santoshrandive]

You made CSS Selector very simple...wow

[@nanistar2400]

Hi Naveen...You are the best..I started my career by seeing your TH-cam blog...

[@swamyas5668]

Crystal clear explanation with examples ..Thank you Naveen

[@radhikamogadampally9217]

This is really an amazing video by letting many of us know that there are so many ways of writing CSS selector. Thanks so much Naveen :) kudos to your knowledge sharing.

[@tricktictrip2192]

Great video, exactly what I was looking for.
for those who come later the point 3 is shown in the point 9

[@AbhishekKumar-kk2eh]

Most awaited video.. Thanks Naveen.

[@madirajuchaitanya]

Well Explained. Thanks Naveen Sir...for this wonderful tutorials. Like you said, I didn't find any of these in other video tutorials...as Yet...!!

[@ChiragPatel-lk1vl]

Wow brilliant efforts Naveen, glad to see your videos after long time, please make videos regularly if possible
Thanks

[@greywolf187]

Thanks man, im doing a coding project for an interview and this is very helpful

[@jatindersinghjp]

Thank you Naveen...that's a perfect explanation of CSS selectors

[@herokrout6395]

Excellent Naveen sir..i learned lot of things from your video

[@wagalprasad1869]

It is an Amazing that I never seen before the perfect way like this to write css and X path

[@vidhivinchhi1027]

Great Job Naveen! I can't thank you enough.

[@preethishetty7161]

It’s absolutely super clear👌

[@rkaravind]

Hi Naveen, this is really amazing information. Thanks

[@adisatapathy]

Waoo I have never seen css explanation like this before ❤️

[@GaneshJadhav-ne7ou]

As they say when youtuber explains not a single bit go waste. Thanks Naveen for this video.

[@NaciTurgut]

Great video on CSS Selectors. Thanks for this video.

[@nareshreddy69]

Thanks Naveen for video, Waiting for this video since long.... :)

[@atulsamant898]

Nice lecture, everything about css you will find here

[@malanchakalsa7926]

This video is very valuable, Naveen. Thank you soo much :)

[@debjanighosh5947]

Thank you so much. You save my life through this video.

[@JitendraKumar-lr3vq]

very well explained thanks naveen for the demonstration..observed one thing element identified through css selector is fast than element identification through xpath ..

[@sanghamitrabhowmicklive3013]

Such amazing explanation!!! 👏

[@antarabanerjee7314]

extremely useful Naveen!

[@SanjeevKumar-qd1xo]

Thanks for super Explanation on CSS

[@nayanamr2447]

Thank You So much Naveen:) It's really a very helpful video!!!

[@kalpanaperiasamy671]

such a valuable video.thank yu so much

[@huzeyfesutcu4045]

Very clear and helpful Thank you.

[@boobalakrishnan89]

Thanks#Naveen.You.are.the.best!

[@prashanthreddyburri]

thank you for sharing the knowledge...

[@gautam3945]

Thank you sir... Great explaination

[@itshamiiid]

great video. very helpful. thanks

[@diptajitp]

Awesome video...knowledge packed.

[@yikeberayana554]

you are great man, just thank you for sharing us such interesting topic

[@rayprusia4753]

Great job.. Thanks

[@ashishmishra7214]

Very good explanation👍

[@devisethunath]

Great content . Helps a lot

[@Depthsreflection]

Thank you for this video.

[@shivarajun3787]

Thanks a lot for this video, It's really helpful. Keep up the good work :)

[@tanmaykhope3734]

Naveen:-Symbol of Excellence

[@omerozdemir9746]

Thank you for this great video :)

[@daisyd4172]

Its Great video! ✔
~15minits and I aware
watching in 2x spead🏁

[@chillamcharlabharath9730]

Thanks a lot naveen😍😍

[@DipakDas-tm3nu]

Thanks Naveen .

[@real_hello_kitty]

Thanks! You are genius. 😃

[@MrMPatra]

Thanks Naveen:)

[@CrorepatiRahul]

I wanted to Give you National Award for Explanation of CssSelector 👌👌👌👌👌👌

[@naveenautomationlabs]

Haha thank you for the award

[@smitavharavadekar7578]

Explained in good manner !!!Thanks

[@naveenautomationlabs]

Glad it was helpful!

[@vaibhavgupta973]

thanks Naveen !

[@sairatanpatra]

Thanxxx a lot sir😊

[@ravishchoudhary2900]

Hi Naveen, Thanks for the video. Is there any function similar to text() as in xapth same for css

[@bhavyalodaya6464]

Was searching for index type CSS-selector but I always failed to learn. Your video helped me..

[@mounikakaki7158]

u are the god of automation Naveen.

[@naveenautomationlabs]

Thanks for watching mounika

[@vijayaraghavanvashudevan1977]

Thank you so much 👍

[@akhildhat2279]

Hi naveen, how to handle text in css. In xpath we have text function but in css do we have any?

[@abhisheksingh-mr7ub]

Thanks Naveen.... Just a question for you... For the very last point #13 ... With only two classes it is finding 2 instance of object ... Can we use indexing kind of thing to get the first/second occurence of object with css. If yes then how we will be getting second occurence?

[@koteswararaovasa9721]

Awesome Elder bro..
I am also using :nth-child().I think it is similar to :nth-of-type().
Tq sir ji..

[@vijayppatel]

I do not think so, as child could give you any html tag at nth level whereas nth-of-type will gives you only that htlm element at nth level.

[@jayeshkumar2815]

Super naveen

[@AbhijeetSinghs]

How to know the css selector for the next page on a website for pagination. Iam using windows power automate for web data extractions

[@tallurivamsi6413]

Hi Naveen,
I have same div class for 3 times ,for them parent and super parent all are same, but text only differs.
For example:
select1
select2
select3
Here for all the div’s parents have the same name.
How can I get the text of select1 or select2?
Tried with .sample(contains:”select1”),when I try with “.sample” 3 occurrences,used nth-of-type(1)but its selecting all select1,2,3.
How can I get the text?

[@balkrishnayadav6942]

Really very helpful video!!! Awesome Naveen..!! Not able to find the document in the comment section. Pls provide

[@prabhu_rajarathinam]

Hi Naveen, thanks for providing one more awesome stuff.
I have one question for inner text we get that by text () in xpath can we have same like that in css?

[@triptiagrawal3406]

Thanks 🙂 really good!!

[@naveenautomationlabs]

Glad you like it!

[@vidhyanaphade1818]

very well video & i just want to know that 3dr parent>child & sibling of element in cs are same?

[@danieljoel7845]

Can we give text in nth-of-type to match text and then click on element?

[@bharathkoneru4008]

Hi Naveen, Thanks aton for the amazing custom CSS selector types. In CSS, is there any reverse engineering to go the preceding sibling? This would be really helpful when we want to click on a check box of a particular record in a dynamic table based on the text

[@naveenautomationlabs]

In CSS, there is no backward traversing.

[@ankit6613]

Thank you @Naveen, It's really Helpful
Is there any way to select 'Inner Text' using CSS Selector ?

[@littonsinha2959]

One thing which I was unable to locate using CSS was text in BlazeMeter site like "
The Continuous Testing Journey"

[@upendradokala4653]

TQ bro

[@gauravbhatt6258]

Hi @Naveen can you please let us know how to usee CSS Selector for webtable ?

[@shubhammane6867]

que : if we are getting the address as 1of 4 on a page for getting the text, and adress of both are also same in such case what can be done in case of css selector?

[@doguparthiabhilash4937]

Hi Naveen,
Thanks for the detailed explanation :)
I have a 2 doubts
> in contains:
you said if we have any attribute in above example then how to use contains but in a html tag if there are no attributes and only text is available then how to identify it using css.
(Ex: In Xpath, we use //div[contains(text(),'New Owner')])
> how to go to immediate element from current element using CSS
(Ex: In Xpath, we can use "/.." to move to immediate parent )
Can you help me on this
Thanks in Advance

[@ShabhashBabu]

Hi Naveen can u update. blazemeter URL in video description which will be helpful

[@chakshaysaini3343]

Hi Naveen, how to get the text in Css Like in Xpath we use ( //span[text()='Username']

[@sudeepbasak1116]

Hi Naveen, Thanks for nice video. I have a question, CSS selector is static or not ?

[@udayptp]

Great information sir what if we want to write css selector based on text. For ex: span span
I want to write css selector that includes that text. Like span[text] what if span doesn't have any attributes like class, I'd it only contains text. And that text is dynamic

[@livingleaving2370]

hi, I want to select "Admin" (css selector only cos i'm using cypress) but i have nothing in front of Admin? what should I do? Admin fyi, this is one of the items from drop down list. thanks a lot

[@lannguyen7460]

thanks, I know more ways to get Css locators

[@kumarsaheb]

Sir , thanks a ton !!! True blessing to society. I would like to help with some contribution. How can I do it ?

[@MS-kn7dh]

Hi Naveen...how can we write css if only text is unique ,such as: text

[@rohitprakash8120]

Thanks for sharing this video Naveen. Could you please help me here? I am looking for writing CSS by using parent, following, preceding like we do in xpath. Ex: xpath is "//span[contains(text(),'Close')]/parent::button". How can we write css for this xpath?

[@KanishaKutty30]

Any solution?

[@techupdates9166]

We have only one classname and that is not unique one so in this scenario how we can select that, Naveen?

[@SaifulIslam-sn2ys]

Hi Thanks for nice example. How to use, if ul is not having any class or id? Just simple

[@MaheshBabu1989]

Very nice video.. Thanks Naveen.. Quick question.. When do we use sibling locater in real time