Untitled Document
Chapter - 8 - Working with Tables and Frames

Table Is very frequently used element In software web pages. Many times we need to extract our web table data to compare and verify the data as per our test case using selenium webdriver software testing tool. In this chapter we will see how to find and read the contents from table.

There are times when we need to access elements (usually texts) that are within HTML tables. However, it is very seldom for a web designer to provide an id or name attribute to a certain cell in the table. Therefore, we cannot use the usual methods such as "By.id()", "By.name()", or "By.cssSelector()". In this case, the most reliable option is to access them using the "By.xpath()" method.

Getting Table Contents Using X Path

Sample Table :

Name Age
Mangadaku 29

Now to find( get) the Name from Second row first column we will use XPath Technique . Lets see the Step By Step attributes that we need find out in a table to get the Name .

  • Step - 1 Get the Paraent Element of the Table - X Path always search the elements from its Parent element , so in Table the parent element is <table> tag.The first portion of our XPath locator should therefore start with //table. Xpath locators always start ( prefix ) with a double forward slash // then followed by child elements.
  • Step - 2 Selecting The Child Elements - The element below the table tag is <tr>. So the <table> is the parent of the <tr> tag. All child elements in XPath are placed to the right of their parent element, separated with one forward slash "/" like the code shown below.

    //table/tr

  • Step - 3 Predicates The <table>element contains two <tr> tags. We can now say that these two <tr> tags are "children" of <table>. Consequently, we can say that <table> is the parent of both the <tr> elements.

    Another thing we can conclude is that the two <tr> elements are siblings. Siblings refer to child elements having the same parent.

    To get to the <td> we wish to access (the one with the text "third cell"), we must first access the second <tr> and not the first. If we simply write "//table/tbody/tr", then we will be accessing the first <tr> tag.

    So, how do we access the second <tr> then? The answer to this is to use Predicates.

    Predicates are numbers or HTML attributes enclosed in a pair of square brackets "[ ]" that distinguish a child element from its siblings. Since the <tr> we need to access is the second one, we shall use "[2]" as the predicate.

    //table/tr[2]

    If we won't use any predicate, XPath will access the first sibling. Therefore, we can access the first <tr> using either of these XPath codes.

    //table/tr ---- This will access the First tr as no predicate was send
    //table/tr[1] ---- This will access the First tr as predicate was explicitly send

  • Step - 4 SelectingSuccessive Child Elements Using Predicates- The element below the table tag is <tr>. So the <table> is the parent of the <tr> tag. All child elements in XPath are placed to the right of their parent element, separated with one forward slash "/" like the code shown below.

    //table/tr

To check whether the web element is enabled or not use .isEnabled()

Sample Code

 package MySelenium;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class FormElements {

	public static void main(String[] args) throws InterruptedException {
		// TODO Auto-generated method stub
		
System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
WebDriver mybrowser= new ChromeDriver();


				
				mybrowser.get("http://mangadaku.com/contactus.php");
				WebElement Email = mybrowser.findElement(By.id("inputEmail3"));
				WebElement name = mybrowser.findElement(By.id("name"));
				WebElement button = mybrowser.findElement(By.id("contactbtn"));
				
				  //Verify email text box is enabled or not and then print related message.
				  if(Email.isEnabled())
				  {
				   System.out.print("\nText box Email is enabled. Take your action.");
				  }
				  else
				  {
				   System.out.print("\nText box Email is disabled. Take your action.");
				  }
				  
				  //Verify Last name text box is enabled or not and then print related message.
				  if(name.isEnabled())
				  {
				   System.out.print("\nText box name is enabled. Take your action.");
				  }
				  else
				  {
				   System.out.print("\nText box name is disabled. Take your action.");
				  }
				  
				//Verify button is enabled or not and then print related message.
				  if(button.isEnabled())
				  {
				   System.out.print("\nbutton is enabled. Take your action.");
				  }
				  else
				  {
				   System.out.print("\nbutton is disabled. Take your action.");
				  }
				  	}
}
  

