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>
						

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

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

Checkbox
							<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
							<button id="myButton">Click Me</button>
						

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

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

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>
							</select>
						


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();
  driver.get("http://seleniumbyneeds.blogspot.in/2015/01/handling-various-html-form-elements.html");
  // Click on Button
  driver.findElement(By.id("button")).click();
  // Verify input button enabled if yes click on it
  if(driver.findElement(By.id("inpButton")).isEnabled()){
    driver.findElement(By.id("inpButton")).click();
  }
  // 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();
  driver.get("http://seleniumbyneeds.blogspot.in/2015/01/handling-various-html-form-elements.html");
  // Enter the text in text box
  driver.findElement(By.id("tbox")).sendKeys("Hello there");
  // print the text from text tbox
  System.out.println(driver.findElement(By.id("tbox")).getAttribute("value"));
  // 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
  System.out.println(driver.findElement(By.id("tarea")).getText());
  // Clear the password field
  driver.findElement(By.id("pass")).clear();
 

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();
  driver.get("http://seleniumbyneeds.blogspot.in/2015/01/handling-various-html-form-elements.html");
  //Check the checkbox
  driver.findElement(By.name("check1")).click();
  //Check the checkbox 2 if it is not checked
  if(driver.findElement(By.name("check2")).isSelected()){
     driver.findElement(By.name("check2")).click();
  }
  // 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 
  //
  listBox.deselectAll(); 
  

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……

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s