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.
ReplyDeleteInteresting and useful article.
ReplyDeletecommerce-server
• Nice blog. Keep sharing such a post.
ReplyDeletetib co training in chennai
best and useful sites and I like the sites.
ReplyDeleteoracle training in chennai
Just the help I needed ! Thank you!
ReplyDelete