编写自动化测试、网络爬虫或书签工具意味着编写选择器——但为特定元素找出稳定的唯一选择器很繁琐。您打开 DevTools、检查、右键单击、复制选择器，并希望结果实际上是唯一且稳定的。DOM 路径查找器使这成为一次单击。激活该工具并悬停页面上的任何元素——当您移动时它以紫色突出显示。单击以锁定它，面板将填充四种选择器格式：唯一的基于路径的 CSS 选择器、短选择器（标记+类或 id）、绝对 XPath 和准备粘贴到脚本中的预包装 document.querySelector('...') 片段。锁定后，您可以使用父/第一个子元素/上一个兄弟/下一个兄弟按钮导航 DOM 树而不会失去焦点。data-testid 属性在出现时被检测并优先化——理想用于使用它们作为锚点的 Playwright/Cypress。该工具还显示标记、id、类、边界大小和显示/位置属性以获得快速上下文。
将鼠标移到页面上方以查看元素以紫色突出显示。单击以锁定——无需 DevTools 检查器。
唯一的 CSS 路径、短选择器、绝对 XPath 和包装的 querySelector 片段。选择适合您工具的任何内容。
锁定后，使用父/第一个子元素/上一个/下一个按钮在不重新拾取的情况下移动 DOM。
每个选择器都有自己的复制按钮。获取您的脚本需要的格式并直接粘贴到您的测试或爬虫中。
显示标记、id、类、大小、显示和位置——无需重新检查的快速概览。
如果元素有 id，唯一的 CSS 使用 #id。如果存在 data-testid，它会浮出来供 Playwright/Cypress 使用。
选择被测元素，复制其选择器，并粘贴到您的测试代码中——不再猜测唯一的路径。
为爬取目标上的列表项查找结构选择器。根据稳定性需要使用短选择器或基于路径的选择器。
锁定一个元素并复制其路径以调查为什么 CSS 不适用——唯一的选择器显示元素的完整树位置。
将预包装的 document.querySelector(...) 片段直接复制到 DevTools 控制台以进行快速交互式调试。
在审计可访问性时，使用 XPath 将元素提供给 axe-core 或其他期望 XPath 参考的 a11y 工具。
单击 DevSuite Pro 停靠栏中的路径查找器图标。该工具立即在拾取模式下激活。
将鼠标移到页面上——当您通过每个元素时它以紫色突出显示。根据需要滚动以找到您的目标。
单击您想要的元素。拾取器停止，面板填充选择器格式、上下文和复制按钮。
使用父/子/兄弟按钮细化选择，或单击拾取元素以再次开始悬停拾取。
单击您需要的格式旁边的复制（CSS、XPath 或 querySelector）。直接粘贴到您的测试、爬虫或控制台中。
