如何在Selenium WebDriver中选择日期选择器

时间:2014-01-29 05:06:41

标签: java jquery selenium selenium-webdriver

目前正在使用 Selenium WebDriver 并使用 Java 。我想从下拉列表中选择date range中的值。我想知道如何在日期选择器下拉列表中选择值Date, Month and year

以下是HTML标记:

<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">  

enter image description here

我试过以下示例代码:

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);

8 个答案:

答案 0 :(得分:12)

DatePicker不是Select元素。你在代码中所做的是错误的。

Datepicker实际上是一组包含行和列的表。要选择一个日期,您只需导航到我们所需日期所在的单元格。

所以你的代码应该是这样的:

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;
 }

答案 1 :(得分:5)

你不能试试这个,看看它是否适合你。

您可以使用javascript&amp; amp;来启用日期框,而不是从日期选择器中选择日期。输入所需的日期,这将避免遍历所有日期元素所需的过多时间,直到达到您需要选择的日期元素为止。

代码 从日期开始

((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

代码 迄今

((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

答案 2 :(得分:2)

我认为这可以用更简单的方式完成:

  1. 找到月份的定位器(使用Firebug / Firepath)
  2. 这可能是一个Select元素,使用Selenium选择Month
  3. 为年份做同样的事情
  4. 点击链接文字“31”或您要点击的任何日期
  5. 所以代码看起来像这样:

    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"));
    

    如果日期选择器下拉列表不是Select,这将不起作用,但我见过的大多数是单个元素(选择,链接等)

答案 3 :(得分:2)

您可以直接使用以下javascript

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

答案 4 :(得分:1)

尝试SendKeys而不是选择日期

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

如果不起作用,请尝试发送原生标签&#39;

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

答案 5 :(得分:0)

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;
}

答案 6 :(得分:0)

不要注入javascript。这是一种不好的做法。

我会将DatePicker建模为像textbox / select这样的元素,如下所示。

详细解答 - 请点击此处 - 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();
    }

}

答案 7 :(得分:0)

在Java 8中,您可以使用这种简单的方法从日期选择器中选择随机日期

List<WebElement> datePickerDays = driver.findElements(By.tagName("td"));
datePickerDays.stream().filter(e->e.getText().equals(whichDateYouWantToClick)).findFirst().get().click();