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