Playwright Recorder

记录网页操作并生成Playwright代码，支持元素高亮预览

Playwright Recorder Record browser interactions and generate ready-to-run Playwright test code. 记录网页操作并生成可运行的 Playwright 测试代码。 Playwright Recorder is a lightweight browser extension that records your page interactions and automatically generates Playwright test code. No command-line tools, no separate browser window — just click and record in your current browser. Playwright Recorder 是一款轻量级浏览器扩展，能够录制你的网页操作并自动生成 Playwright 测试代码。无需命令行工具，无需打开额外浏览器窗口——在你当前的浏览器中点击即可开始录制。 How to Use / 使用方法: 1. Click the extension icon in the toolbar / 点击浏览器工具栏中的扩展图标 2. Hit "Start Recording" / 点击「开始录制」 3. Interact with the page as you normally would / 正常操作网页 4. Click "Stop Recording" and copy the generated code / 点击「停止录制」，复制生成的代码 Key Features / 核心特性: Smart Selector Generation / 智能选择器生成 Prioritizes semantic Playwright locators for maintainable tests: - getByTestId() → getByRole() → getByLabel() → getByText() → getByPlaceholder() → CSS fallback - Automatically filters out unstable auto-generated IDs and hashed CSS class names 优先使用语义化 Playwright 定位器，确保测试代码可维护： - getByTestId() → getByRole() → getByLabel() → getByText() → getByPlaceholder() → CSS 兜底 - 自动过滤不稳定的自动生成 ID 和哈希 CSS 类名 6 Action Types Supported / 支持 6 种操作类型: - Click / 点击 - Input / 输入 - Dropdown Select / 下拉选择 - File Upload / 文件上传 - Navigation / 页面导航 - Scroll / 滚动 JS & Python Output / 双语言输出 Switch between JavaScript and Python code generation with one click. Toggle concise mode for snippet-only output or full test wrapper mode. 一键切换 JavaScript 和 Python 代码生成。支持简洁模式（仅输出操作语句）或完整模式（包含测试框架包裹）。 Element Highlight Preview / 元素高亮预览 Hover over any recorded action to highlight the corresponding element on the page with a pulsing indicator and selector label. 在录制列表中悬停任意操作，页面上对应的元素会高亮闪烁并显示选择器标签，方便即时确认定位是否准确。 Action Filtering & Editing / 操作过滤与编辑 Filter actions by type (click / input / upload / select / navigate / scroll). Remove individual mistaken actions before copying code. 按操作类型筛选显示（点击/输入/上传/下拉/导航/滚动），支持逐条删除误操作，复制前即可整理好代码。 UI Component Library Support / 国产组件库深度适配 Deep compatibility with custom dropdown components from Semi Design, Ant Design, and Element Plus — correctly generates selectOption actions instead of duplicate clicks. 深度适配 Semi Design、Ant Design、Element Plus 的自定义下拉组件，正确生成 selectOption 操作而非重复点击。 Side Panel Mode / 侧边栏模式 Open the recorder in Chrome's side panel so it doesn't obscure your page content during recording. 在 Chrome 侧边栏中打开录制面板，录制过程不遮挡页面内容。 Why This Instead of Playwright Codegen? / 为什么不用 Playwright 自带的 Codegen？ Playwright's built-in codegen launches a separate browser, requiring you to re-login and set up state from scratch. This extension records directly in your existing browser session — all cookies, login state, and page context are preserved. Just open any page and start recording. Playwright 自带的 codegen 会启动一个全新的浏览器窗口，需要重新登录和配置环境。本插件直接在你已有的浏览器会话中录制——所有 Cookie、登录态、页面上下文完整保留，打开页面即可开始录制。 Permissions Explained / 权限说明: - activeTab: Access the current page to record interactions / 访问当前页面以录制操作 - storage: Save recording state across popup reopenings / 保存录制状态 - scripting: Inject content script for action capture / 注入内容脚本以捕获操作 - host_permissions: Record on any website you visit / 在任意网站上录制 Use Cases / 适用场景: - QA Engineers — Quickly generate test case skeletons / 快速生成测试用例骨架 - Developers — Write E2E tests without manually inspecting DOM / 无需手动检查 DOM 即可编写 E2E 测试 - Non-technical Team Members — Record workflows for developers to convert into tests / 录制操作流程，交由开发转为测试代码 - Automation Enthusiasts — Rapid prototyping of browser automation scripts / 快速原型验证浏览器自动化脚本 Category: Developer Tools Language: English, 中文（简体）