Selenium（Python、Chrome）如何找到在開發工具中可見但在頁面源代碼中不可見的 web 元素？

Question

我需要使用Selenium單擊帶有 Python3 的網頁中菜單中的第一項。

我設法使用 Selenium 登錄並導航到所需頁面，但我被卡住了：看起來 Selenium 在頁面中找不到任何元素，除了body中的第一個div之外。

我試圖通過ID 、 class 、 xpath 、 selector找到元素……問題可能與此無關。 我以為它可能是一個iframe ，但我需要的內容似乎並不在其中。

我想問題是我需要查找的元素在開發工具中可見，但在頁面源代碼中不可見，所以 Selenium 看不到它 - 這有意義嗎？ 如果是這樣，這可以解決嗎？

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
self.driver.get("my site")

# log-in website and navigate to needed page
# [...]

# find element in page

# this works
first_div = driver.find_element(By.CSS_SELECTOR, "#app-wrapper")

# this does not work
second_div = driver.find_element(By.CSS_SELECTOR, "#app-wrapper > div.layout.flex.flex-col.overflow-x-hidden.h-display-flex.h-flex-direction-column.h-screen")

編輯

問題很可能是由於動態網頁后來通過腳本附加了部分 DOM 樹。 我下載了一個本地版本的page.html ，刪除了 scripts ，並成功地在本地頁面中找到了搶手的元素

from selenium import webdriver
from selenium.webdriver.common.by import By
from pathlib import Path

driver = webdriver.Chrome()

html_file = Path.cwd() / "page.html"

driver.get(html_file.as_uri())

my_element = driver.find_element(By.CSS_SELECTOR, "[title='my-title']")

完全相同的driver.find_element查詢在在線頁面上不起作用。 我正在嘗試按照 Misc08 的回答中的建議實施等待條件。

Answer 1

我想問題是我需要查找的元素在開發工具中可見，但在頁面源代碼中不可見，所以 Selenium 看不到它 - 這有意義嗎？ 如果是這樣，這可以解決嗎？

不，這沒有意義，因為 Selenium 正在后台執行完整的瀏覽器，就像您使用開發工具調查頁面源代碼時所使用的那樣。

但是你有一些選擇來縮小你的問題。 您可以做的第一件事是打印 webdriver 在這一刻“看到”的源代碼：

print(driver.page_source)

如果您在頁面源代碼中看到您正在尋找的元素，那么您應該嘗試改進您的選擇器。 go 一步步向下DOM很有幫助。 先在頁面樹中尋找上層元素。 如果可行，請嘗試查找下一個子元素，然后是下一個子元素，依此類推。 您可以檢查 selenium 是否找到了這樣的元素：

try:
   myelement = driver.find_element(By.CSS_SELECTOR, 'p.content')
   print("Found :)")
except NoSuchElementException:
   print("No found :(")

順便說一句，我認為你的 CSS 選擇器到目前為止太復雜了，只需在 CSS class 上使用，而不是全部：

second_div = driver.find_element(By.CSS_SELECTOR, "#app-wrapper > div.layout")

但可能存在這樣的情況，即您要查找的元素從一開始就不存在於頁面源代碼中。 動態網頁越來越流行。 在這種情況下，稍后通過腳本附加 DOM 樹的一部分。 所以你必須等待腳本的執行，然后才能找到這個“動態”元素。 一個骯臟且不可靠的選擇是在此處添加一個 sleep() 。 更好的是使用顯式等待條件，請參閱https://selenium-python.readthedocs.io/waits.html