Execution Of Selenium Web Driver Using C# And JavaScript

In my previous articles/blogs on Selenium web driver, we have seen the execution of various HTML controls using Selenium C#. As we know, using selenium, we can automate anything which we see on the web page or web application, like Alert message, prompt message, message box, textbox, dropdown buttons like (single click, double click), hyperlink, checkbox, radio button etc. and even we can automate the applications developed using Ext.js(Sencha Applications) or KendoUI etc.

In order to identify the controls which are available on the web page, we use various control properties like Id, Name, XPath, ClassName, TagName, CssSelector, RelativeXPath, AbsoluteXPath etc.

 

In order to automate a control which is available on the web page, we use the above-mentioned control properties like Id, Name, XPath etc. We can directly give the control properties to identify the specific control and automate them.

 

In some cases or some scenarios, there are no control properties except className which includes a space in it, so if that is the case, then we need to use either XPath or CssSelector.

 

For taking XPath, we need to click on F12 Key to inspect element or Ctrl+Shift+I. Once we select the element, right click on the particular element. One popup menu appears. Navigate towards Copy--> Copy XPath.

 

If there is any space in the control property like ClassName, then we cannot access that control by using ClassName property. Instead, we need to access that control by using CssSelector control property. In order to use CssSelector, we need to replace spaces with a dot(.).

 

For Example : ClassName="name of the element on webpage" ; then, we need to use a CssSelector like CssSelector=".name.of.the.element.on.webpage";

 

In some applications like Sencha or ExtJs Application, we cannot access a control with control properties like Id, Name, XPath etc. because when the page refreshes, the control properties change dynamically in runtime.

 

In a few cases or scenarios, the control will have a unique className property; due to this reason, we can either use CssSelector or Relative XPath. 

 

For Using RelativeXPath , we need to create our own XPath by using two forward slashes like "//" 

 

If we want to access a specific control if it doesn't contain any control properties and we cannot give Xpath, as it changes every time dynamically, then we need to access the control with its parent control, which has a unique control property.

 

In ExtJs or sencha application, not all controls will change properties dynamically. But there will be a few controls with unique control properties. If the control have a unique property like className , then we can use it directly, otherwise we need to access the control by its parent control by taking relative XPath.

 

For taking relative Xpath we need to access from its parent control which ever is having a unique control property like

//div[@class="uniqueclassproperty/div/a/input[2]"].

 

If we want to access the second input control on a webpage we need to use it as input[index value of input control] that is input[2]. 

 

In the below example we will see how to automate C# corner Signup page using Selenium Webdriver C# and Javascript.

 

 

 

Example

