JavaScript Way To Handle Calendar In Selenium

Hello Folks,

In last two posts we have seen handling different types of calendars:

Handling Calendar Which Has Year & Month As Drop down In Selenium

How To Handle Different Types Of Calendars In Selenium: Part 1

If you notice, You need to write a lengthy code to handle calendars in selenium. Is there any shortcut ways to handle calendars?

Answer is “Yes”. We can this using java script.




JavaScrips(JS) provides a method called setAttribute. Syntax is as below:

                      setAttribute(“attributeName”,”attributeValue”).
Example: document.getElementsByID(“Some Id”)[0].setAttribute(“class”, “democlass”);

  • Above line will set html attribute “Class” for web element.
  • This method can be used to set any attribute.
  • We can use above method of javascript to select date in a calendar. Only condition is that calendar widget allow you to type manually as well apart from selecting from calendar.
  • For example: You should be able to  type 08/30/2017 in calendar box also.

Java Code:

Output:

 

If you have any doubt, feel free to ask here.

If you like my posts, please like, comment, share and subscribe.

#ThanksForReading

#HappySelenium




6 thoughts on “JavaScript Way To Handle Calendar In Selenium

  1. Hello Amod,

    I am trying to select date using JavascriptExecutor but unable to do so. My expected date is not getting selected and default date i.e. today date is getting retreived. Also I am not getting any execption so not able to understand root case. Could you guide me? Below is my code.

    System.setProperty(“webdriver.chrome.driver”, “D:\\1\\chromedriver.exe”);

    // Start browser
    driver = new ChromeDriver();
    driver.manage().window().maximize();
    driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

    driver.get(“https://www.demoqa.com/date-picker”);

    // Calendar 1

    WebElement dateAndTimeField = driver.findElement(By.id(“dateAndTimePickerInput”));

    CalendarToolsQA.setDateUsingJavaScriptInCalendar(driver, dateAndTimeField, “March 14, 2019 12:21 PM”);

    try {
    Thread.sleep(3000);
    } catch (InterruptedException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
    }
    System.out.println(“Date Selected is : ” + dateAndTimeField.getAttribute(“value”));

    // Calendar 2

    WebElement selectDate = driver.findElement(By.id(“datePickerMonthYearInput”));

    CalendarToolsQA.setDateUsingJavaScriptInCalendar(driver, selectDate, “March 14, 2019 12:21 PM”);

    try {
    Thread.sleep(3000);
    } catch (InterruptedException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
    }

    System.out.println(“Date Selected is : ” + selectDate.getAttribute(“value”));

    }

    public static void setDateUsingJavaScriptInCalendar(WebDriver driver, WebElement element, String value) {
    JavascriptExecutor js = (JavascriptExecutor) driver;
    String script = “arguments[0].setAttribute(‘value’,'” + value + “‘);”;

    js.executeScript(script, element);
    }

  2. Hi Amod,
    While entering the date for redbus.in,it is entering the date but after clicking on Search,the date value is cleared and default date is displayed in search result.Can you pls have a look on this and help me on this.

  3. fantastic article amod very informative m an manual tester whose planning to shift to automation, so ive picked selenium, now my query is how should i automate calendar of this type(http://demoqa.com/registration/) and m reading the value of date from excel sheet.. so any kinda help is much appreciated thanks in advance.

    1. Thanks. There are some other articles of handling dates as well in my blog. Search with keyword calendar, you will get.

Leave a Reply

Your email address will not be published. Required fields are marked *