Python - 如何使用 selenium 从消失的下拉列表中查找元素

Question

I'm trying to find an element from a disappearing drop down on the steam homepage with selenium . When you type something in the search bar, results will drop down, and if you click outside of it the drop-down results will disappear. You would need to click it again if you want the results to appear again.

Anyway, my code enters an input into the search bar, and the drop-downs do show when input_elem.send_keys(game) runs (I used "terraria" as the input), and every first result has the same css selector. I also tried to find the element with the xpath, it doesn't work either:

from selenium import webdriver

game = input('Type the game you want to find here: ')

# configure browser
browser = webdriver.Firefox()
browser.get('https://store.steampowered.com/')

# input game
input_elem = browser.find_element_by_css_selector('#store_nav_search_term')
input_elem.send_keys(game)

# click the first result
first_match = browser.find_element_by_css_selector('a.match:nth-child(1)')
first_match.click()

Here's the full error:

Traceback (most recent call last):
  File "/home/fanjin/Documents/Python Projects/web_projects/steam/game_finder.py", line 14, in <module>
    first_match = browser.find_element_by_css_selector('a.match:nth-child(1)')
  File "/home/fanjin/.local/lib/python3.8/site-packages/selenium/webdriver/remote/webdriver.py", line 598, in find_element_by_css_selector
    return self.find_element(by=By.CSS_SELECTOR, value=css_selector)
  File "/home/fanjin/.local/lib/python3.8/site-packages/selenium/webdriver/remote/webdriver.py", line 976, in find_element
    return self.execute(Command.FIND_ELEMENT, {
  File "/home/fanjin/.local/lib/python3.8/site-packages/selenium/webdriver/remote/webdriver.py", line 321, in execute
    self.error_handler.check_response(response)
  File "/home/fanjin/.local/lib/python3.8/site-packages/selenium/webdriver/remote/errorhandler.py", line 242, in check_response
    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.NoSuchElementException: Message: Unable to locate element: a.match:nth-child(1)

Answer 1

To click on the first auto suggestions you have to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies :

• Using CSS_SELECTOR :

   driver.get("https://store.steampowered.com/") WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input#store_nav_search_term"))).send_keys("terraria") WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div#search_suggestion_contents>a"))).click()

• Using XPATH :

   driver.get("https://store.steampowered.com/") WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@id='store_nav_search_term']"))).send_keys("terraria") WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@id='search_suggestion_contents']/a"))).click()

• Note : You have to add the following imports:

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

• Browser Snapshot:

---

References

You can find a couple of relevant discussions on NoSuchElementException in:

• selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element while trying to click Next button with selenium
• selenium in python: NoSuchElementException: Message: no such element: Unable to locate element