How to choose a date picker in Selenium WebDriver

Question

Currently working on Selenium WebDriver and uses Java . I want to select the values ​​in the date range from the drop-down list. I want to know how I can select values ​​like Date, Month and year from the date drop-down list.

Here is the HTML tag:

 <dd id="date-element"> <input id="fromDate" class="hasDatepicker" type="text" style="width:57px; padding:3px 1px; font-size:11px;" readonly="readonly" name="fromDate" value="01 Jan 2013"> <input id="toDate" class="hasDatepicker" type="text" style="width:57px; padding:3px 1px; font-size:11px;" readonly="readonly" name="toDate" value="31 Dec 2013"> 

Below is an example of the code I tried:

 Log.info("Clicking on From daterange dropdown"); JavascriptExecutor executor8 = (JavascriptExecutor)driver; executor8.executeScript("document.getElementById('fromDate').style.display='block';"); Select select8 = new Select(driver.findElement(By.id("fromDate"))); select8.selectByVisibleText("10 Jan 2013"); Thread.sleep(3000); Log.info("Clicking on To daterange dropdown"); JavascriptExecutor executor10 = (JavascriptExecutor)driver; executor10.executeScript("document.getElementById('toDate').style.display='block';"); Select select10 = new Select(driver.findElement(By.id("toDate"))); select10.selectByVisibleText("31 Dec 2013"); Thread.sleep(3000); 

Answer 1

DatePicker is not a Select element. What are you doing wrong in your code.

Datepicker is actually a table with a set of rows and columns. To select a date, you just need to go to the cell where our desired date is present.

So your code should look like this:

 WebElement dateWidget = driver.findElement(your locator); 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; } 

Answer 2

You cannot try it, see if it works for you.

Instead of choosing a date from a date set, you can include the date field using javascript and enter the required date, this will avoid the excessive time required to go through all the date elements until you reach the one you need to select .

Code for from date

 ((JavascriptExecutor)driver).executeScript ("document.getElementById('fromDate').removeAttribute('readonly',0);"); // Enables the from date box WebElement fromDateBox= driver.findElement(By.id("fromDate")); fromDateBox.clear(); fromDateBox.sendKeys("8-Dec-2014"); //Enter date in required format 

Code for today

 ((JavascriptExecutor)driver).executeScript ("document.getElementById('toDate').removeAttribute('readonly',0);"); // Enables the from date box WebElement toDateBox= driver.findElement(By.id("toDate")); toDateBox.clear(); toDateBox.sendKeys("15-Dec-2014"); //Enter date in required format 

Answer 3

I think this can be done much easier:

• Find the locator for a month (use Firebug / Firepath)
• This is probably a Select element, use Selenium to select Month
• Do the same for Year
• Click the link "31" or any date you want to click

Thus, the code will look something like this:

 WebElement month = driver.findElement(month combo locator); Select monthCombo = new Select(month); monthCombo.selectByVisibleText("March"); WebElement year = driver.findElement(year combo locator); Select yearCombo = new Select(year); yearCombo.selectByVisibleText("2015"); driver.click(By.linkText("31")); 

This will not work if the date picker drop-down lists are not selected, but most of them I saw as separate elements (select, links, etc.)

Answer 4

try sendkeys instead of picking a date

 driver.FindElement(yourBy).SendKeys(yourDateTime.ToString("ddd, dd.MM.yyyy",CultureInfo.CreateSpecificCulture("en-US"))); 

If this does not work, try sending your own tab

 element.SendKeys(OpenQA.Selenium.Keys.Tab); 

Answer 5

 public String datePicker(String object,String data){ APP_LOGS.debug("selecting date"); try{ WebElement dateWidget = driver.findElement(By.xpath(OR.getProperty(object))); List<WebElement> rows = dateWidget.findElements(By.tagName("tr")); List<WebElement> columns = dateWidget.findElements(By.tagName("td")); for (WebElement cell: columns){ if (cell.getText().equals(data)){ cell.findElement(By.linkText(data)).click(); break; } } }catch(Exception e){ return Constants.KEYWORD_FAIL+" -- Not able to select the date"+e.getMessage(); } return Constants.KEYWORD_PASS; } 

Answer 6

You can directly use the following javascript

 ((JavascriptExecutor)driver).executeScript("document.getElementById('fromDate').setAttribute('value','10 Jan 2013')") 

Answer 7

Do not enter javascript. This is bad practice.

I would simulate a DatePicker as an element, like textbox / select, as shown below.

Detailed answer - check here http://www.testautomationguru.com/selenium-webdriver-automating-custom-controls-datepicker/

 public class DatePicker { private static final String dateFormat = "dd MMM yyyy"; @FindBy(css = "a.ui-datepicker-prev") private WebElement prev; @FindBy(css = "a.ui-datepicker-next") private WebElement next; @FindBy(css = "div.ui-datepicker-title") private WebElement curDate; @FindBy(css = "a.ui-state-default") private List < WebElement > dates; public void setDate(String date) { long diff = this.getDateDifferenceInMonths(date); int day = this.getDay(date); WebElement arrow = diff >= 0 ? next : prev; diff = Math.abs(diff); //click the arrows for (int i = 0; i < diff; i++) arrow.click(); //select the date dates.stream() .filter(ele - > Integer.parseInt(ele.getText()) == day) .findFirst() .ifPresent(ele - > ele.click()); } private int getDay(String date) { DateTimeFormatter dtf = DateTimeFormatter.ofPattern(dateFormat); LocalDate dpToDate = LocalDate.parse(date, dtf); return dpToDate.getDayOfMonth(); } private long getDateDifferenceInMonths(String date) { DateTimeFormatter dtf = DateTimeFormatter.ofPattern(dateFormat); LocalDate dpCurDate = LocalDate.parse("01 " + this.getCurrentMonthFromDatePicker(), dtf); LocalDate dpToDate = LocalDate.parse(date, dtf); return YearMonth.from(dpCurDate).until(dpToDate, ChronoUnit.MONTHS); } private String getCurrentMonthFromDatePicker() { return this.curDate.getText(); } }