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

  Рет қаралды 115,671

Naveen AutomationLabs

Naveen AutomationLabs

4 жыл бұрын

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:
kzfaq.info%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: naveenanimation20@gmail.com
--------------------------------
✔️Thanks for watching!
देखने के लिए धन्यवाद
Благодаря за гледането
感谢您观看
Merci d'avoir regardé
Grazie per la visione
Gracias por ver
شكرا للمشاهدة

Пікірлер: 175
@naveenautomationlabs
@naveenautomationlabs 4 жыл бұрын
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
@balajibabu6286 4 жыл бұрын
Thanks a lot Naveen
@Imran-M-
@Imran-M- 4 жыл бұрын
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
@mudaseer21 4 жыл бұрын
Best of India
@avanthichelimilla4981
@avanthichelimilla4981 3 жыл бұрын
Hi Naveen, If there is only text present then how to write CSS for that.
@mudaseer21
@mudaseer21 3 жыл бұрын
@@avanthichelimilla4981 doesn't support text
@rajputyuvraj6558
@rajputyuvraj6558 4 жыл бұрын
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
@FitnessMyLife 4 жыл бұрын
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
@naveenautomationlabs 4 жыл бұрын
Thank you Shreya
@mansigaikwad8520
@mansigaikwad8520 3 жыл бұрын
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....
@swatiagrawal1489
@swatiagrawal1489 2 жыл бұрын
Always wanted to know more about css selector and finally have gained so much after watching this video..... Thank you Naveen 😀😊
@Swarno2004
@Swarno2004 4 жыл бұрын
You make it so simple that after watching your video feel very confident
@rajsona2804
@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 🎉
@ashwina.k5602
@ashwina.k5602 2 жыл бұрын
You have made tutorials on literally every topic I can think of, mad respect for you!❤
@uvitalkumar
@uvitalkumar 4 жыл бұрын
Intact, I'm waiting for this video. I never see this kind of explanation. Thank you Naveen.
@devendrapratapsingh9931
@devendrapratapsingh9931 4 жыл бұрын
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
@vidhivinchhi1027
@vidhivinchhi1027 3 ай бұрын
Great Job Naveen! I can't thank you enough.
@wagalprasad1869
@wagalprasad1869 8 ай бұрын
It is an Amazing that I never seen before the perfect way like this to write css and X path
@SarangHoley
@SarangHoley 4 жыл бұрын
Most detailed video on this topic on KZfaq 👍😊
@JP-xb1fo
@JP-xb1fo 3 жыл бұрын
Very well Explained. I was able to understand both X path and CSS from your videos. Thanks a ton Naveen.
@gayathrivr
@gayathrivr 4 жыл бұрын
Your tutorials are helping me a lot in real time testing. Thank you so much sir.
@littonsinha2959
@littonsinha2959 4 жыл бұрын
This video on CSS has been the best I have ever come across. Thanks Naveen. Hope to reach 100k subscribers soon.
@swamyas5668
@swamyas5668 4 жыл бұрын
Crystal clear explanation with examples ..Thank you Naveen
@nanistar2400
@nanistar2400 4 жыл бұрын
Hi Naveen...You are the best..I started my career by seeing your KZfaq blog...
@amolnawale2177
@amolnawale2177 4 жыл бұрын
Thanks Naveen for this video on css selectors. Now that i can equally have css selectors also along with the xpaths in my framework.
@santoshrandive
@santoshrandive 3 жыл бұрын
You made CSS Selector very simple...wow
@GaneshJadhav-ne7ou
@GaneshJadhav-ne7ou 3 жыл бұрын
As they say when youtuber explains not a single bit go waste. Thanks Naveen for this video.
@radhikamogadampally9217
@radhikamogadampally9217 3 жыл бұрын
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
@tricktictrip2192 2 жыл бұрын
Great video, exactly what I was looking for. for those who come later the point 3 is shown in the point 9
@AbhishekKumar-kk2eh
@AbhishekKumar-kk2eh 4 жыл бұрын
Most awaited video.. Thanks Naveen.
@ChiragPatel-lk1vl
@ChiragPatel-lk1vl 4 жыл бұрын
Wow brilliant efforts Naveen, glad to see your videos after long time, please make videos regularly if possible Thanks
@debjanighosh5947
@debjanighosh5947 Жыл бұрын
Thank you so much. You save my life through this video.
@madirajuchaitanya
@madirajuchaitanya 3 жыл бұрын
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...!!
@antarabanerjee7314
@antarabanerjee7314 Жыл бұрын
extremely useful Naveen!
@NaciTurgut
@NaciTurgut 2 жыл бұрын
Great video on CSS Selectors. Thanks for this video.
@adisatapathy
@adisatapathy 2 жыл бұрын
Waoo I have never seen css explanation like this before ❤️
@jatindersinghjp
@jatindersinghjp 3 жыл бұрын
Thank you Naveen...that's a perfect explanation of CSS selectors
@greywolf187
@greywolf187 3 жыл бұрын
Thanks man, im doing a coding project for an interview and this is very helpful
@nareshreddy69
@nareshreddy69 4 жыл бұрын
Thanks Naveen for video, Waiting for this video since long.... :)
@herokrout6395
@herokrout6395 4 жыл бұрын
Excellent Naveen sir..i learned lot of things from your video
@CrorepatiRahul
@CrorepatiRahul 2 жыл бұрын
I wanted to Give you National Award for Explanation of CssSelector 👌👌👌👌👌👌
@naveenautomationlabs
@naveenautomationlabs 2 жыл бұрын
Haha thank you for the award
@bhavyalodaya6464
@bhavyalodaya6464 11 ай бұрын
Was searching for index type CSS-selector but I always failed to learn. Your video helped me..
@preethishetty7161
@preethishetty7161 4 жыл бұрын
It’s absolutely super clear👌
@rkaravind
@rkaravind 4 жыл бұрын
Hi Naveen, this is really amazing information. Thanks
@malanchakalsa7926
@malanchakalsa7926 4 жыл бұрын
This video is very valuable, Naveen. Thank you soo much :)
@nayanamr2447
@nayanamr2447 4 жыл бұрын
Thank You So much Naveen:) It's really a very helpful video!!!
@atulsamant898
@atulsamant898 2 жыл бұрын
Nice lecture, everything about css you will find here
@sanghamitrabhowmicklive3013
@sanghamitrabhowmicklive3013 Жыл бұрын
Such amazing explanation!!! 👏
@gautam3945
@gautam3945 5 ай бұрын
Thank you sir... Great explaination
@boobalakrishnan89
@boobalakrishnan89 4 жыл бұрын
Thanks#Naveen.You.are.the.best!
@yikeberayana554
@yikeberayana554 Жыл бұрын
you are great man, just thank you for sharing us such interesting topic
@SanjeevKumar-qd1xo
@SanjeevKumar-qd1xo 3 жыл бұрын
Thanks for super Explanation on CSS
@huzeyfesutcu4045
@huzeyfesutcu4045 3 жыл бұрын
Very clear and helpful Thank you.
@JitendraKumar-lr3vq
@JitendraKumar-lr3vq 4 жыл бұрын
very well explained thanks naveen for the demonstration..observed one thing element identified through css selector is fast than element identification through xpath ..
@babai56
@babai56 4 жыл бұрын
Awesome video...knowledge packed.
@ashishmishra7214
@ashishmishra7214 4 жыл бұрын
Very good explanation👍
@prashanthreddyburri
@prashanthreddyburri 4 жыл бұрын
thank you for sharing the knowledge...
@kalpanaperiasamy671
@kalpanaperiasamy671 Жыл бұрын
such a valuable video.thank yu so much
@shivarajun3787
@shivarajun3787 10 ай бұрын
Thanks a lot for this video, It's really helpful. Keep up the good work :)
@tanmaykhope3734
@tanmaykhope3734 4 жыл бұрын
Naveen:-Symbol of Excellence
@daisyd4172
@daisyd4172 2 жыл бұрын
Its Great video! ✔ ~15minits and I aware watching in 2x spead🏁
@omerozdemir9746
@omerozdemir9746 4 жыл бұрын
Thank you for this great video :)
@chillamcharlabharath9730
@chillamcharlabharath9730 4 жыл бұрын
Thanks a lot naveen😍😍
@Depthsreflection
@Depthsreflection Жыл бұрын
Thank you for this video.
@DipakDas-tm3nu
@DipakDas-tm3nu 4 жыл бұрын
Thanks Naveen .
@MrMPatra
@MrMPatra 4 жыл бұрын
Thanks Naveen:)
@itshamiiid
@itshamiiid 2 жыл бұрын
great video. very helpful. thanks
@devisethunath
@devisethunath 2 жыл бұрын
Great content . Helps a lot
@real_hello_kitty
@real_hello_kitty 3 жыл бұрын
Thanks! You are genius. 😃
@rayprusia4753
@rayprusia4753 3 жыл бұрын
Great job.. Thanks
@mounikakaki7158
@mounikakaki7158 3 жыл бұрын
u are the god of automation Naveen.
@naveenautomationlabs
@naveenautomationlabs 3 жыл бұрын
Thanks for watching mounika
@vaibhavgupta973
@vaibhavgupta973 2 жыл бұрын
thanks Naveen !
@sairatanpatra
@sairatanpatra 4 жыл бұрын
Thanxxx a lot sir😊
@jayeshkumar2815
@jayeshkumar2815 3 жыл бұрын
Super naveen
@smitavharavadekar7578
@smitavharavadekar7578 3 жыл бұрын
Explained in good manner !!!Thanks
@naveenautomationlabs
@naveenautomationlabs 3 жыл бұрын
Glad it was helpful!
@balkrishnayadav6942
@balkrishnayadav6942 3 жыл бұрын
Really very helpful video!!! Awesome Naveen..!! Not able to find the document in the comment section. Pls provide
@vijayaraghavanvashudevan1977
@vijayaraghavanvashudevan1977 4 жыл бұрын
Thank you so much 👍
@koteswararaovasa9721
@koteswararaovasa9721 4 жыл бұрын
Awesome Elder bro.. I am also using :nth-child().I think it is similar to :nth-of-type(). Tq sir ji..
@vijayppatel
@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.
@ravishchoudhary2900
@ravishchoudhary2900 4 жыл бұрын
Hi Naveen, Thanks for the video. Is there any function similar to text() as in xapth same for css
@ankit6613
@ankit6613 4 жыл бұрын
Thank you @Naveen, It's really Helpful Is there any way to select 'Inner Text' using CSS Selector ?
@upendradokala4653
@upendradokala4653 Жыл бұрын
TQ bro
@prabhu_rajarathinam
@prabhu_rajarathinam 3 жыл бұрын
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
@triptiagrawal3406 3 жыл бұрын
Thanks 🙂 really good!!
@naveenautomationlabs
@naveenautomationlabs 3 жыл бұрын
Glad you like it!
@MaheshBabu1989
@MaheshBabu1989 2 жыл бұрын
Very nice video.. Thanks Naveen.. Quick question.. When do we use sibling locater in real time
@kumarsaheb
@kumarsaheb 3 жыл бұрын
Sir , thanks a ton !!! True blessing to society. I would like to help with some contribution. How can I do it ?
@lannguyen7460
@lannguyen7460 3 жыл бұрын
thanks, I know more ways to get Css locators
@vidhyanaphade1818
@vidhyanaphade1818 3 жыл бұрын
very well video & i just want to know that 3dr parent>child & sibling of element in cs are same?
@sureshmsc52
@sureshmsc52 4 жыл бұрын
Hi Naveen..plz post videos on Cyber security testing
@EchoeyCares
@EchoeyCares 3 жыл бұрын
Custom CSS CSS SELECTORS 1. Id → htmltag#id 2. Class → htmltag.classname, .classname ] is also correct , .c1.c2.c3 ]in case of cascading, htmltag.c1.c2.c3…..cn 3. parent>childtag 4. Can remove htmltag in case id or class name is unique Selecting a tag Therefore ul#categories>li#first.list>a 5. Need to remove spaces and replace it with ‘.’ Therefore, input.pro-12.max-34r.Global 6. htmltag[id=’value’] is also correct, no need to write // for css selectors htmltag[id=’value’] → css with one attribute htmltag[id=’value’][type=’email’] → css with two attributes //htmltag[id=’value’ and type=’email’] → xpath with two attributes 7. Contains the text in CSS Contains function was present in css0 but was removed from css3 input[id*=’user’] or input[id*=’name’] 8. Starting the text in CSS input[id^=’user’] or input[id^=’u’] 9. Ending the text in CSS input[id$=’name’] or input[id*$’e’] 10. Selecting first of its type and last of its type ul#categories>li:first-of-type ul#categories>li:last-of-type nth-of-type ul#categories>li:nth-of-type(1) ul#categories>li:nth-of-type(n) → all elements 10. Sibling category div.wrapper-form+div#whole-form
@udayptp
@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
@SaifulIslam-sn2ys
@SaifulIslam-sn2ys 4 жыл бұрын
Hi Thanks for nice example. How to use, if ul is not having any class or id? Just simple
@bharathkoneru4008
@bharathkoneru4008 3 жыл бұрын
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
@naveenautomationlabs 3 жыл бұрын
In CSS, there is no backward traversing.
@mayayadhu
@mayayadhu 2 жыл бұрын
👏👏👏🙏
@abhisheksingh-mr7ub
@abhisheksingh-mr7ub 4 жыл бұрын
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?
@ShabhashBabu
@ShabhashBabu 4 жыл бұрын
Hi Naveen can u update. blazemeter URL in video description which will be helpful
@akhildhat2279
@akhildhat2279 3 жыл бұрын
Hi naveen, how to handle text in css. In xpath we have text function but in css do we have any?
@littonsinha2959
@littonsinha2959 4 жыл бұрын
One thing which I was unable to locate using CSS was text in BlazeMeter site like " The Continuous Testing Journey"
@gauravbhatt6258
@gauravbhatt6258 4 жыл бұрын
Hi @Naveen can you please let us know how to usee CSS Selector for webtable ?
@sudeepbasak1116
@sudeepbasak1116 4 жыл бұрын
Hi Naveen, Thanks for nice video. I have a question, CSS selector is static or not ?
@NKBL100
@NKBL100 4 жыл бұрын
Hi Naveen, it is really a very good video I was waiting for video on CSS since long. Thanks a lot. Could you please also add the content of this video in description.
@wagalprasad1869
@wagalprasad1869 8 ай бұрын
Can you please upload the video for specflow bdd, csharp , page object ,data driven and api with cd cid video
@AbhijeetSinghs
@AbhijeetSinghs 3 жыл бұрын
How to know the css selector for the next page on a website for pagination. Iam using windows power automate for web data extractions
@mallikarjunaarjun6892
@mallikarjunaarjun6892 4 жыл бұрын
Hi Naveen , nice video and it is more useful I have one question in css selectors how to navigate from child to parent ??
@prakashn3539
@prakashn3539 4 жыл бұрын
You cannot back traverse from child to parent in CSS and that is the big difference between xpath and CSS
@danieljoel7845
@danieljoel7845 4 жыл бұрын
Can we give text in nth-of-type to match text and then click on element?
@Koganti622
@Koganti622 2 жыл бұрын
🤗🤗🤗
@maxpayne0073
@maxpayne0073 4 жыл бұрын
Sir plz plz make a video on manual testing which is required in selenium real time plzzzzzz sir
How to Become Genius in XPath in Selenium  - Session -18
39:48
Naveen AutomationLabs
Рет қаралды 709 М.
Alat Seru Penolong untuk Mimpi Indah Bayi!
00:31
Let's GLOW! Indonesian
Рет қаралды 13 МЛН
small vs big hoop #tiktok
00:12
Анастасия Тарасова
Рет қаралды 27 МЛН
Heartwarming: Stranger Saves Puppy from Hot Car #shorts
00:22
Fabiosa Best Lifehacks
Рет қаралды 9 МЛН
THE POLICE TAKES ME! feat @PANDAGIRLOFFICIAL #shorts
00:31
PANDA BOI
Рет қаралды 14 МЛН
Squares | HTML CSS
1:00
Learning Axis
Рет қаралды 1,4 МЛН
CSS Simple Selectors | Selenium WebDriver | CSS Selectors |
14:51
H Y R Tutorials
Рет қаралды 19 М.
Login Form | HTML CSS
1:00
Learning Axis
Рет қаралды 484 М.
Handle Dynamic Google Search Using Dynamic XPath - WebDriver Session - 15
21:51
Naveen AutomationLabs
Рет қаралды 162 М.
What is HTML DOM & StaleElement Exception in Selenium
36:04
Naveen AutomationLabs
Рет қаралды 81 М.
Learn Every CSS Selector In 20 Minutes
19:38
Web Dev Simplified
Рет қаралды 439 М.
How To Explain Project, Roles & Experience Summary In Interview
33:08
Naveen AutomationLabs
Рет қаралды 430 М.
Спутниковый телефон #обзор #товары
0:35
Product show
Рет қаралды 1,9 МЛН
cute mini iphone
0:34
승비니 Seungbini
Рет қаралды 6 МЛН
Игровой Комп с Авито за 4500р
1:00
ЖЕЛЕЗНЫЙ КОРОЛЬ
Рет қаралды 1,7 МЛН
Best mobile of all time💥🗿 [Troll Face]
0:24
Special SHNTY 2.0
Рет қаралды 1,8 МЛН