In the Previous Tutorial, we took a deeper dive to the XPath ocean and learned to construct partial XPath by using the following XPath functions:
- contains()
- starts-with()
- text()
- wild-card *
- Indexing
In this tutorial, we will learn to locate elements through CSS selectors.
CSS Selectors are said to be faster than XPath and at times it could be very useful.
What is a CSS Selector?
Every modern web page is build of CSS. They define the cosmetic behavior (e.g. size, fonts, inclination, etc) of the whole page and/or object(s) inside the page. CSS rules do the grouping of class names of objects to define the combined cosmetic behavior of those objects. Similarly, they use Object’s id property to define an individual object’s look and feel.
Writing CSS Selectors
Target id
- Let us launch Chrome and navigate to http://www.imdb.com/
- Inspect the IMDb logo at the top-left of the page.
- Let us look closely at the source code for this element
<a id="home_img" class="navbarSprite home" title="Home" href="/?ref_=nv_home" onclick="(new Image()).src='/rg/home/navbar/images/b.gif?link=%2F%3Fref_%3Dnv_home';"></a>As we can see the element has the tag a. It has the following properties – id, class, title, href and onclick. We can write a CSS Selector like this:
a#home_imgIt is saying target the element that has a tag. The # after the tag name means to look for the id attribute value. So the target element should have an id property and its value must be home_img.
We can verify the CSS locator in the browser. Check this link if you missed how to do it.
Target class
We can use a . to indicate class. For the same element, we can write a CSS selector to target class:
a.navbarSpriteThe complete value of the class attribute is ‘navbarSprite home’. Why you are using only one part – navbarSprite?
Well, as I said at the start of the post, CSS rules group together several objects by their class name to give them common cosmetic behavior. A single object can have a class property that has more than one values separated by space.
In our case, the object belongs to two classes – navbarSprite and home. In these scenarios, we can target only one class if that uniquely locates the element.
However, we can also try this:
a.navbarSprite.homeCSS Selector equivalent to XPath
| Action | XPath | CSS |
| Locate an <input> with ID attribute ‘username’ |
//input[@id='username'] |
input#username |
| Locate an <input> with CLASS attribute ‘password’ |
//input[@class='password'] |
input.password |
| Locate a <span> that is DIRECT CHILD of <div> |
//div/span |
div > span |
| Locate <span> that is CHILD or SUBCHILD of <div> |
//div//span |
div span |
| Locate a link <a> with inner text ‘Log out’ |
//a[text()='Log out'] |
a:contains('Log out')
|
| Locate an element with any attribute that has a value (full match) |
//p[@name='Submit'] |
p[name='Submit'] |
| Locate an element with an attribute that has value – prexyzsuf
Contains a value ‘xyz’ (partial match) Starts with a value ‘pre’ Ends with a value ‘suf’ |
//p[contains(@name,'xyz')] //p[starts-with(@name,'xyz')] Not supported by XPath 1.0 |
p[name*='xyz'] p[name^='pre'] p[name$='suf'] |
| Locate an element with tag name not specified (wildcard) |
//*[@alt='searchIcon'] //*[@id='search'] //*[@class='product'] |
[alt='searchIcon'] #search .product |
We learned all the possible ways to locate elements. In the Next Tutorial, we will explore ways to perform the action on those elements.
To search id
**************
css=button#navbar-submit-button
To search with class
**************
css=button.primary.btn
Please note that –> class="primary btn" in class name we have a single space,,, so i need to used '.' for the space by checking on internet.
Questions
***********
Q1) What if there are mutliple spaces in class name ?
Q2) is there a shortcut to open selenium ? Because i need to press 'alt+tab' again to switch between tutorial page and selenium or click on the top right
Such assigments are great where we need to try things.(as there was a space between class name… please give such assignments so we face some difficulty.
Regards
Gaurav khurana
http://www.udzial.com
Udzial Means Share
You did the job man. There is a reason I did not cover that part in this basic css tutorial. I wanted to keep few things for advanced css part. You did good research. But one thing, don't treat them as spaces between the class name. In actual, they are different classes. If you see the css rules in FireBug you can check two different/same rules for those two different classes.
Shortcut for Selenium IDE – Ctrl+Alt+S . Before hitting keyboard, make sure Firefox is the active opened application (at front of the screen).
css=button.primary
css=button#navbar-submit-button
Correct
yeah that shortcut helps,,
Regards
Gaurav Khurana
http://www.Udzial.com
Udzial Means share
css=button#navbar-submit-button
css=button.primary
cool
Why does everybody need button in there? css=#navbar-submit-button works as well.
if you dont specify tagname it will treat it as wildcard type like * in case of xpath… any matching… it works for you in this case because that is the only matching id… however it may happen that the same id 'navbar-submit-button' is present inside two different tags….better approach is to specify the tag to make sure uniqueness… although that is also not surety
css=button#navbar-submit-button
css=button.primary
correct 🙂
Hi,
Thanks for explaining the concepts in such an easy language!!!
Here is my question:
I am unable to figure out the scenarios as to when to use XPath to find objects and when to use CSS?
I understood they are different approaches to locate object but then what is the exact use case for either of them?
As you mentioned,when the properties of an object are not unique we use XPath to locate objects.So when we have XPath, then why is CSS required?
Hi Anjali
Good question! In general, CSS selectors are just one more way to identify elements. CSS locators work faster than xpath, specially on IE. In real world projects, sometimes there are cases when you try to perform some action on elements identified using other locators, WebDriver throws an exception – "element is not visible and cannot be interacted with". In this case if you use css locators, there are chances that you may avoid that exception. However, xpath has so many in-build functions that you can use like selecting sibling, child, parent etc. Confused, which one to use??? Choose what works best for you in that scenario, and it will come with experience.
Regards,
Shadab
Using ID:
css=button#navbar-submit-button
Using Class:
css=button.primary.btn
css=button#navbar-submit-button
css=button.primary
css=button.primary.btn
css=button.btn
Also, It would be great if you can give more such assignments and with more complexity. I'm loving it 😉
This is very interesting to find elements 🙂 thanks a lot
As in the assignment,i was success in finding elements by below CSS locators
css=button.primary
css=form button
css=div>button
css=button[type=’submit’]
but
1.i was not able locate by using id , i have used below comment .Please advise
css=button#navbar -submit -button
2.Since this element has no inner Text , we can not user text() any where right ? Please correct me if i am wrong.
Okay , No 1 problem solved ( As i gave spaces there , i worked fine then).
Could you please clear 2nd doubt
Hi Amrutha
Apologies for the late response. Somehow your comment was filtered as spam.
Congratulation for your right approach to assignment. Yes, if there is no inner text for any element you wont use text().
Thanks
Shadab
Hi Shadab
Tutorials are quite good.
Just wanted to know if we can search in css using partial inner text.
a:contains(‘Log out’)
In the above case just with Log or out.
Hey Sadab, unfortunately css selectors don’t provide mechanism to search using text.
thanks for your reply, really appreciate it.