Using System;
Using OpenQA.Selenium;
Using OpenQA.Selenium.IE;
Using OpenQA.Selenium.Chrome;
Using MbUnit.Framework;
Namespace SeleniumExecutionWithC#[TestClass]
Public class SeleniumExecutionWithC# {
    IwebDriver driver = null;
    Public SeleniumExecutionWithC#() {
            driver = new ChromeDriver("Here we need to define the path of Chrome driver.exe"); //Drivers can be downloaded from http://www.seleniumhq.org/download/
        }
        [Test]
    Public void ExecuteMethod() {
            driver.Navigate().GoToUrl("http://www.c-sharpcorner.com/register"); // Navigates to application which we want to Automate.
            driver.Manage().Window.Maximize(); // For Maximizing the browser.

In the above image for Enter Email control we have various control properties like

name ="ctl00$ContentMain$TextBoxEmail" , id="ctl00_ContentMain_TextBoxEmail" , class= "TextBoxStyle" and XPath="//*[@id='ctl00_ContentMain_TextBoxEmail']" etc.

we can use any of these control properties to identify a control and perform some automation / operation on it like below.

IWebElement EnterEmail= driver.FindElement(By.Id("ctl00_ContentMain_TextBoxEmail"));
or
IWebElement EnterEmail= driver.FindElement(By.Name("ctl00$ContentMain$TextBoxEmail"));
or
IWebElement EnterEmail= driver.FindElement(By.ClassName("TextBoxStyle"));
or
IWebElement EnterEmail= driver.FindElement(By.XPath("//*[@id='ctl00_ContentMain_TextBoxEmail']"));

Once we find the control with its control properties like above , we can now automate that control

EnterEmail.SendKeys("[email protected]");

The above line of code is used for Entering the given value to the Enter Email textbox. For Executing the same control using Javascript we will use IJavascriptExecutor like below

IJavascriptExecutor jse = (IJavascriptExecutor) driver;
jse.executeScript("document.getElementById('Id of the control').value='[email protected]'");
or
jse.executeScript("arguments[0].value='[email protected]';",EnterEmail );
or
jse.executeScript("arguments[0].setAttribute('value', arguments[1])", EnterEmail, [email protected]);

 

In the above image , in order to automate FirstName control we have varios control properties like below

name="ctl00$ContentMain$TextBoxFirstName" , id="ctl00_ContentMain_TextBoxFirstName" , class="TextBoxStyle half_taxtInput"
and XPath="//*[@id='ctl00_ContentMain_TextBoxFirstName']" etc

We can use any of these control properties to automate FirstName control like below.

IWebElement FirstName=driver.FindElement(By.Id("ctl00_ContentMain_TextBoxFirstName"));
or
IWebElement FirstName=driver.FindElement(By.Name("ctl00$ContentMain$TextBoxFirstName"));
or
IWebElement FirstName=driver.FindElement(By.ClassName("TextBoxStyle half_taxtInput"));
or
IWebElement FirstName=driver.FindElement(By.XPath("//*[@id='ctl00_ContentMain_TextBoxFirstName']"));

Once the control is identified we can automate it by sending the given input value like.

FirstName.SendKeys("Khaja");

The above line of code is used for entering the firstname say Khaja to the FirstName textbox. For Executing the FirstName control using Javascript we will use IJavascriptExecutor like below

IJavascriptExecutor jse = (IJavascriptExecutor) driver;
jse.executeScript("document.getElementById('Id of the control').value='Khaja'");
or
jse.executeScript("arguments[0].value='Khaja';",FirstName );
or
jse.executeScript("arguments[0].setAttribute('value', arguments[1])", FirstName, khaja);

Similarly to identify a LastName control we have control properties like

name="ctl00$ContentMain$TextBoxLastName" id="ctl00_ContentMain_TextBoxLastName" class="TextBoxStyle half_taxtInput marginLeft" and XPath="//*[@id='ctl00_ContentMain_TextBoxLastName']" etc

Here we can use any of the control properties to identify a control and automate it like below.

IWebElement LastName=driver.FindElement(By.Id("ctl00_ContentMain_TextBoxLastName"));
 or
IWebElement LastName=driver.FindElement(By.Name("ctl00$ContentMain$TextBoxLastName"));
or
IWebElement LastName=driver.FindElement(By.ClassName("TextBoxStyle half_taxtInput marginLeft"));
or
IWebElement LastName=driver.FindElement(By.XPath("//*[@id='ctl00_ContentMain_TextBoxLastName']"));

Once LastName control is identified , we can automate it like below.

LastName.SendKeys("Moizuddin");

The above line of code is used for entering the lastname to the Last Name textbox. For Executing the Last Name control using Javascript we will use IJavascriptExecutor like below

IJavascriptExecutor jse = (IJavascriptExecutor) driver;
jse.executeScript("document.getElementById('Id of the control').value='Moizuddin'");
or
jse.executeScript("arguments[0].value='Moizuddin';",LastName );
or
jse.executeScript("arguments[0].setAttribute('value', arguments[1])", LastName, Moizuddin);

In order to automate Enter Password control , we have various control properties like below

name="ctl00$ContentMain$TextBoxPassword" , id="ctl00_ContentMain_TextBoxPassword" , class="TextBoxStyle" ,
XPath="//*[@id='ctl00_ContentMain_TextBoxPassword']" etc.
IWebElement EnterPwd= driver.FindElement(By.Id("ctl00_ContentMain_TextBoxPassword"));
or
IWebElement EnterPwd= driver.FindElement(By.Name("ctl00$ContentMain$TextBoxPassword"));
or
IWebElement EnterPwd= driver.FindElement(By.ClassName("TextBoxStyle"));
or
IWebElement EnterPwd= driver.FindElement(By.XPath("//*[@id='ctl00_ContentMain_TextBoxPassword']"));

Once Enter Password Control is identified we can automate it like below.

EnterPwd.SendKeys("1234567890");

For Executing the Enter Password control using Javascript, we will use IJavascriptExecutor like below

IJavascriptExecutor jse = (IJavascriptExecutor) driver;
jse.executeScript("document.getElementById('Id of the control').value='1234567890'");
or
jse.executeScript("arguments[0].value='1234567890';",EnterPwd );
or
jse.executeScript("arguments[0].setAttribute('value', arguments[1])", EnterPwd, 1234567890);

Similarly, for Confirm Password control, we have control properties like

name="ctl00$ContentMain$TextBoxPasswordConfirm" , id="ctl00_ContentMain_TextBoxPasswordConfirm" , Class="TextBoxStyle" and
XPath="//*[@id='ctl00_ContentMain_TextBoxPasswordConfirm']" etc.
IWebElement ConfirmPwd= driver.FindElement(By.Id("ctl00_ContentMain_TextBoxPasswordConfirm"));
or
IWebElement ConfirmPwd= driver.FindElement(By.Name("ctl00$ContentMain$TextBoxPasswordConfirm"));
or
IWebElement ConfirmPwd= driver.FindElement(By.ClassName("TextBoxStyle"));
or
IWebElement ConfirmPwd= driver.FindElement(By.XPath("//*[@id='ctl00_ContentMain_TextBoxPasswordConfirm']"));

Once Confirm Password Control is identified we can automate it like below.

EnterPwd.SendKeys("1234567890");

For Executing the Confirm Password control using Javascript we will use IJavascriptExecutor like below

IJavascriptExecutor jse = (IJavascriptExecutor) driver;
jse.executeScript("document.getElementById('Id of the control').value='1234567890'");
or
jse.executeScript("arguments[0].value='1234567890';",ConfirmPwd );
or
jse.executeScript("arguments[0].setAttribute('value', arguments[1])", ConfirmPwd, 1234567890);

For Select Country Dropdown we have its control properties like

name="ctl00$ContentMain$DropdownListCountry" , id="ctl00_ContentMain_DropdownListCountry" , class="SelectBoxStyle" and
XPath="//*[@id='ctl00_ContentMain_DropdownListCountry']" etc

IWebElement SelectCountry= driver.FindElement(By.Id("ctl00_ContentMain_DropdownListCountry"));
or
IWebElement SelectCountry= driver.FindElement(By.Name("ctl00$ContentMain$DropdownListCountry"));
or
IWebElement SelectCountry= driver.FindElement(By.ClassName("SelectBoxStyle"));
or
IWebElement SelectCountry= driver.FindElement(By.XPath("//*[@id='ctl00_ContentMain_DropdownListCountry']"));

Once Select Country control is identified , we can select the value ie.India like below

SelectElement SelectCountryVal = new SelectElement(SelectCountry);
SelectCountryVal.SelectByText("India");
or
SelectCountryVal.SelectByValue("India");
or
SelectCountryVal.SelectByIndex("Index value of India");

For Executing the Select Country control using Javascript we will use IJavascriptExecutor like below

jse.executeScript("var select = arguments[0];
for(var i = 0; i < select.options.length; i++){ if(select.options[i].text == arguments[1]){ select.options[i].selected = true; } }", SelectCountry, "India");

For entering zip control we have control properties like below.

name="ctl00$ContentMain$TextBoxZip" , id="TextBoxZip" , class="TextBoxStyle" and XPath="//*[@id='TextBoxZip']" etc.

IWebElement Enterzip=driver.FindElement(By.Id("TextBoxZip"));
or
IWebElement Enterzip=driver.FindElement(By.Name("ctl00$ContentMain$TextBoxZip"));
or
IWebElement Enterzip=driver.FindElement(By.ClassName("TextBoxStyle"));
or
IWebElement Enterzip=driver.FindElement(By.XPath("//*[@id='TextBoxZip']"));

Once Enter Zip control is identified we can automate it like below.

Enterzip.SendKeys("500093");

The above line of code is used for entering the zip to Enter Zip textbox.

  

For Executing the Enter Zip control using Javascript we will use IJavascriptExecutor like below

IJavascriptExecutor jse = (IJavascriptExecutor) driver;
jse.executeScript("document.getElementById('Id of the control').value='500093'");
or
jse.executeScript("arguments[0].value='500093';",Enterzip );
or
jse.executeScript("arguments[0].setAttribute('value', arguments[1])", Enterzip, 500093);

For Enter city Textbox control, we have control properties like below.

name="ctl00$ContentMain$TextBoxCity" , id="TextBoxCity" , class="TextBoxStyle" & XPath="//*[@id='TextBoxCity']" etc.

IWebElement Entercity= driver.FindElement(By.Id("TextBoxCity"));
or
IWebElement Entercity= driver.FindElement(By.Name("ctl00$ContentMain$TextBoxCity"));
or
IWebElement Entercity= driver.FindElement(By.ClassName("TextBoxStyle"));
or
IWebElement Entercity= driver.FindElement(By.XPath("//*[@id='TextBoxCity']"));
Entercity.SendKeys("Hyderabad");

The above line of code is used for entering the given value to Enter city textbox.

 

For Executing the Enter City control using Javascript, we will use IJavascriptExecutor like below

IJavascriptExecutor jse = (IJavascriptExecutor) driver;
jse.executeScript("document.getElementById('Id of the control').value='Hyderabad'");
or
jse.executeScript("arguments[0].value='Hyderabad';",Entercity );
or
jse.executeScript("arguments[0].setAttribute('value', arguments[1])", Entercity, Hyderabad);

For Security Question dropdown, we have control properties like below.

name="ctl00$ContentMain$DropdownListSecurityQuesion" id="ctl00_ContentMain_DropdownListSecurityQuesion" , class="SelectBoxStyle" and
XPath="//*[@id='ctl00_ContentMain_DropdownListSecurityQuesion']" etc.
IWebElement Securityquestion= driver.FindElement(By.Id("ctl00_ContentMain_DropdownListSecurityQuesion"));
or
IWebElement Securityquestion= driver.FindElement(By.Name("ctl00$ContentMain$DropdownListSecurityQuesion"));
or
IWebElement Securityquestion= driver.FindElement(By.ClassName("SelectBoxStyle"));
or
IWebElement Securityquestion= driver.FindElement(By.XPath("//*[@id='ctl00_ContentMain_DropdownListSecurityQuesion']"));

Once Security Question control is identified , we can select the value like below

SelectElement Securityquestionvalue= new SelectElement(Securityquestion);
Securityquestionvalue.SelectByText("What is the name of the company of your first job?");
or
Securityquestionvalue.SelectByValue(2);
or
Securityquestionvalue.SelectByIndex(2);

For Automating Security Question control using JavaScript, we will use IJavascriptExecutor like below

jse.executeScript("var select = arguments[0];
for(var i = 0; i < select.options.length; i++){ if(select.options[i].text == arguments[1]){ select.options[i].selected = true; } }", Securityquestion, "What is the name of the company of your first job?");

For Answering textbox control we have various control properties like below

name="ctl00$ContentMain$TextBoxAnswer" , id="ctl00_ContentMain_TextBoxAnswer" , class="TextBoxStyle" and XPath='//*[@id="ctl00_ContentMain_TextBoxAnswer']" etc
IWebElement Securityanswer= driver.FindElement(By.Id("ctl00_ContentMain_TextBoxAnswer"));
or
IWebElement Securityanswer= driver.FindElement(By.Name("ctl00$ContentMain$TextBoxAnswer"));
or
IWebElement Securityanswer= driver.FindElement(By.ClassName("TextBoxStyle"));
or
IWebElement Securityanswer= driver.FindElement(By.XPath("//*[@id="ctl00_ContentMain_TextBoxAnswer']"));

For Executing the Security Answer control using Javascript we will use IJavascriptExecutor like below

IJavascriptExecutor jse = (IJavascriptExecutor) driver;
jse.executeScript("document.getElementById('Id of the control').value='xyzz Technologies'");
or
jse.executeScript("arguments[0].value='xyzz Technologies';",Securityanswer );
or
jse.executeScript("arguments[0].setAttribute('value', arguments[1])", Securityanswer, xyzz Technologies);

Here the next control is Captcha control , as the image changes every time when page is refreshed, so it will be difficult to automate by using its control properties , if you want to automate captcha , there are various blogs available for reference on the internet.

 

For clicking on Register Me button we have various control properties like below .

name = "ctl00$ContentMain$ButtonSave", id = "ctl00_ContentMain_ButtonSave", class = "NewCommonButtonStyle active"
and XPath = "//*[@id='ctl00_ContentMain_ButtonSave']"
etc.
IWebElement Registerme = driver.FindElement(By.Id("ctl00_ContentMain_ButtonSave"));
or
IWebElement Registerme = driver.FindElement(By.Name("ctl00$ContentMain$ButtonSave"));
or
IWebElement Registerme = driver.FindElement(By.ClassName("NewCommonButtonStyle active"));
or
IWebElement Registerme = driver.FindElement(By.XPath("//*[@id='ctl00_ContentMain_ButtonSave']"));
IJavaScriptExecutor jse = (IJavaScriptExecutor) driver;
jse.executeScript("arguments[0].click();", Registerme);
Similarly to perform double click we use the following code.
IJavaScriptExecutor jse = (IJavaScriptExecutor) driver;
jse.executeScript("arguments[0].dblclick();", Registerme);
}
}

Thanks everyone for reading my article , please provide me with feedback for this article.