# web-element-selector

**Repository Path**: lf521/web-element-selector

## Basic Information

- **Project Name**: web-element-selector
- **Description**: 一个专注于Web元素选择的开源工具，支持一键获取页面元素。快速定位和交互，适用于自动化测试、网页抓取等场景。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2025-12-29
- **Last Updated**: 2025-12-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web Element Selector Chrome Extension

一个支持一键获取网页元素 Chrome 扩展，助你高效捕获网页元素并获取最佳定位器策略。

![示例图片](image.png)

## 功能特点

- 悬停高亮并点击选择网页任意元素
- 自动显示每个元素的多种定位器（推荐定位器、ID、Tag Name、Class Name、CSS、XPath、Link Text、Name）
- 在悬浮面板中记录已选择的元素
- 支持录制/非录制模式切换
- **支持一键自动获取页面所有可交互元素**，并自动批量选中、编号和展示定位器
- 支持导出所选元素为 CSV、JSON、YAML 格式
- 一键复制所有定位器到剪贴板
- 生成稳健且唯一的推荐定位器

## 定位器策略

本扩展为每个元素生成多种定位器，优先级如下：

1. **推荐定位器**：优先使用语义属性、唯一文本、结构化CSS，若无则自动递归生成唯一结构选择器，确保100%唯一
2. **ID**: 首选策略，如果元素有 ID 属性
3. **Tag Name**: 标签名
4. **Class Name**: 只使用有意义的类名
5. **CSS**: 简化的 CSS 选择器
6. **XPath**: 优化的相对路径 XPath
7. **Link Text**: 链接文本
8. **Name**: name 属性

## 安装方法

1. 下载或克隆此仓库
2. 打开 Chrome 浏览器，访问 `chrome://extensions/`
3. 启用"开发者模式"
4. 点击"加载已解压的扩展程序"并选择 `web-element-selector` 文件夹

## 使用方法

1. 导航到任意网站
2. 点击浏览器工具栏中的 Web Element Selector 扩展图标
3. 页面右上角会出现悬浮面板，显示当前 URL
4. 鼠标悬停在元素上会高亮显示，并显示可用定位器
5. 点击元素将其选中并添加到面板
6. 可切换录制/非录制模式
7. **点击"一键获取元素"按钮，可自动批量选中页面所有可交互元素（如按钮、链接、输入框等），并依次编号和展示所有定位器**
8. 使用导出按钮将选择内容保存为 CSV、JSON、YAML
9. 使用复制按钮将所有定位器复制到剪贴板
10. 按 ESC 键或点击 X 按钮退出选择器模式



## 开发信息

本扩展使用纯 JavaScript、HTML 和 CSS 构建，无需其他依赖。

## 许可证

MIT 许可协议

版权所有 (c) 2025

特此免费授予任何获得本软件及相关文档文件（"软件"）副本的人员无限制地处理本软件，包括但不限于使用、复制、修改、合并、出版、分发、再许可和/或销售本软件的副本，并允许向其提供本软件的人员也这样做，但须符合以下条件：

上述版权声明和本许可声明应包含在本软件的所有副本或重要部分中。

本软件是"按原样"提供的，不附有任何明示或暗示的担保，包括但不限于对适销性、特定用途适用性和非侵权性的担保。在任何情况下，作者或版权持有人均不对因本软件或本软件的使用或其他交易而产生的任何索赔、损害或其他责任承担责任，无论是在合同诉讼、侵权或其他方面。