Operations on HTML Elements

Operations on HTML Elements.

In every web application there are inputs tags, Selects Options, Checkboxes ,Text areas links & buttons. lets see how to interact with all these HTML elements (Web Controls). WebDriver treats all those elements as a  WebElement.

Sr. No. Name Control HTML Syntax
1 Hyper Link My Simple Link
<a href="#">My Simple Link</a>
2 Input Button
<input id="myInpButton" type="button"
 value="Click Me" />
3 Button
<button id="myButton">Click Me</button>
4 Submit Button
<input id="mySubmit" type="Submit" />
5 Text Box
<input type="text" id="txt" value="Some Text" />
6 Password
<input type="password" id="pass"
value="somepass" />
7 Multiline Textbox
<textarea id="tArea">this is Firstline. This is Secondline</textarea
8 Checkbox checkbox 1
checkbox 2
<input name="check1" type="checkbox" />checkbox 1
<input name="check2" type="checkbox" />checkbox 2
9 Radio Button Option 1
Option 2
<input name="options" type="radio"
value="option1"/>Option 1 
<input name="options" type="radio"
 value="option1"/>Option 2
10 Combo Box
<select id="mycombo">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</select>
11 Multi Select ListBox
<select multiple="multiple" size="5" id="myList">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
<option>Value 5</option>
</select>

 

While testing we need to do several operations on these web elements like click on link or buttons entering values to textboxes or text areas selecting a value from drop down list or selecting checkbox or radio button. Let’s see one by one.

  1. Hyper link : to click on this controls we can use click() Method . below is the way to click on hyperlink.

System.setProperty("webdriver.chrome.driver","path-to-chrome-driver")

WebDriver driver= ChromeDriver();

driver.get("http://scriptinglogic.com/index.php/software-testing/selenium/operations-on-html-elements/"); driver.findElement(By.id("link")).click();
  1. Input Button : to click on this controls we can use click() Method.below is the way to click on Input Button.

System.setProperty("webdriver.chrome.driver","path-to-chrome-driver")

WebDriver driver= ChromeDriver();

driver.get("http://scriptinglogic.com/index.php/software-testing/selenium/operations-on-html-elements/"); driver.findElement(By.id("button")).click();
  1. Button : to click on this controls we can use click() Method. below is the way to click on tag name Button.

System.setProperty("webdriver.chrome.driver","path-to-chrome-driver")

WebDriver driver= ChromeDriver();



driver.get("http://scriptinglogic.com/index.php/software-testing/selenium/operations-on-html-elements/"); driver.findElement(By.id("mybutton")).click();
  1. Submit Button : to click on this controls we can use click() below is the way to click on Input Button.

System.setProperty("webdriver.chrome.driver","path-to-chrome-driver")

WebDriver driver= ChromeDriver();



driver.get("http://scriptinglogic.com/index.php/software-testing/selenium/operations-on-html-elements/"); driver.findElement(By.id("mySubmit")).click();

Now to check whether the web element is enabled or not we use isEnable() method it returns true if the element is enabled and false if not enabled. lets see below example.


System.setProperty("webdriver.chrome.driver","path-to-chrome-driver")

WebDriver driver= ChromeDriver();

driver.get("http://scriptinglogic.com/index.php/software-testing/selenium/operations-on-html-elements/"); if(driver.findElement(By.id("myButton")).isEnabled()){ driver.findElement(By.id("myButton")).click(); } 

 

Text Box | Password | Multi line Text Box

For these web elements we need to write or enter some value or text inside it. we can achieve this using sendkeys(“string to be set”) method. lets see below code


System.setProperty("webdriver.chrome.driver","path-to-chrome-driver")

WebDriver driver= ChromeDriver();



driver.get("http://scriptinglogic.com/index.php/software-testing/selenium/operations-on-html-elements/"); // Enter the text in text box driver.findElement(By.id("txt")).sendKeys("hi text"); // Enter the text in Password driver.findElement(By.id("pass")).sendKeys("password"); // enter the text in multi line text box driver.findElement(By.id("tArea")).sendKeys("This is line no.1\nThis is line no. 2"); 

 

Now to get the value from above HTML elements we have a method getText(). clear() Method clears the text. lets see how it works


System.setProperty("webdriver.chrome.driver","path-to-chrome-driver")

WebDriver driver= ChromeDriver();

driver.get("http://scriptinglogic.com/index.php/software-testing/selenium/operations-on-html-elements/"); //Printing the text inside the text field System.out.println(driver.findElement(By.id("txt")).getText()); // Clear the Text field driver.findElement(By.id("pass")).clear(); 

 

Check Box | Radio Button

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


System.setProperty("webdriver.chrome.driver","path-to-chrome-driver")

WebDriver driver= ChromeDriver();

driver.get("http://scriptinglogic.com/index.php/software-testing/selenium/operations-on-html-elements/"); //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(); 
} 

 

Combo Box & Multi Select ListBox

to select the specific option from Combo Box & Multi Select ListBox Selenium WebDriver has a Special class org.openqa.selenium.support.ui.Select, we need to import this class lets see how to select a perticular option.


System.setProperty("webdriver.chrome.driver","path-to-chrome-driver")

WebDriver driver= ChromeDriver();



driver.get("http://scriptinglogic.com/index.php/software-testing/selenium/operations-on-html-elements/"); // For combo box using selectByVisibleText Select comboBox = new Select(driver.findElement(By.id("myCombo"))); comboBox.selectByVisibleText("Value 2"); // For combo box using selectByValue Select comboBox = new Select(driver.findElement(By.id("myCombo"))); comboBox.selectByValue("value2"); // value inside value tag // For combo box using selectByIndex Select comboBox = new Select(driver.findElement(By.id("myCombo"))); 

comboBox.selectByIndex(2); // index of the option // index starts from 0 // For Multi select list
 Select listBox = new Select(driver.findElement(By.id("myList"))); 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();