Selecting a date from Datepicker using Selenium WebDriver
Calendars look pretty and of course they are fancy too.So now a days most of the websites are using advanced jQuery Datepickers instead of displaying individual dropdowns for month,day,year. :P
Datepicker
If we look at the Datepicker, it is just a like a table with set of rows and columns.To select a date ,we just have to navigate to the cell where our desired date is present.
Here is a sample code on how to pick a 13th date from the next month.
view plainprint?
import java.util.List;
import java.util.List;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;;
public class DatePicker {
WebDriver driver;
@BeforeTest
public void start(){
System.setProperty("webdriver.firefox.bin", "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe");
driver = new FirefoxDriver();
}
@Test
public void Test(){
driver.get("http://jqueryui.com/datepicker/");
driver.switchTo().frame(0);
driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
//Click on textbox so that datepicker will come
driver.findElement(By.id("datepicker")).click();
driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
//Click on next so that we will be in next month
driver.findElement(By.xpath(".//*[@id='ui-datepicker-div']/div/a[2]/span")).click();
/*DatePicker is a table.So navigate to each cell
* If a particular cell matches value 13 then select it
*/
WebElement dateWidget = driver.findElement(By.id("ui-datepicker-div"));
List<webelement> rows=dateWidget.findElements(By.tagName("tr"));
List<webelement> columns=dateWidget.findElements(By.tagName("td"));
for (WebElement cell: columns){
//Select 13th Date
if (cell.getText().equals("13")){
cell.findElement(By.linkText("13")).click();
break;
}
}
}
}</webelement></webelement>
Calendars look pretty and of course they are fancy too.So now a days most of the websites are using advanced jQuery Datepickers instead of displaying individual dropdowns for month,day,year. :P
Datepicker
If we look at the Datepicker, it is just a like a table with set of rows and columns.To select a date ,we just have to navigate to the cell where our desired date is present.
Here is a sample code on how to pick a 13th date from the next month.
view plainprint?
import java.util.List;
import java.util.List;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;;
public class DatePicker {
WebDriver driver;
@BeforeTest
public void start(){
System.setProperty("webdriver.firefox.bin", "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe");
driver = new FirefoxDriver();
}
@Test
public void Test(){
driver.get("http://jqueryui.com/datepicker/");
driver.switchTo().frame(0);
driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
//Click on textbox so that datepicker will come
driver.findElement(By.id("datepicker")).click();
driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
//Click on next so that we will be in next month
driver.findElement(By.xpath(".//*[@id='ui-datepicker-div']/div/a[2]/span")).click();
/*DatePicker is a table.So navigate to each cell
* If a particular cell matches value 13 then select it
*/
WebElement dateWidget = driver.findElement(By.id("ui-datepicker-div"));
List<webelement> rows=dateWidget.findElements(By.tagName("tr"));
List<webelement> columns=dateWidget.findElements(By.tagName("td"));
for (WebElement cell: columns){
//Select 13th Date
if (cell.getText().equals("13")){
cell.findElement(By.linkText("13")).click();
break;
}
}
}
}</webelement></webelement>
0 Comments