Overview
Auto-generate Playwright POM Python code from web pages using AI
# 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 精简算法，但某些页面仍然可能过大。建议使用 "精准拾取" 模式只分析必要区域。
Details
- Version1.0.1
- UpdatedDecember 10, 2025
- Offered byrayel_zz
- Size528KiB
- Languages中文（中国）
- Developer
Email
914660773@qq.com - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.
Privacy
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
