点一下就能拿到唯一 CSS 选择器finder 快速上手指南【免费下载链接】finderCSS Selector Generator 项目地址: https://gitcode.com/gh_mirrors/fin/finder写自动化测试时你有没有被这一步卡住过页面上有一排长得一样的按钮手动敲选择器要数半天层级还怕选重了误点别的finder 是一个 CSS 选择器生成器指向任意一个 DOM 元素它自动在整页里搜出一条最短、且全页唯一的选择器直接交到你手上。它凭什么比手写选择器省心最短选择器不再叠罗汉手写时你往往会顺着 DOM 一路写下去div.container div:nth-child(2) button这种长链条既难读又难维护。finder 会从多个方向搜索候选路径最后只留下最短的那条README 里给出的例子是.blog article:nth-of-type(3) .add-comment一眼能看清元素在哪儿。唯一全页只命中一个它的测试套件会对页面上每个元素生成选择器再用 querySelectorAll 验证命中数量恰好为 1用例见 tests/ 目录还盖了 GitHub、Stripe、Google 首页的真实页面快照。页面里三个下一步按钮并存时你拿到的选择器只会指向其中一个测试脚本不会因为选错元素而误报通过。稳不瞎用动态类名也不会卡死finder 默认只接受词形的类名、id 和>npm install medv/finder然后在页面上挂一个点击监听哪个元素被点到就为它生成选择器import { finder } from medv/finder document.addEventListener(click, (event) { const selector finder(event.target) console.log(selector) })运行后你会看到 点哪里控制台就打印哪里的选择器比如.blog article:nth-of-type(3) .add-comment把这段字符串丢回 querySelector拿到的正是你刚点的那个元素。如果页面很大或者你只关心某个容器内部把搜索范围和超时时间限一下即可finder(event.target, { root: document.querySelector(#app), timeoutMs: 1000, })className、attr、idName 都是可替换的过滤器函数。比如你的框架会给元素批量挂data-scope-前缀的属性包一层默认的 attr 函数把这类属性加进白名单就行。谁在用它两类最典型的使用者端到端测试工程师。写 Playwright、Cypress 这类脚本时选择器就是命脉写长了难维护写短了又不唯一。finder 给出的短且唯一的选择器适合直接粘进测试用例里元素挪个位置也不会像纯类名选择器那样整段失效。浏览器扩展开发者。扩展的体积预算向来紧张finder 压缩后只有 1.5kb塞进去几乎没有负担。右键菜单里加一个复制此元素选择器用户反馈问题时就能自动把定位信息带回来配置项还能让它适配各种框架的动态命名。开始用它finder 的定位很简单一个够小、够快、保证唯一的 CSS 选择器生成器。现在就可以装好它在自己负责的页面上随便点一个按钮看看控制台吐出什么选择器如果它省了你写测试的时间记得去代码仓库点个 Star顺手也可以翻翻 finder.ts 里那段候选路径搜索是怎么做的。【免费下载链接】finderCSS Selector Generator 项目地址: https://gitcode.com/gh_mirrors/fin/finder创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考