CSS selectors are a great and fast way to locate elements in Selenium
WebDriver. I have listed down some basic CSS Selectors for Selenium
WebDriver which are commonly used. The goal of this tutorial is to
explain as simply as possible about various types of usages of CSS
Selectors using simple examples.
<input id="userid" type="text" value="userid" />
<button id="btnid">Submit button</button>
This HTML contains a text box with id = "userid" and a button with id = "btnid". If we want to select the text box using id css selector the syntax is
syntax = HTMLtagname # ID
Css Selector will be
input#userid (it will select the text box)
button#btnid (it will select the button)
The code in WebDriver will be
<input class="txtuser" id ="userid" type="text" value="userid" />
<button class=btnclass" id="btnid">Submit button</button>
This HTML contains a text box with class = "txtuser" and a button with class = "btnclass". If we want to select the text box using class css selector the syntax is
syntax = HTMLtagname . ClassName
Css Selector will be
input.txtuser (it will select text box)
button.btnclass (it will select the button)
The code in WebDriver will be
<input class="txtuser" id ="userid" type="text" value="userid" />
<button class=btnclass" id="btnid">Submit button</button>
<a href="http://yahoo.com" title="myLink" > My Link </a>
This HTML contains a text box , button and an anchor with various attributes.
You can select an element by using any attribute.
syntax = HTMLtagname [attribute=value]
Css Selector will be
input[id=userid] (it will select the text box)
button[class=btnclass] (it will select the button)
a[title="myLink"] (it will select the anchor)
The code in WebDriver will be
<input class="txtuser" id ="userid" type="text" value="userid" />
<button class=classbtn" id="btnid">Submit button</button>
<a href="http://yahoo.com" title="myLink" > My Link </a>
There are three ways you can match the pattern in any attribute.
Example CSS Selector.
input[id^='user'] (this will select the text box in which id starts with 'user')
Code in WebDriver:
Example CSS Selector.
button[class$='btn'] (this will select the button in which class ends with 'btn')
Code in WebDriver:
Example CSS Selector.
a[href*='yahoo'] (this will select the anchor in which href attribute contains 'yahoo')
Code in WebDriver:
<div id="ParentDiv">
<input class="txtclass" value="Text" type="text"/>
<button class="btnclass">Button</button>
<a class="anchorclass" id="anchor" href="#"> My Link </a>
</div>
The above HTML contains our beloved text box, button and anchor again. But this time inside a parent element.
The syntax to select element using its parent is
syntax = AnyParentSelector space Anychildselector
example.
div#parentdiv input.txtclass
or
div#parentdiv a[id=anchor]
Code in WebDriver:
<div id="ParentDiv">
<input class="txtclass" value="Text" type="text"/>
<button class="btnclass">Button</button>
<a class="anchorclass" id="anchor" href="#"> My Link </a>
<div id="ChildDiv">
<input class="txtclass" value="Text" type="text"/>
<button class="btnclass">Button</button>
<a class="anchorclass" id="anchor" href="#"> My Link </a>
</div>
</div>
The above HTML now contains two divs. If we want to select a child element using indirect child method, it will return us more than one occurrence of child.
example
div#parentdiv input.txtclass (This will return two text boxes with class "txtclass". As both these text boxes are the children of "parentDiv". One is the direct child and one is indirect child.
Now if we want to access the direct child, we should use ">" symbol instead of space.
example
div#parentdiv > input.txtclass (this will return the first textbox which is the direct child of parentdiv
Code in WebDriver:
Please give your feedback in the comments section
Css Selector Using ID Selector
Consider the below HTML<input id="userid" type="text" value="userid" />
<button id="btnid">Submit button</button>
This HTML contains a text box with id = "userid" and a button with id = "btnid". If we want to select the text box using id css selector the syntax is
syntax = HTMLtagname # ID
Css Selector will be
input#userid (it will select the text box)
button#btnid (it will select the button)
The code in WebDriver will be
var TxtBoxElement = driver.FindElement(By.CssSelector("input#userid")); var BtnElement = driver.FindElement(By.CssSelector("button#btnid"));
Css Selector Using Class Selector
Consider the below HTML<input class="txtuser" id ="userid" type="text" value="userid" />
<button class=btnclass" id="btnid">Submit button</button>
This HTML contains a text box with class = "txtuser" and a button with class = "btnclass". If we want to select the text box using class css selector the syntax is
syntax = HTMLtagname . ClassName
Css Selector will be
input.txtuser (it will select text box)
button.btnclass (it will select the button)
The code in WebDriver will be
var TxtBoxElement = driver.FindElement(By.CssSelector("input.txtuser")); var BtnElement = driver.FindElement(By.CssSelector("button.btnclass"));
Css Selector Using Attributes Selector
Consider the below HTML<input class="txtuser" id ="userid" type="text" value="userid" />
<button class=btnclass" id="btnid">Submit button</button>
<a href="http://yahoo.com" title="myLink" > My Link </a>
This HTML contains a text box , button and an anchor with various attributes.
You can select an element by using any attribute.
syntax = HTMLtagname [attribute=value]
Css Selector will be
input[id=userid] (it will select the text box)
button[class=btnclass] (it will select the button)
a[title="myLink"] (it will select the anchor)
The code in WebDriver will be
var TxtBoxElement = driver.FindElement(By.CssSelector("input[id=userid]")); var BtnElement = driver.FindElement(By.CssSelector("button[class=btnclass]")); var AnchorElement = driver.FindElement(By.CssSelector("a[title=myLink]"));
Css Selector Using Pattern Matching
Consider the below HTML<input class="txtuser" id ="userid" type="text" value="userid" />
<button class=classbtn" id="btnid">Submit button</button>
<a href="http://yahoo.com" title="myLink" > My Link </a>
There are three ways you can match the pattern in any attribute.
1. Starts With (prefix)
In CSS Selector, Starts with is denoted by ^ symbol.Example CSS Selector.
input[id^='user'] (this will select the text box in which id starts with 'user')
Code in WebDriver:
var TxtBoxElement = driver.FindElement(By.CssSelector("input[id^='user']"));
2. Ends With (suffix)
In CSS Selector, Ends with is denoted by $ symbol.Example CSS Selector.
button[class$='btn'] (this will select the button in which class ends with 'btn')
Code in WebDriver:
var BtnElement = driver.FindElement(By.CssSelector("button[class$='btn']"));
3. Contains
In CSS Selector, Contains is denoted by * symbol.Example CSS Selector.
a[href*='yahoo'] (this will select the anchor in which href attribute contains 'yahoo')
Code in WebDriver:
var AnchorElement = driver.FindElement(By.CssSelector("a[href*='yahoo'] "));
CSS Selector using Parent (indirect child)
Consider the following HTML<div id="ParentDiv">
<input class="txtclass" value="Text" type="text"/>
<button class="btnclass">Button</button>
<a class="anchorclass" id="anchor" href="#"> My Link </a>
</div>
The above HTML contains our beloved text box, button and anchor again. But this time inside a parent element.
The syntax to select element using its parent is
syntax = AnyParentSelector space Anychildselector
example.
div#parentdiv input.txtclass
or
div#parentdiv a[id=anchor]
Code in WebDriver:
var ElementA = driver.FindElement(By.CssSelector("div#parentdiv input.txtclass]"));
var ElementB = driver.FindElement(By.CssSelector("div#parentdiv id=anchor]"));
CSS Selector using Parent (direct child)
Consider the following HTML<div id="ParentDiv">
<input class="txtclass" value="Text" type="text"/>
<button class="btnclass">Button</button>
<a class="anchorclass" id="anchor" href="#"> My Link </a>
<div id="ChildDiv">
<input class="txtclass" value="Text" type="text"/>
<button class="btnclass">Button</button>
<a class="anchorclass" id="anchor" href="#"> My Link </a>
</div>
</div>
The above HTML now contains two divs. If we want to select a child element using indirect child method, it will return us more than one occurrence of child.
example
div#parentdiv input.txtclass (This will return two text boxes with class "txtclass". As both these text boxes are the children of "parentDiv". One is the direct child and one is indirect child.
Now if we want to access the direct child, we should use ">" symbol instead of space.
example
div#parentdiv > input.txtclass (this will return the first textbox which is the direct child of parentdiv
Code in WebDriver:
var ElementA = driver.FindElement(By.CssSelector("div#parentdiv > input.txtclass]"));
var ElementB = driver.FindElement(By.CssSelector("div#parentdiv > id=anchor]")
Conclusion
By using above CSS Selectors, we can identify almost every type of complex web elements. I hope this tutorial helps many automation testers.Please give your feedback in the comments section
This comment has been removed by a blog administrator.
ReplyDeleteGreat post.Thanks for one marvelous posting! I enjoyed reading it;The information was very useful.Keep the good work going on!!
DeleteETL Testing training in chennai| SAP MM training in chennai | Informatica training in chennai
Excellent post!!!. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it.
ReplyDeleteclinical sas training in chennai
Interesting and useful article.
ReplyDeletecommerce-server
• Nice blog. Keep sharing such a post.
ReplyDeletetib co training in chennai
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai
Deletebest and useful sites and I like the sites.
ReplyDeleteoracle training in chennai
Just the help I needed ! Thank you!
ReplyDeleteVery good article about CSS Selectors. Selenium Training Institute in chennai gives 2 days entire thing about Automation Testing and the different tools used in the industry.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank you for sharing the blog,I have been looking forward to it for a long time, It would be great to see some more information soon. And i am waiting for your nest post.
ReplyDeleteSoftware Testing Training in Chennai | Software Testing Training in Chennai
Good and nice post, thanks for sharing your views and ideas... keep rocks...
ReplyDeleteDot Net Training in chennai | Best Dot Net Training institute in chennai |Dot Net course
Your Blog is really amazing with smart and cute content.Thanks for sharing such a wonderful post..
ReplyDeleteAndroid Project Center in Chennai | Android Project Center in Velachery
Wonderful post. I am learning so many things from your blog.keep posting.
ReplyDeletePHP Online Training
Pega Online Training
Oracle Soa Online Training
ReplyDeleteThe great service in this blog and the nice technology is visible in this blog. I am really very happy for the nice approach is visible in this blog and thank you very much for using the nice technology in this blog
web designing course in chennai
I have read your blog completely. It is very impressive one for all the viewers. Thanks for sharing this blog.
ReplyDeleteselenium training in chennai
Excellent blog! I found it while surfing around on Google. Content of this page is unique as well as well researched. Appreciate it. BinaryToday.com
ReplyDeleteMuch appreciated you particularly to share these connections. Will look at this..
ReplyDeletecss beautifier
Selenium is the best tool available in the market to test web applications. It is high in demand as the tool can be used to work with multiple OS and browsers compared to other tools.
ReplyDeleteSelenium Automation Training London
Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info. recover money lost to binary options
ReplyDeleteThis is an awesome article/cheat sheet on using css selectors with selenium (its a great reference for web scraping in general). Ive linked to your page from seoscrape.com and am going to write a post on my website as well. Thanks!
ReplyDeleteSuch an exceptionally helpful article. Exceptionally fascinating to peruse this article.I might want to thank you for the endeavors you had made for composing this amazing article.
ReplyDeletecityindex.com review
Thanks for sharing this great article! That is very interesting I love reading and I am always searching for informative articles like this.
ReplyDeleteMatLab Training Institute in Chennai | MatLab Training Center in Velachery | Matlab Courses in Adyar
Awesome article. thanks for sharing this wonderful article with us.keep updating...
ReplyDeleteTally Training Institute in Chennai | Advanced Tally Courses in Guindy | Tally Training Center in Velachery