This post is a continuation of the previous post on Automation with Selenum – Part 2. In this post we will be looking on how automation can be done with WebDriver in C#. Before we begin the code there are few things which we should be aware of. In order to identify or modify an element/attribute of HTML document/web page there are multiple methods provided by Web Driver. The following are the various ways to identify the elements
| Method | Description |
|---|---|
| Id | By HTML standard developers suppose to use Id for uniquly identifying the element.
Example: <input type=”text” id=”search_text”/> In order to identify this element attribute id is used and it is prefixed with # so it would become like #search_text This is the common way to find the elements by id in CSS and jQuery. The WebDriver uses FindByElementId(“id”) method |
| Name | The name attribute is similar to Id but comparing name it is rarely used by web developers.
Example: <input type=”text” name=”search_text”/> Here input element’s name attribute is used to uniquely identify the element. In WebDriver FindElementByName(“name”) method |
| Class Name | The class attribute is usually used by web developers to apply same style or functionalities to multiple elements of the HTML document/web page. So there is chance of getting multiple elements
Example: <div class=”container”>…</div> In WebDriver FindElementByClassName(“class name”) method |
| Tag Name | The tag is similar to class but this is not on attributes.
Example: <div><input type=”text”/><input type=”text”/></div> Here in this div and input are tags. So if we try to search for input you will end up getting two results. In WebDriver FindElementByTagName(“tag name”) method |
| Link Text | This is specific to <a> element Link Text
<a href=”http://bing.com”>Bing</a> Here the link text is Bing In WebDriver FindElementByLinkText(“link text”) method here for link text is “Bing” |
| Css Selector | CSS Selectors to identify the element/elements.
There is a chrome extension which you can make use Copy CSS Selector In WebDriver FindElementByCssSelector(“css selector”) method |
| XPath | Uses XPath to identify the element/elements
In WebDriver FindElementByXPath(“css selector”) method |
Note: Please have a look at the WebDriver's API documentation for more methods
Prerequisite
The sample and steps mentioned here are based on Visual Studio 2017 community edition you can implement the same with VS Code as well. So let us start
- Open the Visual Studio
- File -> New -> Project -> Console App (.Net Framework) now fill in the project name and solution name.
- Once project/solution is created right click on the project and choose Manage NuGet Packages
- Now search in search tab type Selenium which will retrieve package with name containing Selenium. Install the following packages
- Selenium.WebDriver
- Selenium.Firefox.WebDriver
- Selenium.Chrome.WebDriver
- Now we are ready with the packages. Now open Program.cs and paste the snippet found below
namespace WebDriverDemo
{
using OpenQA.Selenium;
using OpenQA.Selenium.Firefox;
internal class Program
{
private static void Main(string[] args)
{
var webdriver = new FirefoxDriver();
webdriver.Url = @"http://bing.com";
var searchBox = webdriver.FindElement(By.Id("sb_form_q"));
searchBox.SendKeys("butterfly");//This methods inputs butterfly into the HTML's input element
var searchButton = webdriver.FindElementById("sb_form_go");
searchButton.Click();
var firstResultLink = webdriver.FindElementByCssSelector("#b_results li.b_algo h2 a");
firstResultLink.Click();
}
}
}
You can find the source code at GitHub repository
Now I will explain the what’s coded in the Main method
- Opens the Firefox Browser
- Navigates to http://bing.com
- Finds the search box by using FindElementById(“sb_form_q”)
- Fills in the identified text butterfly in the search box
- Finds the search button using FindElementById(“sb_form_go”)
- Clicks on the identified search button. So the bing will return the search results.
- Finds the first item from the search results using FindElementByCssSelector(“#b_results li.b_algo h2 a”)
- Clicks on the identified first item. So it navigates to first link
In the above snippet we have created instance for FirefoxDriver which is from OpenQA.Selenium.Firefox namespace. In case if you want to use Chrome browser use OpenQA.Selenium.Chrome namespace and change the class name from FirefoxDriver to ChromeDriver.
I hope the above code is good enough for the introduction of Selenium way of Automation in C#.