# web-element-selector

**Repository Path**: infy001/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-05-11
- **Last Updated**: 2025-05-11

## 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. 使用导出按钮将选择内容保存为 CSV、JSON、YAML
8. 使用复制按钮将所有定位器复制到剪贴板
9. 按 ESC 键或点击 X 按钮退出选择器模式


## 开发信息

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

## 许可证

MIT