How to select today from html date picker instead of just putting the date there using selenuim and testng for a maven project

Question

I can not click the today button in calender. here is an example in this website https://www.wufoo.com/html5/date-type/. <input type="date"> this is the html for date i am talking about. how to select and click today button in this.

.

I could send the date value in the date input field. But I am expecting to click the today button instead of sending the date as input

Here is the pom.xml file

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.example</groupId>
  <artifactId>delete_it</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>delete_it</name>
  <url>http://maven.apache.org</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>

  <dependencies>
    <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
    <dependency>
      <groupId>org.seleniumhq.selenium</groupId>
      <artifactId>selenium-java</artifactId>
      <version>3.141.59</version>
    </dependency>

    <dependency>
      <groupId>com.google.guava</groupId>
      <artifactId>guava</artifactId>
      <version>31.0.1-jre</version>
    </dependency>

    <dependency>
      <groupId>org.testng</groupId>
      <artifactId>testng</artifactId>
      <version>6.9.8</version>
      <scope>test</scope>
    </dependency>
    <!-- https://mvnrepository.com/artifact/io.github.bonigarcia/webdrivermanager -->
    <dependency>
      <groupId>io.github.bonigarcia</groupId>
      <artifactId>webdrivermanager</artifactId>
      <version>5.3.0</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.slf4j/slf4j-api -->
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-api</artifactId>
      <version>1.7.36</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple -->
    <dependency>
      <groupId>com.googlecode.json-simple</groupId>
      <artifactId>json-simple</artifactId>
      <version>1.1.1</version>
    </dependency>

    <dependency>
      <groupId>org.seleniumhq.selenium</groupId>
      <artifactId>selenium-firefox-driver</artifactId>
      <version>4.1.1</version>
    </dependency>




  </dependencies>
  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <configuration>
          <source>1.8</source>
          <target>1.8</target>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

This is the test file

package org.example;

import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

import java.time.LocalDate;

public class AppTest
{
    public static WebDriver driver;
    public LocalDate today = LocalDate.now();

    @Test
    public void wow() throws InterruptedException {
        WebDriverManager.chromedriver().setup();
        driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.get("https://www.wufoo.com/html5/date-type/");
        Thread.sleep(0500);
        driver.findElement(By.xpath("//*[@id=\"main\"]/section[1]/div/p[3]/input")).click(); // want to click the calender button. but it is clicking the text input field
    }


}

Answer 1

