元素定位演示 · JavaScript 定位

系统学习 execute_script 的核心语法、实操示例与最佳实践

首页 定位导航

execute_script 定位导读

JS 定位是在 Selenium 中通过 driver.execute_script() 方法把一段原生 JavaScript 代码注入浏览器执行,利用 JavaScript 内置的 DOM 查询 API(如 document.getElementById()、document.querySelector()、document.querySelectorAll()、document.forms['login'].username 等)来查找元素。注意:它并不是 Selenium 官方提供的定位器(没有 By.JS 或 By.EXECUTE_SCRIPT 这样的枚举值),而是一个"宿主注入"的机制 — Selenium 把 JS 字符串丢给浏览器引擎执行,浏览器返回的 DOM 节点自动映射为 Selenium 的 WebElement 对象。因此 JS 定位本质上是"借浏览器之力",绕过了 Selenium 8 种内置定位器(ID/NAME/CLASS/TAG/XPATH/CSS/LINK_TEXT/PARTIAL_LINK_TEXT)的能力边界。它的价值在于解决其他 8 种定位方式搞不定的场景:① shadow DOM 内部元素(常规选择器穿透不了);② 虚拟滚动列表中尚未渲染到 DOM 的元素;③ 需要计算后才能定位的元素(如"第 3 个可见的、有 data-id 属性且未被禁用的按钮");④ 绕过 click() 不生效的问题(用 JS 直接触发事件)。使用时注意:JS 代码字符串里不能直接引用 Python 变量,需要用 arguments[0] 占位符传参。

execute_script 快速入门
掌握核心语法与定位策略
语法示例
find_element / find_elements 用法
实操练习
交互式练习区实时反馈
driver.execute_script

⑨ JavaScript 定位

通过 execute_script 执行 JS,适合特殊场景与 Selenium 原生 API 无法覆盖的需求
JavaScript 定位语法:
通过 execute_script 执行 JS 定位
driver.execute_script("return document.getElementById('demo-js-username');") (getElementById)
driver.execute_script("return document.getElementsByName('demo-js-input')[0];") (getElementsByName)
driver.execute_script("return document.getElementsByClassName('demo-js-btn')[0];") (getElementsByClassName)
driver.execute_script("return document.getElementsByTagName('button')[0];") (getElementsByTagName)
driver.execute_script("return document.querySelector('.demo-js-card');") (querySelector)
driver.execute_script("return document.querySelectorAll('.demo-js-card');") (querySelectorAll)
特点:当 Selenium 原生定位方式受限时(如 Shadow DOM、iframe 嵌套、动态属性),可通过 execute_script 直接调用浏览器原生 JS API 定位元素。但可读性较差,调试不便。
实操练习:JavaScript 定位 → 查看 Selenium 代码与执行结果
会员中心 · 开通学习套餐 真实项目中常见的「套餐卡片 + 手机号录入 + 操作按钮」元素
真实页面元素

① 选择套餐(3 个 .demo-js-card,可被 querySelector / querySelectorAll 命中)

个人学习版 工具类 · 适合入门自测 ¥299¥399
视频速成版 视频类 · 碎片化学习 ¥159¥259

② 录入开通手机号(可被 getElementById 命中)

该输入框 id="demo-js-username",高级 JS 定位会用 execute_script 直接注入 value

JS 定位演示元素(execute_script 实战)

Selenium 脚本入门
JS 定位 — getElementById
¥299
DevTools 调试技巧
JS 定位 — getElementsByClassName
¥159
接口自动化进阶
JS 定位 — arguments 传参
¥399
批量元素操作实战
JS 定位 — querySelectorAll 批量
¥259
表单元素精准查询
JS 定位 — getElementsByName
¥199
JavaScript 定位实战技巧
  • getElementById:document.getElementById('id'),返回单个元素,速度最快。
  • getElementsByClassName:document.getElementsByClassName('btn'),返回 HTMLCollection(有 length、可索引),多个 class 空格分隔时只取一个。
  • getElementsByName:document.getElementsByName('username'),返回同名元素列表(常用于单选按钮组、表单控件),页面同名时返回全部匹配。
  • getElementsByTagName:document.getElementsByTagName('input'),返回页面上全部该标签的元素列表,配合父元素可做层级缩小搜索。
  • querySelector:document.querySelector('.cls'),CSS 选择器语法,返回首个匹配。
  • querySelectorAll:document.querySelectorAll('.cls'),返回 NodeList,需 list() 转换。
  • arguments 传参:arguments[0],向 execute_script 传递已定位的 WebElement。
  • 直接修改属性:.value = '...',绕过 send_keys 直接注入值。
定位后操作效果展示区域
本区域用于展示:使用 execute_script 定位到上方元素后,执行「点击 / 输入 / 提交」等操作的真实反馈结果。

关于我们

Python 自动化测试学习平台是一个面向软件测试工程师、开发人员及在校学生的交互式在线学习平台,专注于 Selenium WebDriver 与 Python unittest 自动化测试技能的教学与实践。

我们以"理论 + 实战 + 可交互演示"为核心特色,将八种常规元素定位和Javascript定位、元素操作、自动化测试工具、单元测试、测试模型等知识体系拆分为模块化课程,每个模块都配有可点击、可输入、可运行的模拟练习页面。

平台致力于降低自动化测试的入门门槛,让学习者从"看懂代码"到"动手实操",逐步掌握企业级自动化测试框架的设计与落地能力。

联系方式

📧邮箱:lq@selenium-auto-test.com

📞电话:0755-12345678

📍地址:深圳

💬微信公众号:Selenium自动化测试

🐙GitHub:github.com/selenium-auto-test

免责声明

1. 本平台所有示例代码、演示页面及教程内容均仅供学习交流使用,不构成任何商业推广或技术服务承诺。

2. 平台中的 Selenium API 描述、Python 语法说明均以官方文档为准,如有版本差异请以对应官方文档为准。

3. 学习者在实际项目中应用平台所学内容时,应结合自身项目环境进行充分测试,本平台不对因直接使用示例代码而产生的任何直接或间接损失承担责任。

4. 本平台所引用的第三方库(Selenium、ChromeDriver、unittest 等)版权归其各自作者及维护者所有。

5. 如涉及版权问题或内容建议,请及时通过联系方式与我们沟通,我们将第一时间处理。