skip to Main Content

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.

2

Answers


  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
    
    Login or Signup to reply.
  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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search