Navigating through web applications often requires interaction with date and time pickers, a common feature in many forms and interfaces. Automating this task using Selenium, a powerful web testing framework, can significantly enhance the efficiency of your test scripts. We’ll delve into the techniques to help you easily select a date from the date and time picker in Selenium.
Let’s look at the basic steps of interacting with the date and time picker in Selenium:
First off, we need to locate the relevant elements of the date and time picker on the web page. We can use browser developer tools to inspect the HTML structure and identify the input fields where users can enter the date and time.
# accessing date picker using ID of the elementdate_picker = driver.find_element(By.ID, "datepicker")# accessing time picker using Xapth of the elementtime_picker = driver.find_element(By.XPATH, "//input[starts-with(@id, 'time-picker')]")
Once you’ve located the elements, use Selenium’s send_keys method to input the desired date and time. Some date pickers may allow direct input, while others might require a different approach, like sending a series of keystrokes.
# Sample code for entering date in the date pickerdate_picker.send_keys('01/19/2024')# Sample code for entering time in the time pickertime_picker.send_keys('12:00AM')
Many date pickers utilize calendar pop-ups for date selection. You may need to handle these pop-ups separately. Locate the calendar elements and interact with them accordingly.
# Sample code for handling calendar pop-upcalendar_popup = driver.find_element(By.CLASS_NAME, 'calendar-popup')selected_date = calendar_popup.find_element(By.XPATH, '//td[@class="selected"]')selected_date.click()
After selecting the date and time, finalize the selection by submitting the form or triggering any associated actions.
Let’s take a look at an example of using date and time picker in Selenium:
# importing libraries
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from time import sleep
# webdriver setup
options = Options()
options.add_argument('--no-sandbox')
options.add_argument('--disable-dev-shm-usage')
# Firing up webdriver
driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()), options=options)
# navigating to the website
driver.get('https://www.globalsqa.com/demo-site/datepicker/');
sleep(5)
# Switching to the respective iframe as our sample testing website has the
# calender element inside the iframe
iframe = driver.find_element(By.CSS_SELECTOR, 'iframe.demo-frame')
driver.switch_to.frame(iframe)
# accessing the date field using the ID of the element
date_picker = driver.find_element(By.ID, 'datepicker')
date_picker.click()
sleep(5)
# entering date in the date picker
date_picker.send_keys('01/19/2024')
date_picker.send_keys(Keys.ENTER)
sleep(10);
# accessing sample website to test time-picker
driver.get('https://www.patternfly.org/components/date-and-time/date-and-time-picker/')
sleep(5)
# accessing time-picker using Xapth of the element
time_picker = driver.find_elements(By.XPATH, "//input[starts-with(@id, 'time-picker')]")
time_picker[0].send_keys('12:00AM')
time_picker[0].send_keys(Keys.ENTER)
sleep(40)
driver.close();Lines 2–8: We import the necessary libraries to run the selenium webdriver.
Line 16: We set up our WebDriver, which is a chromedriver in this case.
Line 19: We navigate to any website, (globalsqa.com/demo-site) in this case, by using driver.get() method.
Lines 24–25: In our sample website, the date picker element is present inside an iframe, so we first switch to the iframe.
Lines 28–29: We locate the date picker element by using the ID of the element.
Lines 33–34: We enter the desired date by using the driver.send_keys() method.
Line 39: We navigate to another sample website, (patternfly.org) in this case, to test the time picker instance.
Lines 43–45: We send the desired data to the time picker element after locating it.
Line 48: We close the WebDriver instance by calling the driver.close() method once all the processing is complete.
Automating date and time picker interactions in Selenium demands a clear understanding of the HTML structure and a systematic approach to element identification. By following the steps and using the right tools, we can confidently tackle the complexities of date and time picker automation. This way, we can ensure that our Selenium testing scripts are precise, reliable, and effective.
Free Resources