CSS Selector is a element locator in Selenium which is used to identify the elements in a webpage.In this post i am going to explain CSS selectors in details,i hope with this explanation you will get clear idea how to use CSS Selector in selenium.
Read Also Xpath Tutorials
1 2 3 4 | CSS is a Cascade Style Sheet which is describes sty;e of an HTML document. CSS Selector is a locator in Selenium CSS Selector locator works fast compare to Xpath in Selenium WebDriver. In case web element do not have id,name etc elements then we can use CSS Selectors |
 |
| Selenium CSS Selector with examples |
Examples of CSS Selectors
In XPATH we are defining the document elements with "/" but in CSS Selector you can use ">"
Examples
/html/body/div/div[3]/input[1]
css = div > a
Syntax
tagname[attribute name=attribute value]
To find username in the form which is located in the form then you write the CSS Selector as below.
<form><input id='username' name='uname'></input></form>
css=input[name='uname']
For Button
css = input[name='Submit'][type='button']
CSS Selectors using #
cssselector("input#username")
CSS Selectors Types
- id
- class
- Attribute
- Sub-String
- InnerText
CSS Selector - ID
Css selectors will identify the elements in webpage ,in case you want to write css selector for id attributename then follow below systax
Syntax
css=tagname#attributevalue
Example
I have taken Google search as a example here search text box has id attribute name ,let's see how to write css selector for id type
css=input#lst-ib
In this above path
1.input - tagname in a webpage
2.#lst-ib - attribute value of attribute name i.e input
You can write above CSS Selector as below
css=#lst-ib //Simple removing input tagname
//It will identify the element in a webpage with hash(#) it is the symbol of id to identify in CSS Selector.
CSS Selector Class
For <a> tagname i am using gmail link in this href class is declared as below image,let's write the CSS Selector for class and locating an element with class is same as like ID type
in a webpage.
css=a.gb_P
//As per above code
a - Tagname
gb_p- is the class value
Another way to write the CSS Selector for Class in case it is present in a div
<div><a class="gb_P" data-ved="0EMIuCBIoAA"</div>
css=div#gb_Q gb_R a
Example
Another example of CSS Selector Class is while login into gmail account one check box is displaying i.e Stay Signed in for this code as below.
<label class="remember" style="background-color: transparent;">
<input id="PersistentCookie" type="checkbox" checked="checked" value="yes" name="PersistentCookie">
<span style="background-color: transparent;"> Stay signed in </span>
so for above code class is displaying under label tagname and value is remember,let's write the css selector as below
css=label.remember
It will identify Stay signed in check box
CSS Selector Attribute
Attribue in a css selector is to identify the elements in a webpage without using class or id of the element,let's see the details below,Suppose example in a form i have firstname field then we need to capture that particular element.
<form>
<input name='firstname' value='enter first name' id='fname'></input>
</form>
for above HTML code we can write css selector as
css=form input[name='firstname']
in case there is non form for <input> tagname then Css Selector as below
css=input[name='firstname']
Some more examples
css=a[type='link']
css=input[type='text']
CSS Selector Sub String
CSS in Selenium provides interesting feature to identify the sub string i.e partial string to identify the elements in a webpage with matching cases as
- ^= means String/Word start with
- $= means String/Word end with
- *=Means Sub-String
Let's see each one with examples
<input type="text" id="345_name" name="First_name" />
<input type="text" id="name_900" name="Last_name" />
<input type="text" id="345_email_name" name="Email_address" />
As above HTML code id attribute values are different and instead of mentioning full name we are going to use starting/ending strings as below
CSS Selector for Sub String
1.css="input[id^='345']"
2.css="input[id$='900']"
3.css="input[id*='_email']"
Like we can write CSS Selector for Sub strings let's see some more examples for <div> tag
1.css="div[name^='first']"
2.css="div[name$='name']"
3.css="div[name*='_address']"
CSS Selector Innertext
CSS Selector innertext is very easy to write the CSS Selector in selenium and simple you can use "Contains" in css path,Let's see the examples in details
<input type="submit" value="Login">Login</input>
css=input:contains['Login']
Syntax
CSS=tagname:<contains>['Link Text/text']
Suppose example in below code Continue button is given let's identify it using CSS Selector innertext
<span id="auth-continue-announce" class="a-button-text" aria-hidden="true"> Continue </span>
You can write CSS Selector in Selenium as css=span:contains('Continue')
As per above examples ,if you practice more example with CSS Selector in Selenium then you can easily understand the concept of identifying the elements in a Webpage.Please share and provide your valuable comments on this post.Thank you for reading,keep on visit for more useful articles on Selenium Tutorials.
0 Comments