Handling HTML Form Elements.

Almost in every web application, we inputs some values, Selects Options/Checkbox clicks on links/buttons etc through html elements and submit the page and save/retrieve values. Today we will see how to interact with all these HTML elements (Web Controls). WebDriver treats all those elements as a same that is WebElement. below is the list of web controls and their HTML Syntax.

Name HTML Syntax
Hyper Link
							<a href="#">Link</a>

Text Box
							<input type="text" value="Some text"></input>

							<input type="password" value="Some text"></input>

Multiline Textbox
							<textarea>First line
							Second line</textarea>

							<input name="check1" type="checkbox"/>checkbox 1
							<input name="check2" type="checkbox"/>checkbox 2

Radio Button
							<input name="options" type="radio" value="Option1" />Option 1
							<input name="options" type="radio" value="Option2" />Option 2

Input Button
							<input type="button" value="Click Me" id="myInpButton" />

							<button id="myButton">Click Me</button>

Submit Button
							<input type="Submit" id="mySubmit" />

Combo Box
								<option>Value 1</option>
								<option>Value 2</option>
								<option>Value 3</option>

Multiselect Listbox
							<select multiple="multiple" size="5">
								<option>Value 1</option>
								<option>Value 2</option>
								<option>Value 3</option>
								<option>Value 4</option>
								<option>Value 5</option>

Click Elements :

Below elements are generally used for Click interaction, also many time we need to verify element is enabled / disabled

  • Hyper Link
  • Input Button
  • Button
  • Submit Button

to click on all above controls we can use click() Method

to check the element is enabled we use isEnabled() Method

Check the below code

  WebDriver driver = new FirefoxDriver();
  // Click on Button
  // Verify input button enabled if yes click on it
  // Click on link by selecting by link text
  driver.findElement(By.linkText("My Simple Link")).click();

Text Elements

Below elements used to enter text/numbers/words

  • Text Box
  • Password
  • Multiline Textbox

to enter the text, We use .sendKeys() Method with desired text as argument to read text from Multi line TextBox we use .getText() method but to read the text from the TextBox & Password element we should use .getAttribute(“value”)
to clear the text from elements we can use clear() please check below code

WebDriver driver = new FirefoxDriver();
  // Enter the text in text box
  driver.findElement(By.id("tbox")).sendKeys("Hello there");
  // print the text from text tbox
  // enter the text in multi line text box
  driver.findElement(By.id("tarea")).sendKeys("here comes line 1\nhere comes line 2");
  // print the text from multi line text tbox
  // Clear the password field

Selection Elements

Here in this category we get multiple options to select from them, below is the list of selection elements

  • Checkbox
  • Radio Button
  • Combo Box
  • Multi Select ListBox

to check or un-check the CheckBox we use click() Method.

to verify the CheckBox is checked we use .isSelected() Method

to select & verify selected Radio buttons, same methods are used.

to select the specific option from Combo Box & Multi Select ListBox Selenium WebDriver provides Special class org.openqa.selenium.support.ui.Select

Below is code snippet which use to select single or multiple options.

WebDriver driver = new FirefoxDriver();
  //Check the checkbox
  //Check the checkbox 2 if it is not checked
  // select the option Value 2 from combo box
  // 1. Convert WebElement to Select
  // 2. Select the desired option
  Select comboBox = new Select(driver.findElement(By.id("myCombo")));
  comboBox.selectByVisibleText("Value 2");
  // Multi select from the list
  Select listBox = new Select(driver.findElement(By.id("myCombo")));
  listBox.selectByVisibleText("Value 1");
  listBox.selectByVisibleText("Value 2");
  // deselect the specific item
  listBox.deselectByValue("Value 1");
  // De-select all the items from the list 

Select class also provide other useful methods to interact with List and combo

getFirstSelectedOption() returns the first selected element from the list

getAllSelectedOptions() returns List of WebElement which are selected

Note: Other then Visible text there are also methods available for index & value attribute

Keep Exploring… & Keep Automating……


Selecting Date on JQuery Datepicker

Hello Friends,

In this post we will see how to select specific date in JQuery Datepicker.

Its very easy to enter date as text by .sendKeys() method, but mostly when application uses JQuery Datepicker, it disables typing on the text-box. the text-box sets to read only.

While automating such screens we need to write logic which can interact with Datepicker and selects desired date.

Consider below example of Datepicker.

Html code for above example is

To automate this, we first break apart a problem.

  1. Decide which date we want to set 
  2. Read the current date from datepicker 
  3. Calculate difference between both dates in Months(difference will positive in case of set date is in future respective to current date & will negative when set date is in past respective to current date of datepicker) 
  4. Set loop depends on month difference and navigate the datepicker to specific month 
  5. Select the Day. 

Lets implement the above logic.
Note: we have used Joda Date Time Library for calculate date and time difference

SimpleDateFormat myDateFormat = new SimpleDateFormat("dd/MM/yyyy");
SimpleDateFormat calDateFormat = new SimpleDateFormat("MMMM yyyy");
Date setDate=myDateFormat.parse("15/08/2014");
WebDriver driver = new FirefoxDriver();
// Switch to frame where the Menu Example is loaded
Date curDate = calDateFormat.parse(driver.findElement(By.className("ui-datepicker-title")).getText());
// Joda org.joda.time.Months class to calculate difference
// to do this converted Date to joda DatTime
int monthDiff = Months.monthsBetween(new DateTime(curDate).withDayOfMonth(1), new DateTime(setDate).withDayOfMonth(1)).getMonths();
boolean isFuture = true;
// decided whether set date is in past or future
isFuture = false;
// iterate through month difference
for(int i=1;i&amp;amp;lt;=monthDiff;i++){
driver.findElement(By.className("ui-datepicker-" + (isFuture?"next":"prev"))).click();
// Click on Day of Month from table
driver.findElement(By.xpath("//table[@class='ui-datepicker-calendar']//a[text()='" + (new DateTime(setDate).getDayOfMonth()) + ";']")).click();

Hope this will help you…. you can directly use above code if your application is using JQuery Datepicker. Keep automating……