Sunday, March 27, 2016

Css Selectors for Selenium WebDriver

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.

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

11 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. 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.
    clinical sas training in chennai

    ReplyDelete
  3. Just the help I needed ! Thank you!

    ReplyDelete
  4. Very 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.

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Thank 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.

    Software Testing Training in Chennai | Software Testing Training in Chennai

    ReplyDelete
  7. Your Blog is really amazing with smart and cute content.Thanks for sharing such a wonderful post..
    Android Project Center in Chennai | Android Project Center in Velachery

    ReplyDelete