Can't seem to select Date range picker by it's XPATH using selenium

Question

I am trying to scrape data from http://covid.gov.pk/stats/pakistan. I want the script to be able to click the date range picker to change the dates, but I cannot seem to select it the XPATH I am using is as follows.

//*[@id="body"]/div/div/div[1]/div[2]/div/div[1]/div[1]/div[1]/div/lego-report/lego-canvas-container/div/file-drop-zone/span/content-section/canvas-component[66]

Python script I am using

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.Chrome()
driver.implicitly_wait(30)
driver.get("http://covid.gov.pk/stats/pakistan")

#wait for Page to load
WebDriverWait(driver, 30, ).until(EC.invisibility_of_element((By.XPATH, "//div[@id=\"preloader\"]")))

#select date range picker
element = driver.find_element_by_xpath("//*[@id=\"body\"]/div/div/div[1]/div[2]/div/div[1]/div[1]/div[1]/div/lego-report/lego-canvas-container/div/file-drop-zone/span/content-section/canvas-component[66]")
element.click()

The error I encounter is as follows

Unable to locate element: {"method":"xpath","selector":"//*[@id="body"]/div/div/div[1]/div[2]/div/div[1]/div[1]/div[1]/div/lego-report/lego-canvas-container/div/file-drop-zone/span/content-section/canvas-component[66]"} (Session info: chrome=81.0.4044.113)

I can not seem to figure out what exactly isn't working I copied the xpath by inspecting the element using developer tools in chrome.

KunduK KunduK · Accepted Answer · 2020-04-21T09:27:31

The date picker element is present inside an iframe.You need to switch the iframe first to access the date picker.

Induce WebDriverWait() and wait for frame_to_be_available_and_switch_to_it() and use following css selector.

Then you can click on date picker using following xpath.

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.Chrome()
driver.get("http://covid.gov.pk/stats/pakistan")
#wait for Page to load
WebDriverWait(driver,30).until(EC.invisibility_of_element((By.XPATH, "//div[@id='preloader']")))
WebDriverWait(driver,20).until(EC.frame_to_be_available_and_switch_to_it((By.CSS_SELECTOR,".pak-stats-ifrm")))
#select date range picker
element = driver.find_element_by_xpath("//div[@class='content-holder ng-scope']")
element.click()

Can't seem to select Date range picker by it's XPATH using selenium

1 Answers