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)
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
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. :)
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....
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
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.
very well explained thanks naveen for the demonstration..observed one thing element identified through css selector is fast than element identification through xpath ..
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
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
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?
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
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?
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?
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
Hi Naveen, This video is really helpful but having doubt about text like How to write css locater using text Ex Text Xpath: //li[text()='Text'] Css = ?
I have the same Question, This is the great explanation but not as far as comparing XPATH. He mostly used all the exmples only focusing toward the same line of element for id, class.. I was expecting for Link ("Href="www.youtube.com" )which has Text as you said..
Naveen can we execute css selector directly from a reference element? For example I have find element1. Then I will do element1.FindElement(By.CssSelector("some expression")); Something like this so the css expression will only be run from the reference element?
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)
Thanks a lot Naveen
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
Best of India
Hi Naveen,
If there is only text present then how to write CSS for that.
@@avanthichelimilla4981 doesn't support text
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.
Great Job Naveen! I can't thank you enough.
Thank you so much Naveen i am following your classes from last 3 years the way your explanation is really really superb thank you 🎉
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. :)
Thank you Shreya
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....
Always wanted to know more about css selector and finally have gained so much after watching this video..... Thank you Naveen 😀😊
You make it so simple that after watching your video feel very confident
You have made tutorials on literally every topic I can think of, mad respect for you!❤
I wanted to Give you National Award for Explanation of CssSelector 👌👌👌👌👌👌
Haha thank you for the award
Nice lecture, everything about css you will find here
Hi Naveen...You are the best..I started my career by seeing your UA-cam blog...
Most detailed video on this topic on UA-cam 👍😊
You made CSS Selector very simple...wow
As they say when youtuber explains not a single bit go waste. Thanks Naveen for this video.
Was searching for index type CSS-selector but I always failed to learn. Your video helped me..
Waoo I have never seen css explanation like this before ❤️
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
Thank you so much. You save my life through this video.
Crystal clear explanation with examples ..Thank you Naveen
It is an Amazing that I never seen before the perfect way like this to write css and X path
Your tutorials are helping me a lot in real time testing. Thank you so much sir.
This video on CSS has been the best I have ever come across. Thanks Naveen. Hope to reach 100k subscribers soon.
u are the god of automation Naveen.
Thanks for watching mounika
Thanks man, im doing a coding project for an interview and this is very helpful
Great video on CSS Selectors. Thanks for this video.
Intact, I'm waiting for this video. I never see this kind of explanation. Thank you Naveen.
Its Great video! ✔
~15minits and I aware
watching in 2x spead🏁
Very well Explained. I was able to understand both X path and CSS from your videos. Thanks a ton Naveen.
such a valuable video.thank yu so much
Great video, exactly what I was looking for.
for those who come later the point 3 is shown in the point 9
Thank you Naveen...that's a perfect explanation of CSS selectors
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.
Excellent Naveen sir..i learned lot of things from your video
Thanks Naveen for this video on css selectors. Now that i can equally have css selectors also along with the xpaths in my framework.
Naveen:-Symbol of Excellence
very well explained thanks naveen for the demonstration..observed one thing element identified through css selector is fast than element identification through xpath ..
you are great man, just thank you for sharing us such interesting topic
Awesome Elder bro..
I am also using :nth-child().I think it is similar to :nth-of-type().
Tq sir ji..
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.
extremely useful Naveen!
Wow brilliant efforts Naveen, glad to see your videos after long time, please make videos regularly if possible
Thanks
Explained in good manner !!!Thanks
Glad it was helpful!
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...!!
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
Thanks for super Explanation on CSS
Thank you sir... Great explaination
Such amazing explanation!!! 👏
Most awaited video.. Thanks Naveen.
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
It’s absolutely super clear👌
Hi Naveen, this is really amazing information. Thanks
Thanks a lot for this video, It's really helpful. Keep up the good work :)
Really very helpful video!!! Awesome Naveen..!! Not able to find the document in the comment section. Pls provide
Thanks sir for this informative video.
Hi Naveen can u update. blazemeter URL in video description which will be helpful
Very clear and helpful Thank you.
Thanks Naveen for video, Waiting for this video since long.... :)
Thank you @Naveen, It's really Helpful
Is there any way to select 'Inner Text' using CSS Selector ?
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?
Very good explanation👍
Hi Naveen , nice video and it is more useful I have one question in css selectors how to navigate from child to parent ??
You cannot back traverse from child to parent in CSS and that is the big difference between xpath and CSS
Very nice video.. Thanks Naveen.. Quick question.. When do we use sibling locater in real time
great video. very helpful. thanks
Hi Thanks for nice example. How to use, if ul is not having any class or id? Just simple
very well video & i just want to know that 3dr parent>child & sibling of element in cs are same?
Great job.. Thanks
Sir , thanks a ton !!! True blessing to society. I would like to help with some contribution. How can I do it ?
Great content . Helps a lot
Thanks#Naveen.You.are.the.best!
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
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?
Any solution?
Awesome video...knowledge packed.
1) For following sibling u were used + symbol but what we can use for preceding sibling
2)how to get parent tag by using css selector
thank you for sharing the knowledge...
Thank You So much Naveen:) It's really a very helpful video!!!
This video is very valuable, Naveen. Thank you soo much :)
Can you please upload the video for specflow bdd, csharp ,
page object ,data driven and api with cd cid video
Thank you for this video.
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?
Hi Naveen, Thanks for nice video. I have a question, CSS selector is static or not ?
Hi Naveen..plz post videos on Cyber security testing
Hi Naveen. Is it possible to locate element with text in css selector?
Not possible
thanks Naveen !
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
In CSS, there is no backward traversing.
Hi Naveen, Could you please create video on writing xpath for shadow dom
Sure, ill try to do the same.
@@naveenautomationlabs thank you
Naveen, can you make a video on graphs and charts. I'm bit confusing while writing xpaths using SVG's.
Thanks! You are genius. 😃
Hi @Naveen can you please let us know how to usee CSS Selector for webtable ?
very helpful kindly EXPLAIN css=
Super naveen
Thanks Naveen .
Sir plz plz make a video on manual testing which is required in selenium real time plzzzzzz sir
thanks, I know more ways to get Css locators
Hi Naveen,
This video is really helpful but having doubt about text like
How to write css locater using text
Ex Text
Xpath: //li[text()='Text']
Css = ?
I have the same Question, This is the great explanation but not as far as comparing XPATH. He mostly used all the exmples only focusing toward the same line of element for id, class.. I was expecting for Link ("Href="www.youtube.com" )which has Text as you said..
Thanks 🙂 really good!!
Glad you like it!
Hi naveen, how to handle text in css. In xpath we have text function but in css do we have any?
One thing which I was unable to locate using CSS was text in BlazeMeter site like "
The Continuous Testing Journey"
Hi Naveen...how can we write css if only text is unique ,such as: text
Thanks Naveen:)
Naveen can we execute css selector directly from a reference element? For example I have find element1. Then I will do element1.FindElement(By.CssSelector("some expression"));
Something like this so the css expression will only be run from the reference element?
you nee to use FindElements for first element1 then loop into to get attribute you are looking for
Hi Naveen, Thanks for the video. Is there any function similar to text() as in xapth same for css