My Thoughts: Selecting a date from Datepicker using Selenium WebDriver

Tuesday, April 9

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.
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 rows=dateWidget.findElements(By.tagName("tr"));
  List 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;
   }
  } 
 }
}


22 comments:

  1. Hi,
    I am getting error at " " can u send full code @ srinivas30k@gmail.com

    ReplyDelete
  2. Remove the below lines at the end of code . They are just typo.

    ReplyDelete
  3. Hi vamshi ,


    i am not able to select the date from the date picker , i tested this in firefox, i guess the problems is in the forloop, could you please have a look at it.
    Thanks

    ReplyDelete
  4. Hi jack,


    Now I have added wait after we click on "date picker edit box" . Now it is working fine. For loop code is fine.


    Run the code and if it still fails please send your error console details.

    ReplyDelete
  5. Hi Vamshi ,is there a possible way to set the download path in chrome as i am automating a test case in which i have to download a file and then open it to verify it's contents.

    ReplyDelete
  6. Amit,

    I couldn't find a way to do it programmatically. But manually if you set the download path in your default browser(one time) then the same will be carried forward to the browser that is going to be invoked by webdriver. So it will still works.

    ReplyDelete
  7. Hi Vamshi, i found a way to download the file to local directory and then view it on browser programmatically (applicable for notepad,html file and images,not for secure pdf and doc),can i post it in your site or do i send it to u ,others might get help from it. and thanks for the reply.

    ReplyDelete
  8. Thanks Amit. Can you post it here :)

    ReplyDelete
  9. Hope it Helps :)

    ReplyDelete
  10. Hi,

    The one which i am working is not an text box, its read only box, how do i automate?



    Thanks in advance.

    ReplyDelete
  11. Even iQuery has readonly text box here.
    http://jqueryui.com/datepicker/



    I hope above example code works for you .

    ReplyDelete
  12. Hi Vamshi
    The datepicker is displayed, but not selecting the date, i.e not entering the for loop.


    Thanks
    Babu

    ReplyDelete
  13. Can you send the console error message you are getting please ?

    I tried and code is working fine for me.

    One small note :

    List rows=dateWidget.findElements(By.tagName("tr"));
    List columns=dateWidget.findElements(By.tagName("td"));

    should be

    List rows=dateWidget.findElements(By.tagName("tr"));
    List columns=dateWidget.findElements(By.tagName("td"));

    I tried to change but the changes are not getting saved :)

    ReplyDelete
  14. Nice article...very useful

    ReplyDelete
  15. Hi Friends
    This code works
    Try following Link
    http://bugreaper.blogspot.in/2013/09/selecting-date-from-calendarswebdriver.html

    If u like the post pls comment and Join the site

    ReplyDelete
  16. very nice article...
    can u tell me about Selecting a date from Bootstrap Datepicker in asp.net using Selenium WebDriver ???
    I am struggling over this over from a week plz five solution
    Thanks in advance...

    ReplyDelete
  17. Hi Sunil,

    You can the date using java script. Here is the sample script:

    driver.get("http://dl.dropboxusercontent.com/u/143355/datepicker/datepicker.html");
    driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
    //Set the start date to "01/30/2013" using javascript
    JavascriptExecutor js = (JavascriptExecutor) driver;
    js.executeScript("document.getElementsByClassName('small')[0].setAttribute('value', '01/30/2013')");

    ReplyDelete
  18. Code runs Perfect...! but not able to understand y u close web element tag ...?

    ReplyDelete
  19. "rows" element is not required here.

    "" is also not required.I am using little buggy plugin :)
    I am trying to delete it but couldn't , it is keep getting appended.

    ReplyDelete
  20. And y u close web element tag ...?

    ReplyDelete


  21. Above statement is added by the plugin. I didnot add it. I tried to delete it but couldnot.

    ReplyDelete