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.
    WebDriver driver = new FirefoxDriver();
    driver.get("http://scriptinglogic.com/index.php/software-testing/selenium/operations-on-html-elements/");
    driver.findElement(By.id("link")).click();
  2. Input Button : to click on this controls we can use click() Method.below is the way to click on Input Button.
    WebDriver driver = new FirefoxDriver();
    driver.get("http://scriptinglogic.com/index.php/software-testing/selenium/operations-on-html-elements/");
    driver.findElement(By.id("button")).click();
  3. Button : to click on this controls we can use click() Method. below is the way to click on tag name Button.
    WebDriver driver = new FirefoxDriver();
    driver.get("http://scriptinglogic.com/index.php/software-testing/selenium/operations-on-html-elements/");
    driver.findElement(By.id("mybutton")).click();
  4. Submit Button : to click on this controls we can use click() below is the way to click on Input Button.
    WebDriver driver = new FirefoxDriver();
    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 eample.

WebDriver driver = new FirefoxDriver();
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


WebDriver driver = new FirefoxDriver();
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


WebDriver driver = new FirefoxDriver();
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

WebDriver driver = new FirefoxDriver();
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.



WebDriver driver = new FirefoxDriver();
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();