虾仁Xpath-CSS

选择页面元素并生成对应Xpath、CSS路径，Windows系统使用 Ctrl + 鼠标悬浮并点击生成，Mac系统使用 Command + 鼠标悬浮并点击生成 - 虾仁

## 用途： 前端调试效率提升：一键生成任意元素的精确 XPath，无需手动编写或复杂选择器，加速页面元素定位与测试。 自动化测试脚本编写：为 Selenium、Playwright等自动化工具快速提供定位表达式，减少编写和维护成本。 ## 功能特点： 1、元素高亮与定位：激活插件后，Windows系统下按下Ctrl键并点击页面元素，Mac系统下按下Shift键并点击页面元素，插件会以半透明遮罩高亮目标元素，同时在提示框中显示元素标签名与简化 XPath 路径，支持在 iframe 嵌套场景中自动适配元素位置，解决跨框架元素定位问题。 2、多维度 XPath 生成：针对选中元素生成 7 类 XPath 表达式，包括： 2.1 绝对路径（如/html/body/div[2]/div），虽不建议使用但提供完整层级参考； 2.2 基于 ID 定位（如//div[@id="main-content"]），利用唯一 ID 精准匹配； 2.3 类名匹配（如//div[contains(@class,"content-box")]），支持多类名组合与部分匹配； 2.4 属性定位（如//a[@href="/about"]），可基于任意非事件属性生成； 2.5 文本内容匹配（如//span[text()="登录"]），支持完整文本与前 5 字符模糊匹配； 2.6 层级位置路径（如(//li)[3]），通过兄弟元素排序定位； 2.7 智能优化路径（如//div[@class="card"]/h3），自动生成最短唯一路径。 3、双模式显示控制： 3.1 基础模式：仅展示智能优化的 XPath，过滤冗余信息，适合快速获取可用路径； 3.2 完整模式：展示所有 7 类 XPath，当基础模式无结果时自动切换，满足复杂场景需求。 4、实时搜索验证：支持手动输入 XPath 表达式，插件会实时搜索页面匹配元素，显示匹配数量并高亮结果，帮助用户验证路径有效性，例如输入//button[contains(text(),"提交")]可快速定位相关按钮。 5、数据持久化存储：自动保存最近选中元素的 XPath 数据、匹配结果及模式设置，支持跨标签页恢复上次操作状态，避免重复操作。 6、兼容性与错误处理： 6.1 自动检测 浏览器内部页面、about:blank 等不兼容场景并显示错误提示； 6.2 处理跨域 iframe 元素时，自动生成包含框架路径的 XPath（如//iframe[1]//div）； 6.3 对无效 XPath 表达式进行异常捕获，避免插件崩溃。 7、便捷交互设计： 7.1 点击复制按钮一键复制 XPath 到剪贴板，伴随 "Copied!" 提示，自动填充Xpath至搜索输入框 触发主动搜索，并使页面定位到的元素高亮； 7.2 支持回车键触发搜索，重置按钮清空当前操作； 7.3 工具栏图标随插件激活状态切换样式，橙色表示激活，灰色表示关闭。 8、响应式界面：弹窗采用 Tailwind CSS 布局，适配不同浏览器窗口尺寸，XPath 列表按类型分组展示，每个路径附带描述说明（如 "使用父元素类名与相对层级匹配"），提升可读性。 ## 安装说明： 方法一：从 Chrome 应用商店安装（推荐） 打开 Chrome 浏览器，访问 XPath 生成器插件页面。 点击「添加至 Chrome」按钮。 在弹出的确认对话框中，点击「添加扩展程序」。 安装完成后，浏览器右上角会出现插件图标（通常是一个 XPath 标识）。