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

发表于:2023-4-24 09:12

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:亿牛云爬虫专家    来源:知乎

  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的动态生成元素。最后,我们输出元素的文本内容。
  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号