Playwright Recorder

About

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, 中文（简体）