Here I have found this way of doing the task. Instead of sending the date as string, we can simply use the arrow keys of the keyboard to update the date and time. Here the commented part is for the time(with AM PM).

    public static void DatenTimeSet(String xpath) throws InterruptedException {
        // Get current date and time
        LocalDateTime currentDateTime = LocalDateTime.now();
        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("MM-dd-yyyy hh:mm a");
        String formattedDateTime = currentDateTime.format(formatter);
        System.out.println(formattedDateTime);

        // Click on the input field to focus on it
        WebElement dateTimeInput = driver.findElement(By.xpath(xpath));
        dateTimeInput.click();
        Actions actions = new Actions(driver);
        for (int i = 0; i < 6; i++) {
            actions.sendKeys(Keys.ARROW_LEFT).build().perform();
        }

        // Split the formatted date-time into parts
        String[] parts = formattedDateTime.split(" ");
        String datePart = parts[0]; // Date part
        String timePart = parts[1]; // Time part
        String amPmPart = parts[2]; // AM/PM part

        // Split the date part into year, month, and day
        String[] dateParts = datePart.split("-");
        int desiredMonth = Integer.parseInt(dateParts[0]);
        int desiredDay = Integer.parseInt(dateParts[1]);
        int desiredYear = Integer.parseInt(dateParts[2]);

        // Split the time part into hour and minute
        String[] timeParts = timePart.split(":");
        int desiredHour = Integer.parseInt(timeParts[0]);
        int desiredMinute = Integer.parseInt(timeParts[1]);


        // Navigate to the desired month

        actions.sendKeys(Keys.BACK_SPACE).build().perform();
        for (int currentMonth = 00; currentMonth != desiredMonth; currentMonth ++) {
            if (currentMonth < desiredMonth) {
                actions.sendKeys(Keys.ARROW_UP).build().perform();
            } else {
                actions.sendKeys(Keys.ARROW_DOWN).build().perform();
            }
        }
        actions.sendKeys(Keys.ARROW_RIGHT).build().perform();

        // Navigate to the desired day
        actions.sendKeys(Keys.BACK_SPACE).build().perform();
        for (int currentDay = 00; currentDay != desiredDay; currentDay ++) {
            if (currentDay > desiredDay) {
                actions.sendKeys(Keys.ARROW_DOWN).build().perform();
            } else {
                actions.sendKeys(Keys.ARROW_UP).build().perform();
            }
        }
        actions.sendKeys(Keys.ARROW_RIGHT).build().perform();

        
        // Navigate to the desired year
        actions.sendKeys(Keys.ARROW_UP).build().perform();
        actions.sendKeys(Keys.ARROW_RIGHT).build().perform();

//        // Navigate to the desired hour
//        actions.sendKeys(Keys.BACK_SPACE).build().perform();
//        for (int currentHour = 00; currentHour != desiredHour; currentHour ++) {
//            if (currentHour > desiredHour) {
//                actions.sendKeys(Keys.ARROW_DOWN).build().perform();
//            } else {
//                actions.sendKeys(Keys.ARROW_UP).build().perform();
//            }
//        }
//        actions.sendKeys(Keys.ARROW_RIGHT).build().perform();
//
//        // Navigate to the desired minute
//        actions.sendKeys(Keys.BACK_SPACE).build().perform();
//        for (int currentMinute = 00; currentMinute != desiredMinute; currentMinute ++) {
//            if (currentMinute > desiredMinute) {
//                actions.sendKeys(Keys.ARROW_DOWN).build().perform();
//            } else {
//                actions.sendKeys(Keys.ARROW_UP).build().perform();
//            }
//        }
//        actions.sendKeys(Keys.ARROW_RIGHT).build().perform();
//
//        // Toggle AM/PM if needed
//        actions.sendKeys(Keys.BACK_SPACE).build().perform();
//        if (Objects.equals(amPmPart, "PM")) {
//            actions.sendKeys(Keys.ARROW_DOWN).build().perform();
//        } else {
//            actions.sendKeys(Keys.ARROW_UP).build().perform();
//        }
    }

Answer 2

Refer the below working code with explanation:

public static void main(String[] args) {
    // TODO Auto-generated method stub
    WebDriver driver = new ChromeDriver();
    driver.manage().window().maximize();
    driver.get("https://www.wufoo.com/html5/date-type/");
    WebDriverWait wait = new WebDriverWait(driver,Duration.ofSeconds(30));
    // below line will accept cookies
    wait.until(ExpectedConditions.elementToBeClickable(By.id("onetrust-accept-btn-handler"))).click();
        
    // below 2 lines will get the next Monday in dd/MM/yyyy format
    DateTimeFormatter dtf = DateTimeFormatter.ofPattern("dd/MM/yyyy");  
    LocalDateTime now = LocalDateTime.now();
    String nextMonday = Objects.toString(dtf.format(now.with(TemporalAdjusters.nextOrSame(DayOfWeek.MONDAY))));
        
    // below line will send next Monday's date to date picker input text box
    wait.until(ExpectedConditions.elementToBeClickable(By.name("date"))).sendKeys(nextMonday);
}

Required imports:

import java.time.DayOfWeek;
import java.time.Duration;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
import java.time.temporal.TemporalAdjusters;
import java.util.Objects;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

Result:

Answer 3

It's not easy to do, as far as opened calendar is actually not DOM element. So 'user behaviour' as native click you can only simulate as clicking by coordinates (which I suggest you not to do).

However. you can pass date in input itself via sendKeys, that would be easiest solution in your case.

WebElement dateElement = wdwait.until(ExpectedConditions.visibilityOfElementLocated(new By.ByCssSelector("[type=date]")));
LocalDate currentDate = LocalDate.now();
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("ddMMyyyy");
dateElement.sendKeys(currentDate.format(formatter));