我做了个元素定位拾取器悬停即拾取40 种 XPath/CSS 候选自动生成每条还带唯一性实测GitHub 开源完整源码Releases 下载解压即用carterking888/get_ui_elements_tool —— 觉得有用求个 Star ⭐做自动化测试的同学每天都在跟定位符打交道打开 F12翻 DOM 树复制 XPath粘到脚本里一跑——NoSuchElementException。手写的定位符要么太脆页面结构一改就失效要么太长绝对路径一坨最烦的是写完不知道能不能唯一命中得回页面里一遍遍试。于是我做了这个元素定位拾取器网页里悬停高亮、点击一下几十种定位符候选自动生成每条都实时实测匹配数唯一还是多匹配一目了然定位符改不动还能顺手生成 Selenium / Playwright / Cypress 三种代码片段甚至 WebView2 / Electron 客户端应用里嵌的 H5 页面也能接管来拾取。本文分享功能设计、一份怎么挑定位符的实战心得以及开发中踩过的几个坑。它能做什么一句话把找定位符从翻 DOM 的体力活变成点两下的事。浏览器拾取内置 Chromium 独立窗口打开目标页悬停出现绿色高亮框 提示标签标签名 / class / 尺寸点击即采集浏览器可选 新标签页跟随默认 Edge、可切 Chrome没装自动回退都没有还能自动下载 Chromium联网一次点链接新开标签页自动跟过去继续拾取定位符候选一次拾取生成 40 条候选——ID、NAME、属性精确与^/$/*运算符、多属性组合、类名组合、结构路径、祖先锚定、文本精确 / 包含……每条带页内匹配数徽章唯一性实测候选是不是真的唯一当场在当前页面querySelectorAll/evaluate一遍给你看页面结构变了还能随时重新校验代码片段Selenium / Playwright / Cypress 三种写法一键生成复制粘进脚本就能跑历史记录本地落库、关键字搜索、收藏分组、导出 JSON详情页保留拾取时的页面上下文App 拾取CDP 远程调试接管 WebView2 / Electron 应用内页面定位符逻辑与浏览器完全一致深浅双主题一键切换全部前端依赖本地化断网也能用快速上手典型工作流三步浏览模式打开并导航到目标页——不拦截任何点击正常登录、翻页、搜到你想定位的元素所在页面切回拾取模式点一下目标元素——左边拾取流出一条记录右边面板立刻给出全部候选在右侧按徽章挑一条唯一的定位符 / 代码片段复制走顺手存进历史记录输入框场景有捷径拾取模式下点输入框会采集 放行定位符照记的同时输入框正常聚焦紧接着就能打字不用来回切模式。功能设计1. 拾取 / 浏览双模式采集和操作不再打架初版有个反直觉的问题拾取模式下所有点击都被采集拦截想点个链接翻页、点个搜索框输入都做不到——用户感知就是浏览器坏了。最后的方案是双模式拾取模式点击拦截采集原有体验但对输入类元素input/textarea/select/contenteditable采集 放行——定位符照记同时输入框正常聚焦浏览模式完全不拦截正常点链接、翻页工具继续跟踪页面跳转并自动给新页面补装拾取脚本模式跨导航持久Ctrl点击在拾取模式下临时穿透不用切模式也能跳转Esc暂停拾取光标在输入框里时 Esc 还给页面不会误暂停这样先浏览到目标页、再切回拾取点元素的流程就顺了。2. 定位符候选不只是能定位还要抗变化好定位符的标准不是现在能用而是页面改版后还能用。所以候选是分层的首选ID、唯一 />3. 实战心得拿到 40 条候选到底该用哪条工具负责把候选全列出来但挑选还是有经验的这也是我日常写用例的原则能用 ID />4. 历史记录拾取过的都能找回来拾取记录本地落库支持关键字搜索标签 / 定位符 / 文本、★ 收藏、自定义分组比如按业务页面建组、导出 JSON。详情页保留完整的候选列表和拾取时的页面上下文URL / 标题 / 坐标过两周回头找当初那个元素也不慌。5. App 拾取WebView2 / Electron 应用也能玩客户端应用内嵌的 H5 页面F12 往往是禁用或阉割的。这里走 CDP 远程调试应用开启远程调试端口后页面里附了两种开启方式的说明工具枚举出应用内全部页面 / 窗口选中后拾取体验与浏览器完全一致——同一套高亮、同一套候选生成、同一套唯一性校验。写客户端自动化时再也不用连真机 猜控件了。踩坑记录坑 1注入脚本在 DOM 解析前执行document.head是 null往目标页面注入拾取脚本用的是新页面自动执行机制脚本会在文档解析前就跑——此时document.head还是null脚本一开头创建高亮样式元素就抛异常后面的点击监听根本没挂上。表现很诡异有的页面能拾取有的页面点了没反应。修复整个初始化包进函数document.readyState loading时挂到DOMContentLoaded再执行。本地测试环境因为 DOM 就绪后才注入完全暴露不了这个问题最后是在真实浏览器里装window.onerror探针才定位的。坑 2二次打开浏览器报 “Playwright Sync API called inside the asyncio loop”用户手动关掉拾取浏览器窗口后再点打开必现这个错误。排查了很久——不是调用方线程的问题是引擎库自身同步 API 每次调用后会把自己内部的事件循环残留为该线程的 running loop线程本地变量同一个工作线程第二次启动引擎时残留循环被误判为正处于 asyncio 循环中直接抛错。修复三板斧启动前检测并清掉残留的线程本地循环关闭 / 打开失败路径重建工作线程重开前先停掉旧实例顺带修掉重复打开时旧浏览器进程泄漏。坑 3页面里evaluate传参被转义剥掉通过表达式求值做定位符计数时把参数用JSON.stringify内联进表达式字符串结果引号转义在求值边界被剥掉一层xpath 里的到了页面里就变了形全部计数返回 -1。老老实实改成evaluate(fn, arg)的标准传参形式才稳定。坑 4页面脚本被stopImmediatePropagation灭掉监听有些站点会在捕获阶段调用stopImmediatePropagation()把后续监听全掐掉拾取脚本挂的同级监听直接失联。解法是监听挂在window上的捕获阶段——拦截时机比站点脚本更早站点再怎么在元素上做手脚也拦不住window这一层的先到监听。另外做拦截的同时要记得对输入类元素放行否则能拾取不能搜索的抱怨马上就来。坑 5数据驱动前端删除记录整页瞬间报错数据驱动的轻量前端里删除记录后条件分支的详情面板在数据置空的一瞬间被重新求值访问了已不存在对象的字段。解法是给详情对象做一个永不为 null 的兜底 getter空时返回一个空白结构的桩模板零改动。坑 6历史记录共 1 条但列表是空行很典型的一类前后端字段错位列表过滤的是原始记录模板绑定的却是摘要视图的字段名ident/time原始记录里没有这两个字段渲染出来整行全空只剩个收藏星标。修复是让过滤直接基于映射后的视图模型并且给冒烟测试加了行内容非空断言防止回归。质量保障功能迭代全靠三套回归撑着改一处跑一遍离线 DOM 冒烟不启浏览器、不启引擎直接验证页面渲染与交互逻辑含拾取行选中联动历史行非空等断言秒级出结果候选生成单测喂构造好的 DOM 片段断言各类型候选ID / 运算符 / 文本系 / 锚定路径的生成与排序正确性真实浏览器端到端起真 Chromium跑打开 → 拾取 → 双模式切换 → 输入放行 → 关闭杀进程全链路下载与使用GitHub Releases 下载对应平台压缩包系统下载体积zip说明Windows 完整版element_picker_v*_win64.zip~364MB解压 ~843MB内置 Chromium解压双击element_picker.exeWindows 轻量版element_picker_v*_win64_lite.zip~67MB解压 ~168MB不内置浏览器默认用系统 Edge可切换 ChromemacOS 完整版 (M 系列)*_macos_arm64.dmg/.zip300360MB内置 macOS 版 Chromiumdmg 拖进 ApplicationsmacOS 完整版 (Intel)*_macos_x86_64.dmg/.zip300360MB同上macOS 轻量版同架构*_lite.zip5565MB不内置浏览器逻辑同 Windows Lite完整包内置 Chromium解压即用目标机零环境嫌体积大的选 Lite 版约为完整版的 1/5目标机有 Edge 或 Chrome 即可未装所选浏览器时自动回退另一个界面上可直接选择默认 Edge 或 Chrome。若目标机既无 Edge 也无 ChromePlaywright 引擎还会自动下载 Chromium约 150MB联网一次后走本地缓存全程不需要目标机装 Python。拾取模式下点击链接新开标签页会自动跟随新页面的元素照常拾取活动标签页被关掉后自动回退到剩余标签页。Selenium 引擎内置 Selenium Manager首次使用自动下载匹配版本的浏览器驱动需联网一次之后走本地缓存。界面用H5 CSS JavaScript手写深浅双主题一键切换第三方前端依赖全部本地化。源码地址GitHub 仓库carterking888/get_ui_elements_tool觉得有用点个 Star ⭐Release 页 直接下打包好的产物Windows / macOS 双平台内置 Chromium 解压即用想看某个功能实现的可直接定位core/picker.js注入脚本高亮、双模式、40 候选生成、core/locator.py候选排序与代码片段、core/engine_playwright.py浏览器引擎与唯一性实测、core/app_cdp.pyApp 拾取的 CDP 接管、core/history.py历史记录落库如果觉得有用去 GitHub 点个 Star ⭐ 就是最大的鼓励。欢迎 issue 提需求下一个版本计划做录制回放拾取序列一键生成脚本。关键词自动化测试、元素定位、XPath、CSS 选择器、Selenium、Playwright、Cypress、WebView2、Electron、CDP、测试工具
写了个小工具后，我再也不想手写XPath了
我做了个元素定位拾取器悬停即拾取40 种 XPath/CSS 候选自动生成每条还带唯一性实测GitHub 开源完整源码Releases 下载解压即用carterking888/get_ui_elements_tool —— 觉得有用求个 Star ⭐做自动化测试的同学每天都在跟定位符打交道打开 F12翻 DOM 树复制 XPath粘到脚本里一跑——NoSuchElementException。手写的定位符要么太脆页面结构一改就失效要么太长绝对路径一坨最烦的是写完不知道能不能唯一命中得回页面里一遍遍试。于是我做了这个元素定位拾取器网页里悬停高亮、点击一下几十种定位符候选自动生成每条都实时实测匹配数唯一还是多匹配一目了然定位符改不动还能顺手生成 Selenium / Playwright / Cypress 三种代码片段甚至 WebView2 / Electron 客户端应用里嵌的 H5 页面也能接管来拾取。本文分享功能设计、一份怎么挑定位符的实战心得以及开发中踩过的几个坑。它能做什么一句话把找定位符从翻 DOM 的体力活变成点两下的事。浏览器拾取内置 Chromium 独立窗口打开目标页悬停出现绿色高亮框 提示标签标签名 / class / 尺寸点击即采集浏览器可选 新标签页跟随默认 Edge、可切 Chrome没装自动回退都没有还能自动下载 Chromium联网一次点链接新开标签页自动跟过去继续拾取定位符候选一次拾取生成 40 条候选——ID、NAME、属性精确与^/$/*运算符、多属性组合、类名组合、结构路径、祖先锚定、文本精确 / 包含……每条带页内匹配数徽章唯一性实测候选是不是真的唯一当场在当前页面querySelectorAll/evaluate一遍给你看页面结构变了还能随时重新校验代码片段Selenium / Playwright / Cypress 三种写法一键生成复制粘进脚本就能跑历史记录本地落库、关键字搜索、收藏分组、导出 JSON详情页保留拾取时的页面上下文App 拾取CDP 远程调试接管 WebView2 / Electron 应用内页面定位符逻辑与浏览器完全一致深浅双主题一键切换全部前端依赖本地化断网也能用快速上手典型工作流三步浏览模式打开并导航到目标页——不拦截任何点击正常登录、翻页、搜到你想定位的元素所在页面切回拾取模式点一下目标元素——左边拾取流出一条记录右边面板立刻给出全部候选在右侧按徽章挑一条唯一的定位符 / 代码片段复制走顺手存进历史记录输入框场景有捷径拾取模式下点输入框会采集 放行定位符照记的同时输入框正常聚焦紧接着就能打字不用来回切模式。功能设计1. 拾取 / 浏览双模式采集和操作不再打架初版有个反直觉的问题拾取模式下所有点击都被采集拦截想点个链接翻页、点个搜索框输入都做不到——用户感知就是浏览器坏了。最后的方案是双模式拾取模式点击拦截采集原有体验但对输入类元素input/textarea/select/contenteditable采集 放行——定位符照记同时输入框正常聚焦浏览模式完全不拦截正常点链接、翻页工具继续跟踪页面跳转并自动给新页面补装拾取脚本模式跨导航持久Ctrl点击在拾取模式下临时穿透不用切模式也能跳转Esc暂停拾取光标在输入框里时 Esc 还给页面不会误暂停这样先浏览到目标页、再切回拾取点元素的流程就顺了。2. 定位符候选不只是能定位还要抗变化好定位符的标准不是现在能用而是页面改版后还能用。所以候选是分层的首选ID、唯一 />3. 实战心得拿到 40 条候选到底该用哪条工具负责把候选全列出来但挑选还是有经验的这也是我日常写用例的原则能用 ID />4. 历史记录拾取过的都能找回来拾取记录本地落库支持关键字搜索标签 / 定位符 / 文本、★ 收藏、自定义分组比如按业务页面建组、导出 JSON。详情页保留完整的候选列表和拾取时的页面上下文URL / 标题 / 坐标过两周回头找当初那个元素也不慌。5. App 拾取WebView2 / Electron 应用也能玩客户端应用内嵌的 H5 页面F12 往往是禁用或阉割的。这里走 CDP 远程调试应用开启远程调试端口后页面里附了两种开启方式的说明工具枚举出应用内全部页面 / 窗口选中后拾取体验与浏览器完全一致——同一套高亮、同一套候选生成、同一套唯一性校验。写客户端自动化时再也不用连真机 猜控件了。踩坑记录坑 1注入脚本在 DOM 解析前执行document.head是 null往目标页面注入拾取脚本用的是新页面自动执行机制脚本会在文档解析前就跑——此时document.head还是null脚本一开头创建高亮样式元素就抛异常后面的点击监听根本没挂上。表现很诡异有的页面能拾取有的页面点了没反应。修复整个初始化包进函数document.readyState loading时挂到DOMContentLoaded再执行。本地测试环境因为 DOM 就绪后才注入完全暴露不了这个问题最后是在真实浏览器里装window.onerror探针才定位的。坑 2二次打开浏览器报 “Playwright Sync API called inside the asyncio loop”用户手动关掉拾取浏览器窗口后再点打开必现这个错误。排查了很久——不是调用方线程的问题是引擎库自身同步 API 每次调用后会把自己内部的事件循环残留为该线程的 running loop线程本地变量同一个工作线程第二次启动引擎时残留循环被误判为正处于 asyncio 循环中直接抛错。修复三板斧启动前检测并清掉残留的线程本地循环关闭 / 打开失败路径重建工作线程重开前先停掉旧实例顺带修掉重复打开时旧浏览器进程泄漏。坑 3页面里evaluate传参被转义剥掉通过表达式求值做定位符计数时把参数用JSON.stringify内联进表达式字符串结果引号转义在求值边界被剥掉一层xpath 里的到了页面里就变了形全部计数返回 -1。老老实实改成evaluate(fn, arg)的标准传参形式才稳定。坑 4页面脚本被stopImmediatePropagation灭掉监听有些站点会在捕获阶段调用stopImmediatePropagation()把后续监听全掐掉拾取脚本挂的同级监听直接失联。解法是监听挂在window上的捕获阶段——拦截时机比站点脚本更早站点再怎么在元素上做手脚也拦不住window这一层的先到监听。另外做拦截的同时要记得对输入类元素放行否则能拾取不能搜索的抱怨马上就来。坑 5数据驱动前端删除记录整页瞬间报错数据驱动的轻量前端里删除记录后条件分支的详情面板在数据置空的一瞬间被重新求值访问了已不存在对象的字段。解法是给详情对象做一个永不为 null 的兜底 getter空时返回一个空白结构的桩模板零改动。坑 6历史记录共 1 条但列表是空行很典型的一类前后端字段错位列表过滤的是原始记录模板绑定的却是摘要视图的字段名ident/time原始记录里没有这两个字段渲染出来整行全空只剩个收藏星标。修复是让过滤直接基于映射后的视图模型并且给冒烟测试加了行内容非空断言防止回归。质量保障功能迭代全靠三套回归撑着改一处跑一遍离线 DOM 冒烟不启浏览器、不启引擎直接验证页面渲染与交互逻辑含拾取行选中联动历史行非空等断言秒级出结果候选生成单测喂构造好的 DOM 片段断言各类型候选ID / 运算符 / 文本系 / 锚定路径的生成与排序正确性真实浏览器端到端起真 Chromium跑打开 → 拾取 → 双模式切换 → 输入放行 → 关闭杀进程全链路下载与使用GitHub Releases 下载对应平台压缩包系统下载体积zip说明Windows 完整版element_picker_v*_win64.zip~364MB解压 ~843MB内置 Chromium解压双击element_picker.exeWindows 轻量版element_picker_v*_win64_lite.zip~67MB解压 ~168MB不内置浏览器默认用系统 Edge可切换 ChromemacOS 完整版 (M 系列)*_macos_arm64.dmg/.zip300360MB内置 macOS 版 Chromiumdmg 拖进 ApplicationsmacOS 完整版 (Intel)*_macos_x86_64.dmg/.zip300360MB同上macOS 轻量版同架构*_lite.zip5565MB不内置浏览器逻辑同 Windows Lite完整包内置 Chromium解压即用目标机零环境嫌体积大的选 Lite 版约为完整版的 1/5目标机有 Edge 或 Chrome 即可未装所选浏览器时自动回退另一个界面上可直接选择默认 Edge 或 Chrome。若目标机既无 Edge 也无 ChromePlaywright 引擎还会自动下载 Chromium约 150MB联网一次后走本地缓存全程不需要目标机装 Python。拾取模式下点击链接新开标签页会自动跟随新页面的元素照常拾取活动标签页被关掉后自动回退到剩余标签页。Selenium 引擎内置 Selenium Manager首次使用自动下载匹配版本的浏览器驱动需联网一次之后走本地缓存。界面用H5 CSS JavaScript手写深浅双主题一键切换第三方前端依赖全部本地化。源码地址GitHub 仓库carterking888/get_ui_elements_tool觉得有用点个 Star ⭐Release 页 直接下打包好的产物Windows / macOS 双平台内置 Chromium 解压即用想看某个功能实现的可直接定位core/picker.js注入脚本高亮、双模式、40 候选生成、core/locator.py候选排序与代码片段、core/engine_playwright.py浏览器引擎与唯一性实测、core/app_cdp.pyApp 拾取的 CDP 接管、core/history.py历史记录落库如果觉得有用去 GitHub 点个 Star ⭐ 就是最大的鼓励。欢迎 issue 提需求下一个版本计划做录制回放拾取序列一键生成脚本。关键词自动化测试、元素定位、XPath、CSS 选择器、Selenium、Playwright、Cypress、WebView2、Electron、CDP、测试工具