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.

<a href="#">My Simple Link</a>

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

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

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

<input type="text" id="txt" value="Some Text" />

<input type="password" id="pass"
value="somepass" />

<textarea id="tArea">this is Firstline. This is Secondline</textarea

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

<input name="options" type="radio"
value="option1"/>Option 1 
<input name="options" type="radio"
 value="option1"/>Option 2

<select id="mycombo">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</select>

<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();