虾仁Xpath-CSS

虾仁Xpath-Css插件 是一款复杂且用户友好的浏览器扩展，专为需要精确识别并生成任何网页元素的 XPath 和 CSS 选择器而设计的网页开发者、测试人员和自动化工程师。它提供了高度互动且高效的方式，用于选择DOM元素，并创建对Selenium、Cypress、Playwright或任何浏览器自动化脚本等自动化测试框架至关重要的强大简洁路径。

该扩展在元素突出和定位能力方面表现出色，适用于包括对视帧在内的复杂场景，解决跨帧元素位置问题。Windows 用户可以通过悬停并点击目标元素时按 Ctrl 来激活元素选择，而 MacOS 用户则使用 Cmd 键组合。一旦选中元素，虾仁Xpath-Css 会用半透明覆盖层视觉化高亮该元素，同时在工具提示中显示简化的 XPath 和 CSS 路径标签。这种即时的视觉反馈简化了识别过程。

虾仁Xpath-Css 支持多维 XPath 生成，通过生成七类不同类别的 XPath 表达式来生成所选元素：

1. 绝对路径：完整的层级路径，表示元素的位置（例如 /html/body/div[2]/div），提供完整的层级引用，但由于脆弱性，通常不推荐用于自动化。

2. 基于ID的定位器：在有时使用元素的唯一ID属性（例如，//div[@id=“main-content”]）进行精确匹配。

3. 基于类的匹配：利用一个或多个 CSS 类（例如 //div[contains（@class，“content-box”）]）实现灵活且部分的匹配。

4. 基于属性的选择：通过任意特定属性和值匹配元素（例如 //a[@href=“/about”），同时支持事件属性。

5. 文本内容匹配：使用精确或部分文本匹配（例如 //span[text（）=“Login”] 或前 5 字符匹配），有助于通过文本内容识别元素。

6. 位置索引：基于兄弟顺序（例如，（//li）[3]）定位元素，以精准定位重复结构中的元素。

7. 智能优化路径：自动生成最短的唯一XPath，可靠识别元素，排除易发性或动态属性。

该扩展提供两种显示模式用于选择器生成和展示：

- 基础模式：仅提供智能优化的XPath，注重快速检索和最小杂乱。

- 全模式：将所有七种XPath类型同时显示，若基本模式无结果则自动切换，涵盖复杂或动态网页结构。

一个关键功能是实时输入XPath验证。用户可以手动在搜索框中输入XPath表达式，虾仁Xpath-Css 会即时高亮网页上的匹配元素，显示匹配节点的数量，并验证表达式的有效性。这种交互式验证帮助用户精细选择器并快速定位相关元素，例如输入 //button[contains（text（），“提交”）即可立即高亮所有匹配的按钮。

该扩展自动保存最近的选择、匹配结果和模式设置，支持交叉表状态恢复功能。

用户便利性通过简化的弹出界面和直观的剪贴板作得到强调。只需点击任何生成的XPath或CSS选择器旁的“复制”按钮，选择器就会被复制到剪贴板上，并附带“复制！”确认提示。复制后，扩展会自动填充选择器进入 XPath 搜索框，并立即触发搜索，自动在页面上高亮该元素进行验证。该扩展支持键盘快捷键，包括回车键搜索和退格键清除当前输入，进一步加快工作流程。工具栏图标的外观可切换样式——橙色代表活跃模式，灰色表示非活跃模式——帮助用户快速识别其状态。

虾仁Xpath-Css 的响应式用户界面使用 Tailwind CSS 作为弹窗界面，能够无缝适应不同浏览器窗口大小和屏幕尺寸。XPath列表按选择器类型分组，每个条目都配有描述性工具提示，解释所采用的策略（例如，“基于父元素的类名和相对层级”），提升了可读性和可学性。此外，还会有一个小型白色提示面板，提供有用的关键词和使用技巧，帮助用户打造更优质的选择器。

总之，虾仁Xpath-Css 结合了精准、多功能和易用性，打造出一个注重隐私的扩展，只需最低权限（标签页和活跃页面访问）。它使专业人员能够为复杂的DOM环境创建稳定且可重复使用的选择器，提升自动化可靠性，并提高测试效率。无论是快速的临时元素路径提取还是深入结构分析，虾仁Xpath-Css 都为网络自动化专家提供了不可或缺的工具包。

主要特色：
- 交互式元素高亮和选择，由 Ctrl（Windows）或 Command（MacOS）触发，带有半透明的视觉覆盖。
- 多维XPath生成，提供七种XPath表达式，以应对多种场景，包括绝对、基于ID、基于类别、基于属性、文本内容匹配、位置和智能优化路径。
- 双显示模式：基础模式用于快速优化的XPath，以及全模式，显示所有XPath变体并自动备份。
- 实时XPath输入验证，实时匹配高亮和计数显示在当前网页上。
- 自动存储和持久保存最近选球、匹配数据及模式设置，实现无缝的交叉表连续性。
- 对边缘情况如内部页面、about：blank和跨域iframe的稳健处理，并带有错误通知和退回机制。
- 一键复制到剪贴板功能，具备即时自动填充和搜索框激活高亮功能，方便快速验证。
- 响应式且干净的弹出界面，采用Tailwind CSS，显示有序的XPath列表，附有说明工具提示和使用提示。
- 支持键盘快捷键，用于搜索激活（回车）和清空输入（退格键）。
- 注重隐私的最小权限，确保不收集个人数据。

工作原理：
1. 从浏览器扩展商店安装 虾仁Xpath-Css，并将其pin在工具栏上。
2. 打开任何你想识别或生成 XPath/CSS 选择器的网页。
3. 点击扩展图标以打开弹出界面。
4. 按住Ctrl（Windows）或Cmd（MacOS），并将鼠标悬停在元素上以高亮候选元素。
5. 按住激活键时点击元素;扩展生成 多个XPath和CSS选择器，突出显示目标。
6. 在基础模式和完整模式之间切换，查看优化或全面的XPath选项。
7. 在搜索框中使用手动XPath输入以验证表达式，并查看实时匹配结果和亮点。
8. 点击任意选择器旁的复制按钮，将其复制到剪贴板;扩展号会自动填充并重新高亮以确认。
9. 使用键盘快捷键（Enter 用于搜索，退格键清除），并观察图标状态中的激活/非激活状态。

隐私：- 不收集个人数据。