Selenium cannot find element in source HTML

Question

Given:

• Python 3.11.2
• Selenium 4.8.2
• Chrome as the browser engine

I am looking to find the following inside HTML:

<input type="text" class="datepicker apex-item-text apex-item-datepicker hasDatepicker" size="32" value="15-MAR-2023">

I tried this:

browser.find_element(By.CLASS_NAME, 'datepicker apex-item-text apex-item-datepicker hasDatepicker')

and

browser.find_element(By.CSS_SELECTOR, 'input[type="text"][class="datepicker apex-item-text apex-item-datepicker hasDatepicker"]')

but in both cases I get:

Unable to locate element: {"method":"css selector" ...

yes for both methods...maybe for the search based on "class_name" this is a bug (?).

Any ideas on howto make this work?

Many thanks in advance.

Answer 1

Try using XPATH as below:

browser.find_element(By.XPATH, "//input[contains(@class,'datepicker apex-item-text apex-item-datepicker hasDatepicker')]")

In case page takes time to load the element, you can try using waits:

WebDriverWait(browser, 10).until(EC.visibility_of_element_located((By.XPATH, "//input[contains(@class,'datepicker apex-item-text apex-item-datepicker hasDatepicker')]")))

Imports statements required for waits:

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

Answer 2

A few things

1. By.CLASS_NAME takes a single class name but you've sent it 4.

   (By.CLASS_NAME, 'datepicker apex-item-text apex-item-datepicker hasDatepicker')
   

   'datepicker', 'apex-item-text', 'apex-item-datepicker', 'hasDatepicker' are each class names.

   You can convert this into a CSS selector,

   (By.CSS_SELECTOR, '.datepicker.apex-item-text.apex-item-datepicker.hasDatepicker')
   

   A . in CSS selector syntax indicates a class name so it's looking for all four class names.

2. Please don't turn the class string into a direct string comparison, e.g.

   [class="datepicker apex-item-text apex-item-datepicker hasDatepicker"]
   

   This defeats a lot of the flexibility of CSS selectors to specify multiple classes and have them be in any order, etc. See my CSS selector in point #1.

My guess is that at least one of the classes in that element is not always there. Maybe in some cases it's a different color or disabled, etc. where the classes aren't always the same. Look at the different states of that INPUT and find the classes that are always present and create a CSS selector with just those classes, e.g.input.datepicker.apex-item-datepicker as a guess.