Selenium 如何定位 JavaScript 动态生成的页面元素

Selenium 是一个自动化测试工具，可以用来模拟浏览器的操作，如点击、输入、滚动等。但是有时候，我们需要定位的页面元素并不是一开始就存在的，而是由 JavaScript 动态生成的。这时候，如果我们直接用 Selenium 的 find_element 方法去定位元素，可能会出现找不到元素的错误，因为页面还没有加载完成。为了解决这个问题，我们需要使用一些特定的定位技巧，让 Selenium 等待元素出现后再进行操作。
一种常用的技巧是使用 WebDriver 的 WebDriverWait 类和 expected_conditions 模块来等待元素出现。WebDriverWait 类可以指定一个最大等待时间，以及一个检查条件。expected_conditions 模块提供了一些常见的检查条件，如元素可见、元素可点击、元素存在等。当检查条件满足时，WebDriverWait 类会返回对应的元素对象，否则会抛出超时异常。
例如，假设我们想要定位一个使用 JavaScript 动态生成的文本框元素，可以使用以下代码：

# 导入Selenium库from selenium import webdriver
from selenium.webdriver.common.proxy import Proxy, ProxyType

# 亿牛云爬虫代理加强版 用户名、密码、IP地址和端口
proxy_username ="16YUN"
proxy_password ="16IP"
proxy_ip ="www.16yun.cn"
proxy_port ="31000"

proxy = Proxy()
proxy.proxy_type = ProxyType.MANUAL
proxy.http_proxy =f"http://{proxy_username}:{proxy_password}@{proxy_ip}:{proxy_port}"
proxy.ssl_proxy =f"http://{proxy_username}:{proxy_password}@{proxy_ip}:{proxy_port}"# 将代理设置到浏览器选项中
options = webdriver.ChromeOptions()
options.add_argument('--ignore-certificate-errors')
proxy.add_to_capabilities(options.to_capabilities())# 创建一个浏览器对象，使用代理选项
driver = webdriver.Chrome(options=options)# 打开一个网页
driver.get("https://example.com")# 等待 10 秒钟，直到元素出现
element = WebDriverWait(driver,10).until(
    EC.presence_of_element_located((By.ID,'dynamic_textbox')))# 执行一些操作，比如向文本框中输入文本
element.send_keys('Hello, World!')# 关闭浏览器
driver.quit()

在上面的代码中，我们使用 WebDriverWait 和 expected_conditions 模块等待元素出现，直到元素的 ID 属性值为 dynamic_textbox 的文本框元素出现为止。然后，我们可以使用定位到的 element 对象进行一些操作，比如向文本框中输入文本。
除了上面的方法，还有一些其他的定位技巧可以用来定位 JavaScript 动态生成的页面元素，比如:
1、使用 XPath 表达式

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

# 创建 WebDriver 对象
driver = webdriver.Chrome()# 访问目标页面
driver.get("https://www.example.com")# 使用 JavaScript 动态生成一个文本框元素
driver.execute_script("document.body.innerHTML = '<input type=\"text\" id=\"dynamic_textbox\">';")# 使用 XPath 表达式定位动态生成的文本框元素
textbox = WebDriverWait(driver,10).until(
    EC.presence_of_element_located((By.XPATH,"//input[@id='dynamic_textbox']")))# 向文本框中输入文本
textbox.send_keys("Hello, World!")# 关闭 WebDriver 对象
driver.quit()

在上面的代码中，我们首先创建一个 WebDriver 对象并访问目标页面。然后，我们使用 execute_script() 方法执行 JavaScript 代码来动态生成一个文本框元素。
接下来，我们使用 XPath 表达式 “//input[@id=‘dynamic_textbox’]” 定位这个动态生成的文本框元素。注意，我们使用 presence_of_element_located() 方法来等待元素出现，以避免 Selenium 尝试访问尚未出现的元素而导致定位失败。最后，我们向文本框中输入文本，并使用 quit() 方法关闭 WebDriver 对象。
2、使用 CSS 选择器

from selenium import webdriver

# 创建一个Chrome浏览器实例
driver = webdriver.Chrome()# 打开要访问的页面
driver.get("https://example.com")# 等待页面加载完成
driver.implicitly_wait(10)# 使用CSS选择器定位动态生成的元素
dynamic_element = driver.find_element_by_css_selector("#dynamic-element")# 输出元素的文本内容print(dynamic_element.text)# 关闭浏览器
driver.quit()

在上面的代码中，我们使用webdriver.Chrome()创建一个Chrome浏览器实例，然后使用get()方法打开要访问的页面。我们还使用implicitly_wait()方法设置等待时间，以确保页面已完全加载。
接下来，我们使用find_element_by_css_selector()方法和CSS选择器#dynamic-element定位页面上ID为dynamic-element的动态生成元素。最后，我们输出元素的文本内容。