Playwright Pom Generator

# Playwright POM Generator Chrome Extension

一个基于 AI 的 Chrome 浏览器插件，能够自动分析网页结构或选定元素，生成符合 POM（Page Object Model）规范的 Playwright Python 代码。

## ✨ 核心功能

- **🤖 双模 AI 支持**：
- **Dify 工作流**：支持自定义 Dify Agent/Workflow，灵活处理复杂逻辑。
- **OpenAI 直连**：直接连接 OpenAI 接口（或兼容接口），开箱即用。
- **🎯 两种分析模式**：
- **全页分析**：一键分析当前页面所有关键交互元素。
- **精准拾取 (Pick Mode)**：按住 `Ctrl/Cmd` 点击页面特定区域，仅生成该区域的 POM 代码。
- **🔍 智能定位策略**：
- 优先使用 `data-testid`, `role`, `label`, `placeholder` 等稳定属性。
- 自动生成链式定位 (`filter`) 处理复杂结构。
- 遵循 Playwright 最佳实践，避免脆弱的 XPath 或 CSS Selector。
- **📝 代码生成**：
- 自动生成 Page Class 类结构。
- 包含类型提示 (Type Hints) 和详细注释。
- 自动生成常用的组合操作方法（如表单填充、搜索、登录）。
- **⚙️ 高度可配置**：
- 自定义系统提示词 (System Prompt) 和用户提示词模板。
- 可调节请求超时时间。
- 历史记录管理（自动保存最近的分析结果）。
- **💻 侧边栏体验**：
- 独立的侧边栏界面，不遮挡页面内容。
- 代码高亮显示，支持一键复制。

## 📦 安装方法

1. **下载源码**：克隆或下载本项目到本地。
2. **打开扩展管理**：在 Chrome 浏览器地址栏输入 `chrome://extensions/`。
3. **开启开发者模式**：点击右上角的"开发者模式"开关。
4. **加载扩展**：点击"加载已解压的扩展程序"，选择本项目文件夹。

## ⚙️ 配置指南

首次使用前，请点击插件侧边栏底部的 **"设置"** 按钮进行配置。

### 1. AI 模型配置

插件支持两种 AI 接入方式，任选其一即可：

#### 方式 A：Dify 工作流
适合需要自定义处理逻辑的场景。
- **Base URL**: Dify API 的基础地址 (例如 `https://api.dify.ai/v1`)。
- **API Key**: Dify 应用的 API 密钥。

**Dify 输入变量要求**：
工作流需接收以下输入变量：
- `html_content`: 页面 HTML 代码（插件会自动精简）。
- `current_url`: 当前页面 URL。
- `page_title`: 页面标题。
- `page_info`: 页面结构摘要信息。

#### 方式 B：OpenAI 协议
适合直接使用 GPT-4 等模型。
- **Base URL**: OpenAI API 地址 (例如 `https://api.openai.com/v1` 或其他兼容代理地址)。
- **API Key**: OpenAI API Key。
- **Model**: 模型名称 (推荐 `gpt-5-codex` 或 `claude-sonnet-4.5` 以获得最佳代码质量)。

### 2. 高级设置
- **提示词设置**：你可以修改系统提示词和用户提示词模板，定制生成的代码风格。
- **超时设置**：针对大型页面，可适当增加请求超时时间（默认 30秒）。
- **历史记录**：设置保留的历史记录条数。

## 🚀 使用说明

### 模式一：全页分析
1. 打开目标网页。
2. 点击浏览器工具栏的插件图标打开侧边栏。
3. 点击 **"分析页面"** 按钮。
4. 等待 AI 分析完成，生成的代码将显示在下方。

### 模式二：精准拾取 (Pick Mode)
当页面内容过多，或者你只需要某个区域（如一个表单、一个弹窗）的代码时：
1. 点击侧边栏的 **"拾取元素"** 按钮。
2. 移动鼠标到页面上，目标区域会高亮显示。
3. 按住 **`Ctrl`** (Windows) 或 **`Command`** (Mac) 键，同时 **点击** 目标区域。
4. 插件将仅分析选中的 HTML 片段并生成代码。
5. 按 `Esc` 键可退出拾取模式。

### 历史记录
- 点击侧边栏顶部的 **"历史记录"** 标签页。
- 可以查看、复制代码或删除之前的分析记录。

```

## 📄 常见问题

**Q: 生成的代码不准确？**
A: 尝试在设置中优化 "用户提示词"，或者切换更强的模型（如 GPT-5-codex）。对于复杂页面，建议使用 "精准拾取" 模式分块生成。

**Q: 提示 "HTML 内容过长"？**
A: 插件内置了 HTML 精简算法，但某些页面仍然可能过大。建议使用 "精准拾取" 模式只分析必要区域。