วิธีเลือกวันที่จาก DatePicker/Calendar ใน Selenium ไดรเวอร์เว็บ

วิธีจัดการปฏิทินใน Selenium

สำหรับการเลือก DateTime HTML5 มีการควบคุมใหม่ที่แสดงด้านล่าง

สามารถเข้าถึงหน้าด้านบนได้ที่นี่: https://demo.guru99.com/test/

หากเราเห็น DOM ของตัวควบคุม DateTime Picker จะมีช่องป้อนข้อมูลสำหรับทั้งวันที่และเวลาเพียงช่องเดียว

ดังนั้นเพื่อจัดการกับการควบคุมประเภทนี้ ก่อนอื่น เราจะกรอกวันที่โดยไม่คั่นด้วยตัวคั่น เช่น ถ้าวันที่คือ 09/25/2013 จากนั้นเราจะส่ง 09252013 ไปยังช่องป้อนข้อมูล เมื่อเสร็จแล้ว เราจะเปลี่ยนโฟกัสจากวันที่เป็นเวลาโดยกด 'tab' และกรอกเวลา

หากเราต้องการกรอกเวลา 02:45 น. เราจะส่ง '0245PM' ไปที่ช่องป้อนข้อมูลเดียวกัน

รหัสสำหรับ datepicker มีลักษณะดังนี้ –

import java.util.List;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;

import org.openqa.selenium.Keys;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;

import org.testng.annotations.Test;

public class DateTimePicker {

    @Test

    public void dateTimePicker(){

        System.setProperty("webdriver.chrome.driver", "chromedriver.exe");

        WebDriver driver = new ChromeDriver();

        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

        driver.get("https://demo.guru99.com/test/");

        //Find the date time picker control

        WebElement dateBox = driver.findElement(By.xpath("//form//input[@name='bdaytime']"));

        //Fill date as mm/dd/yyyy as 09/25/2013

        dateBox.sendKeys("09252013");

        //Press tab to shift focus to time field

        dateBox.sendKeys(Keys.TAB);

        //Fill time as 02:45 PM

        dateBox.sendKeys("0245PM");

    }

    }

ผลลัพธ์จะเป็นเช่น-

ลองดูตัวอย่างปฏิทินอื่น เราจะใช้การควบคุม Telerik DateTimePicker สามารถเข้าถึงได้ Good Farm Animal Welfare Awards

ตรงนี้ถ้าเราจำเป็นต้องเปลี่ยนเดือน เราต้องคลิกตรงกลางส่วนหัวของปฏิทิน

ในทำนองเดียวกัน หากเราต้องเปลี่ยนปี เราก็สามารถทำได้โดยคลิกลิงก์ถัดไปหรือก่อนหน้าบน datepicker

และสุดท้ายสำหรับการเปลี่ยนเวลา เราสามารถเลือกเวลาที่ถูกต้องจากเมนูแบบเลื่อนลงได้ (หมายเหตุ: เวลานี้เลือกไว้ในช่องว่าง 30 นาที เช่น 12:00, 12:30 , 1:00, 1:30 เป็นต้น)

ตัวอย่างที่สมบูรณ์ดูเหมือนว่า-

import java.util.Calendar;

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.Test;

public class DatePicker {

    @Test

    public void testDAtePicker() throws Exception{

        //DAte and Time to be set in textbox

        String dateTime ="12/07/2014 2:00 PM";

        WebDriver driver = new FirefoxDriver();

        driver.manage().window().maximize();
        
        driver.get("https://demos.telerik.com/kendo-ui/datetimepicker/index");
        
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        
        //button to open calendar

        WebElement selectDate = driver.findElement(By.xpath("//span[@aria-controls='datetimepicker_dateview']"));
        
    selectDate.click();

    //button to move next in calendar

    WebElement nextLink = driver.findElement(By.xpath("//div[@id='datetimepicker_dateview']//div[@class='k-header']//a[contains(@class,'k-nav-next')]"));

    //button to click in center of calendar header

    WebElement midLink = driver.findElement(By.xpath("//div[@id='datetimepicker_dateview']//div[@class='k-header']//a[contains(@class,'k-nav-fast')]"));

    //button to move previous month in calendar

    WebElement previousLink = driver.findElement(By.xpath("//div[@id='datetimepicker_dateview']//div[@class='k-header']//a[contains(@class,'k-nav-prev')]")); 

        //Split the date time to get only the date part

        String date_dd_MM_yyyy[] = (dateTime.split(" ")[0]).split("/");

        //get the year difference between current year and year to set in calander

        int yearDiff = Integer.parseInt(date_dd_MM_yyyy[2])- Calendar.getInstance().get(Calendar.YEAR);

        midLink.click();

        if(yearDiff!=0){

            //if you have to move next year

            if(yearDiff>0){

                for(int i=0;i< yearDiff;i++){

                    System.out.println("Year Diff->"+i);

                    nextLink.click();

                }

            }

            //if you have to move previous year

            else if(yearDiff<0){

                for(int i=0;i< (yearDiff*(-1));i++){

                    System.out.println("Year Diff->"+i);

                    previousLink.click();

                }

            }

        }
        
        Thread.sleep(1000);

        //Get all months from calendar to select correct one

        List<WebElement> list_AllMonthToBook = driver.findElements(By.xpath("//div[@id='datetimepicker_dateview']//table//tbody//td[not(contains(@class,'k-other-month'))]"));
        
        list_AllMonthToBook.get(Integer.parseInt(date_dd_MM_yyyy[1])-1).click();
        
        Thread.sleep(1000);

        //get all dates from calendar to select correct one

        List<WebElement> list_AllDateToBook = driver.findElements(By.xpath("//div[@id='datetimepicker_dateview']//table//tbody//td[not(contains(@class,'k-other-month'))]"));
        
        list_AllDateToBook.get(Integer.parseInt(date_dd_MM_yyyy[0])-1).click();
        
        ///FOR TIME

        WebElement selectTime = driver.findElement(By.xpath("//span[@aria-controls='datetimepicker_timeview']"));

        //click time picker button

        selectTime.click();

        //get list of times

        List<WebElement> allTime = driver.findElements(By.xpath("//div[@data-role='popup'][contains(@style,'display: block')]//ul//li[@role='option']"));
      
        dateTime = dateTime.split(" ")[1]+" "+dateTime.split(" ")[2];

     //select correct time

        for (WebElement webElement : allTime) {

            if(webElement.getText().equalsIgnoreCase(dateTime))

            {

                webElement.click();

            }

        }

    }

}

เอาท์พุตก็จะประมาณนี้