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

简介: Selenium 是一个自动化测试工具,可以用来模拟浏览器的操作,如点击、输入、滚动等。但是有时候,我们需要定位的页面元素并不是一开始就存在的,而是由 JavaScript 动态生成的。这时候,如果我们直接用 Selenium 的 find_element 方法去定位元素,可能会出现找不到元素的错误,因为页面还没有加载完成。为了解决这个问题,我们需要使用一些特定的定位技巧,让 Selenium 等待元素出现后再进行操作。

显示器10.jpg

Selenium 是一个自动化测试工具,可以用来模拟浏览器的操作,如点击、输入、滚动等。但是有时候,我们需要定位的页面元素并不是一开始就存在的,而是由 JavaScript 动态生成的。这时候,如果我们直接用 Selenium 的 find_element 方法去定位元素,可能会出现找不到元素的错误,因为页面还没有加载完成。为了解决这个问题,我们需要使用一些特定的定位技巧,让 Selenium 等待元素出现后再进行操作。

一种常用的技巧是使用 WebDriver 的 WebDriverWait 类和 expected_conditions 模块来等待元素出现。WebDriverWait 类可以指定一个最大等待时间,以及一个检查条件。expected_conditions 模块提供了一些常见的检查条件,如元素可见、元素可点击、元素存在等。当检查条件满足时,WebDriverWait 类会返回对应的元素对象,否则会抛出超时异常。

例如,假设我们想要定位一个使用 JavaScript 动态生成的文本框元素,可以使用以下代码:

# 导入Selenium库fromseleniumimportwebdriverfromselenium.webdriver.common.proxyimportProxy, ProxyType# 亿牛云爬虫代理加强版 用户名、密码、IP地址和端口proxy_username="16YUN"proxy_password="16IP"proxy_ip="www.16yun.cn"proxy_port="31000"proxy=Proxy()
proxy.proxy_type=ProxyType.MANUALproxy.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 表达式

fromseleniumimportwebdriverfromselenium.webdriver.support.uiimportWebDriverWaitfromselenium.webdriver.supportimportexpected_conditionsasECfromselenium.webdriver.common.byimportBy# 创建 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 选择器

fromseleniumimportwebdriver# 创建一个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的动态生成元素。最后,我们输出元素的文本内容。

相关文章
|
6月前
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
209 56
|
21天前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
49 2
|
11月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
238 1
|
8月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
276 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
9月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
374 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
217 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
9月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
221 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
11月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
389 77
|
7月前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
7月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章