Handle Bootstrap Date-picker in Selenium

Below are the two programs given to handle date picker in selenium.

1. Using loop:
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Test;

public class HandleDatePciker {
 WebDriver driver;

 @BeforeMethod
 public void setup() {
  System.setProperty("webdriver.chrome.driver",
    "C:\\Users\\Hitendra\\Downloads\\chromedriver_win32 (1)\\chromedriver.exe");
  driver = new ChromeDriver();
  driver.manage().window().maximize();
  driver.get("https://www.seleniumeasy.com/test/bootstrap-date-picker-demo.html");
 }

 @Test
 public void datePicker() {

  String month = "May 2019";
  String day = "13";

  driver.findElement(By.xpath("//*[@id=\"sandbox-container1\"]//input")).click();

  while (true) {

   String textString = driver.findElement(By.xpath("/html/body/div[3]/div[1]/table/thead/tr[2]/th[2]"))
     .getText();

   if (textString.equals(month)) {
    break;
   } else {
    driver.findElement(By.xpath("/html/body/div[3]/div[1]/table/thead/tr[2]/th[1]")).click();
   }
  }
  driver.findElement(By.xpath("//table/tbody/tr/td[contains(text()," + day + ")]")).click();
 }
}

2. Using JavaScript:
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Test;

public class DatePickerByJS {
 WebDriver driver;
 
 @BeforeMethod
 public void setup() {
  System.setProperty("webdriver.chrome.driver",
    "C:\\Users\\Hitendra\\Downloads\\chromedriver_win32 (1)\\chromedriver.exe");
  driver = new ChromeDriver();
  driver.manage().window().maximize();
  driver.get("https://www.seleniumeasy.com/test/bootstrap-date-picker-demo.html");
 }
 
 @Test
 public void datePcikerTestbyJS() {
  WebElement element=driver.findElement(By.xpath("//*[@id=\"sandbox-container1\"]//input"));
  String dateString="04/08/1996";
  datePcikerByJS(driver, dateString, element);
 }
 
 public void datePcikerByJS(WebDriver driver, String date,WebElement element) {
  JavascriptExecutor js=(JavascriptExecutor) driver;
  js.executeScript("arguments[0].setAttribute('value','"+date+"')", element);
 }

}

Please refer below YouTube video :

2 comments:

  1. Handling Bootstrap date pickers in Selenium is a useful automation skill because date fields often require navigating between months and selecting a specific day. The article demonstrates two approaches: using a loop to navigate through the calendar until the required month appears, and using JavaScript to interact with the date picker. Both techniques highlight the importance of choosing reliable element locators and controlling dynamic web elements during automated testing.

    For testers working with JavaScript-based web applications, understanding browser interactions and DOM manipulation can make date-picker automation easier to troubleshoot. Exploring Corporate Javascript Training can help development teams strengthen their JavaScript knowledge and better understand the behaviour of interactive web components.

    ReplyDelete
  2. The loop-based approach also illustrates how Selenium can repeatedly inspect an element's displayed text before taking action. When implementing date selection, testers should ensure the loop has a suitable termination condition and that the selected day belongs to the intended month. Strengthening these programming fundamentals through Corporate Javascript Course can support more maintainable automation logic and improve the reliability of web application testing.

    ReplyDelete