Each web element has an unique id on the webpage and we can pass this id to locator class.Lets try to locate the text area of the gmail login page . Here is the sample code for it .In the Below code we are trying to locate the username text area of the Gmail Login page and then we will send the values to the text area . To locate the webelement we have used the below selenium class

To locate the web element use mybrowser.findElement(By.id(""))

Now to send the values ( Keys ) inside the text area we have to use below method

To send the keys inside text area use .sendkeys("")

Now combine the above two methods and run the below code . It will open new browser window -> Navigate to Gmail Login Page -> Then it will send the keys ( username) inside the username text area.

package MySelenium;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class GmailLogin {

	public static void main(String[] args) {
		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");
		WebDriver mybrowser= new ChromeDriver();
		
		mybrowser.get("https://www.google.com/gmail/");
		
		// maximize the window 
		
		mybrowser.manage().window().maximize();
			
		mybrowser.findElement(By.id("Email")).sendKeys("mangeshmpande1987@gmail.com");
  }
}

Sometime on Forms you will see some default texts are present Or it may happen that the form contains the old texts which we need to clear before we start enetering the new texts .To clear the text boxes we can use below class

To clear the text inside text area use .clear();

In below sample code we have send few keys inside the text area and then we have run the clear command to delete the contents from it .

  package MySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class FormElements {

	public static void main(String[] args) throws InterruptedException {
		// TODO Auto-generated method stub
		
System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
WebDriver mybrowser= new ChromeDriver();
				
				mybrowser.get("mybrowser.get("https://www.google.com/gmail/");");
				mybrowser.findElement(By.id("Email")).sendKeys("mangeshmpande1987@gmail.com");
				Thread.sleep(3000);
				mybrowser.findElement(By.id("Email")).clear();

	}

}

  
Radio Buttons are used to Toggle Between options , so we can select only one button at a time to select the button we have to use click method . Here to identify radio button we can use any find element method that we have seen in previous chapter .

To Select Radio Button use method .Click()

package MySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class MyForm {
 
	public static void main(String[] args) {
	
		// TODO Auto-generated method stub

		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
		WebDriver mybrowser= new ChromeDriver();
		mybrowser.get("http://localhost/bs-final/seleniumtestpage.php");

          mybrowser.findElement(By.id("optionsRadios1")).click(); 
         
	}

}

    

To select the check box we use the same method that we have used in Selecting Radio Button.

To Click on Check Box Use .click()

Sample Code

  package MySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class MyForm {
 
	public static void main(String[] args) {
	
		// TODO Auto-generated method stub

		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
		WebDriver mybrowser= new ChromeDriver();
		mybrowser.get("http://localhost/bs-final/seleniumtestpage.php");

         mybrowser.findElement(By.id("optionsRadios1")).click();
         mybrowser.findElement(By.id("chkbox")).click();
         
	}

}

  
1. Selecting Multiple Check Boxes ?????
2. Selecting All The Check Boxes ?????

In selenium webdriver we have below three methods of selecting Drowdown Menu contents

  • Selecting Option By Value
  • Selecting Option By Index
  • Selecting Option By text Value
In order to select a dropdown value with Selenium WebDriver you have to create a Select (in C# it’s called SelectElement) element and not use the default WebElements

To get a value from dropdown import class import org.openqa.selenium.support.ui.Select;

Steps to get the values from Dropdown

  • 1.Import Class org.openqa.selenium.support.ui.Select;
  • 2.Find The Dropdwon Webelemnet by Find element
  • 3.Create the Instance of the Select Class
  • 4.Then to Select the Drop Down element we have 3 different methods 1. text value 2. By Index 3. By Value
1. Selecting the DropDown element by its index .

To select the dropdown element by its index use - selectByIndex()

Sample Code - The highlighted code is for selecting the dropdown element.

  package MySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class MyForm {
 
	public static void main(String[] args) {
	
		// TODO Auto-generated method stub

		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
		WebDriver mybrowser= new ChromeDriver();
		mybrowser.get("http://localhost/bs-final/seleniumtestpage.php");

         
         // Selecting the values from Drop Down 
         
		 WebElement element=mybrowser.findElement(By.id("category"));
		Select se=new Select(element);
		se.selectByIndex(1);  
         
         
	}

}
2. Selecting the DropDown element by its Value.

This method is similar to finding an element by index . Instead of index we will use the value assigned to the dropdown. Just replace the below line with index method of above code .

To select the dropdown element by its value use - selectByValue()

Sample Code - The highlighted code is for selecting the dropdown element.

  package MySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class MyForm {
 
	public static void main(String[] args) {
	
		// TODO Auto-generated method stub

		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
		WebDriver mybrowser= new ChromeDriver();
		mybrowser.get("http://localhost/bs-final/seleniumtestpage.php");

         
         // Selecting the values from Drop Down 
         
		WebElement element=mybrowser.findElement(By.id("category"));
		Select se=new Select(element);	
		se.selectByValue("india");      
	}
}
3. Selecting the DropDown element by Visible Text

Here in this example we will select the Dropdown element by its actual text displayed in dropdown list . Just add the below line to above code .

To select the dropdown element by visible text use - selectByVisibleText()

Sample Code - The highlighted code is for selecting the dropdown element.

 package MySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class MyForm {
 
	public static void main(String[] args) {
	
		// TODO Auto-generated method stub

		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
		WebDriver mybrowser= new ChromeDriver();
		mybrowser.get("http://localhost/bs-final/seleniumtestpage.php");
         
         // Selecting the values from Drop Down 
         
		WebElement element=mybrowser.findElement(By.id("category"));
		Select se=new Select(element);
		se.selectByVisibleText("Japan");        
	}
}

 

Selecting Multiple Elements from DropDown

This works only when the SELECT supports multiple selections. It throws NotImplemented Error if the "SELECT" does not support multiple selections. In select it mandatory to have an attribute multiple="multiple"

Lets run the below sample code which selects the multiple options from the dropdown menu . In below sample code we have used all the three methods of selecting an option from dropdown

 package MySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class MyForm {
 
	public static void main(String[] args) {
	
		// TODO Auto-generated method stub

		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
		WebDriver mybrowser= new ChromeDriver();
		mybrowser.get("http://localhost/bs-final/seleniumtestpage.php");

         
         // Selecting the values from Drop Down 
         
		WebElement element=mybrowser.findElement(By.id("mul_select"));
		Select se=new Select(element);
	
		// Selecting Multiple elements Form Drop Down 
         
		se.selectByIndex(3);
		se.selectByValue("1");
	    se.selectByVisibleText("QA - Manual");
	}
}

Some More Options of Drop Down List

WebDriver has a class called “Select”, which provides useful methods for interacting with select options. We can perform different operations on a select dropdown and also de-select operation using the below methods.

We can also get the text of the values in the dropdown. Also can get the option which are selected by the user. To use these options, the Select Tag should have "multiple" attribute.

Lets run some sample programs using different methods of select class.

1. Print the list of all the Options available in select

To get the lsit of all the options from the select tag use below method

To get the lsit of all the options use - select.getOptions ();

Sample Code .

  package MySelenium;

import java.awt.List;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class MyForm {
 
	public static void main(String[] args) {
	
		// TODO Auto-generated method stub

		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
		WebDriver mybrowser= new ChromeDriver();
		mybrowser.get("http://localhost/bs-final/seleniumtestpage.php");

         
         // Selecting the values from Drop Down 
         
		WebElement element=mybrowser.findElement(By.id("mul_select"));
		Select se=new Select(element);		
		// Selecting Multiple elements Form Drop Down 
	    java.util.List allOptions = se.getOptions();
	    for (WebElement webElement : allOptions)
	    {
	    System.out.println(webElement.getText());
	    }
	}

}

  
2. Print the list of all the Options that are selected from the select tag

To get the lsit of all the options that are selected from the select tag , we have to use below method

To get the lsit of all the options that are selected use - select.getAllSelectedOptions();

Sample Code :

 package MySelenium;

import java.awt.List;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class MyForm {
 
	public static void main(String[] args) {
	
		// TODO Auto-generated method stub

		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
		WebDriver mybrowser= new ChromeDriver();
		mybrowser.get("http://localhost/bs-final/seleniumtestpage.php");

         
         // Selecting the values from Drop Down 
         
		WebElement element=mybrowser.findElement(By.id("mul_select"));
		Select se=new Select(element);
		//se.selectByIndex(1);
		//se.selectByValue("india");
		//se.selectByVisibleText("Japan");
		
		// Selecting Multiple elements Form Drop Down 
         
		se.selectByIndex(3);
		se.selectByValue("1");
	    se.selectByVisibleText("QA - Manual");
	    
	
	    java.util.List allSelectedOptions = se.getAllSelectedOptions();
	   
	    	for (WebElement WebElement : allSelectedOptions)
	    	{
	    	System.out.println("You have selected ::"+ WebElement.getText());
	    	}
	}

}

 
3. Get the first selected option from the select tag

To get the first options that are selected from the select tag , we have to use below method

To get the first option from the select tag use - Select.getFirstSelectedOption();

Sample Code :

package MySelenium;
import java.awt.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class MyForm {
 
	public static void main(String[] args) {
	
		// TODO Auto-generated method stub

		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
		WebDriver mybrowser= new ChromeDriver();
		mybrowser.get("http://localhost/bs-final/seleniumtestpage.php");

         
         // Selecting the values from Drop Down 
         
		WebElement element=mybrowser.findElement(By.id("mul_select"));
		Select se=new Select(element);	
		// Selecting Multiple elements Form Drop Down 
         
		se.selectByIndex(3);
		se.selectByValue("1");
	    se.selectByVisibleText("QA - Manual")
	    WebElement firstOption = se.getFirstSelectedOption();
	    System.out.println("The First selected option is::" +firstOption.getText());
	}
}
4. To check whether the Select element supports selecting multiple options

To check whether the Select element supports selecting multiple options. This will be done by checking the value of the "multiple" attributes in Select tag.

To check whether the Select element supports selecting multiple options use - select.isMultiple ();

Sample Code :

 package MySelenium;

import java.awt.List;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class MyForm {
 
	public static void main(String[] args) {
	
		// TODO Auto-generated method stub

	System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
		WebDriver mybrowser= new ChromeDriver();
		mybrowser.get("http://localhost/bs-final/seleniumtestpage.php");
  
         // Selecting the values from Drop Down 
         
		WebElement element=mybrowser.findElement(By.id("mul_select"));
		Select se=new Select(element);
	    
	    if(se.isMultiple())
	    {
	    System.out.println("Select tag allows multiple selection");	
	    }
	    else
	    {
	    System.out.println("Select does not allow multiple selections");
	    }
	}
}
 
5. To deselect all the selected elements from dropdown

deselectAll() method is useful to remove selection from all selected options of select box. It will works with multiple select box when you need to remove all selections. Syntax for deselectAll() method is as bellow.

To deslect all the elements from the select tag use - Select.deselectAll();

Sample Code :

 package MySelenium;

import java.awt.List;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;

public class MyForm {
 
	public static void main(String[] args) throws InterruptedException {
	
		// TODO Auto-generated method stub

		System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
		WebDriver mybrowser= new ChromeDriver();
		mybrowser.get("http://localhost/bs-final/seleniumtestpage.php");

         
         // Selecting the values from Drop Down 
         
		WebElement element=mybrowser.findElement(By.id("mul_select"));
		Select se=new Select(element);
	
		// Selecting Multiple elements Form Drop Down 
         
		se.selectByIndex(3);
		se.selectByValue("1");
	    se.selectByVisibleText("QA - Manual");
	    
	    Thread.sleep(1000);
	    se.deselectAll();
	}
}
 

To Submit a form we have two methods as mentioned below , lets see the usage of both these mthods

  • .click() method
  • .submit() method
  • 1. If any form has submit button which has type = "button" then .submit() method will not work.
  • 2. If button Is not Inside <form> tag then .submit() method will not work.
1. Submit a form using .click() method

You can use .click() method to click on any button of software web application. Means element's type = "button" or type = "submit", .click() method will works for both.

sample Code

  package MySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class FormElements {

	public static void main(String[] args) throws InterruptedException {
		// TODO Auto-generated method stub
		
System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
WebDriver mybrowser= new ChromeDriver();
	
				mybrowser.get("http://mangadaku.com/contactus.php");
				WebElement Email = mybrowser.findElement(By.id("inputEmail3"));
				WebElement name = mybrowser.findElement(By.id("name"));
				WebElement button = mybrowser.findElement(By.id("contactbtn"));
				
				  //Verify email text box is enabled or not and then print related message.
				  if(Email.isEnabled())
				  {
				   System.out.print("\nText box Email is enabled. Take your action.");
				  }
				  else
				  {
				   System.out.print("\nText box Email is disabled. Take your action.");
				  }
				  
				  //Verify Last name text box is enabled or not and then print related message.
				  if(name.isEnabled())
				  {
				   System.out.print("\nText box name is enabled. Take your action.");
				  }
				  else
				  {
				   System.out.print("\nText box name is disabled. Take your action.");
				  }
				  
				//Verify button is enabled or not and then print related message.
				  if(button.isEnabled())
				  {
				   System.out.print("\nbutton is enabled. Take your action.");
				  }
				  else
				  {
				   System.out.print("\nbutton is disabled. Take your action.");
				  }
				  
				mybrowser.findElement(By.id("inputEmail3")).sendKeys("mangeshmpande1987@gmail.com");
				Thread.sleep(1000);
				mybrowser.findElement(By.id("name")).sendKeys("mangesh pande");
				mybrowser.findElement(By.id("comments")).sendKeys("Hello Mangadaku , Nice Website");
                mybrowser.findElement(By.id("contactbtn")).click();
	}
}
  
2. Submit a form using .submit() method

You will always see that a submit button in a form will always have input_type as "submit". In this case, .submit() method Is very good alternative of .click() method.

sample Code

  package MySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class FormElements {

	public static void main(String[] args) throws InterruptedException {
		// TODO Auto-generated method stub
		
System.setProperty("webdriver.chrome.driver", "C:\\Users\\lenovo\\workspace\\LearnJava\\Library\\chromedriver.exe");		
WebDriver mybrowser= new ChromeDriver();
	
				mybrowser.get("http://mangadaku.com/contactus.php");
				WebElement Email = mybrowser.findElement(By.id("inputEmail3"));
				WebElement name = mybrowser.findElement(By.id("name"));
				WebElement button = mybrowser.findElement(By.id("contactbtn"));
				
				  //Verify email text box is enabled or not and then print related message.
				  if(Email.isEnabled())
				  {
				   System.out.print("\nText box Email is enabled. Take your action.");
				  }
				  else
				  {
				   System.out.print("\nText box Email is disabled. Take your action.");
				  }
				  
				  //Verify Last name text box is enabled or not and then print related message.
				  if(name.isEnabled())
				  {
				   System.out.print("\nText box name is enabled. Take your action.");
				  }
				  else
				  {
				   System.out.print("\nText box name is disabled. Take your action.");
				  }
				  
				//Verify button is enabled or not and then print related message.
				  if(button.isEnabled())
				  {
				   System.out.print("\nbutton is enabled. Take your action.");
				  }
				  else
				  {
				   System.out.print("\nbutton is disabled. Take your action.");
				  }
				  
				mybrowser.findElement(By.id("inputEmail3")).sendKeys("mangeshmpande1987@gmail.com");
				Thread.sleep(1000);
				mybrowser.findElement(By.id("name")).sendKeys("mangesh pande");
				mybrowser.findElement(By.id("comments")).sendKeys("Hello Mangadaku , Nice Website");
                mybrowser.findElement(By.id("contactbtn")).submit();
	}
}
  

Untitled Document