Vite Plugin Playwright Recorder

一个用于在 Vite 开发环境下录制用户操作并生成 Playwright 测试代码的插件。

功能特性

• 🎬 实时录制: 在开发环境下录制用户的鼠标点击、输入、选择等操作
• 🎯 智能选择器: 自动生成优化的 CSS 选择器（优先使用 ID、data-testid 等）
• 📝 自动生成测试: 将录制的操作转换为 Playwright 测试代码
• 🎨 美观UI: 类似 Nuxt DevTools 的浮动工具栏界面
• 🔧 元素选择器: 可视化选择页面元素并获取选择器
• ⚡ 热重载支持: 与 Vite 开发服务器完美集成

安装

npm install vite-plugin-playwright-recorder --save-dev

使用方法

1. 配置 Vite

在 vite.config.ts 中添加插件：

import { defineConfig } from 'vite'
import playwrightRecorder from 'vite-plugin-playwright-recorder'

export default defineConfig({
  plugins: [
    // 其他插件...
    playwrightRecorder({
      port: 3001, // WebSocket 端口，默认 3001
      outputDir: './tests/e2e', // 测试文件输出目录
      testFileName: 'recorded-test.spec.ts' // 测试文件名
    })
  ]
})

2. 启动开发服务器

npm run dev

3. 使用录制功能

1. 在浏览器中打开你的应用
2. 点击右上角的 🎬 图标打开录制面板
3. 点击「开始录制」按钮
4. 在页面上进行操作（点击、输入、选择等）
5. 点击「停止录制」按钮
6. 测试代码将自动生成到指定目录

配置选项

interface PlaywrightRecorderOptions {
  port?: number // WebSocket 服务器端口，默认 3001
  outputDir?: string // 测试文件输出目录，默认 './tests/e2e'
  testFileName?: string // 测试文件名，默认 'recorded-test.spec.ts'
}

功能说明

录制面板功能

• 开始录制: 开始记录用户操作
• 停止录制: 停止记录并生成测试文件
• 清除录制: 清除当前录制的操作
• 选择元素: 可视化选择页面元素并获取选择器

支持的操作类型

• 点击操作: 记录鼠标点击事件
• 输入操作: 记录文本输入
• 选择操作: 记录下拉框选择
• 导航操作: 记录页面跳转
• 滚动操作: 记录页面滚动

选择器生成策略

插件会按以下优先级生成选择器：

1. ID 选择器: #elementId
2. 测试ID: [data-testid="value"]
3. 唯一类名: .unique-class
4. CSS 路径: div > .container > button:nth-child(2)

生成的测试代码示例

import { test, expect } from '@playwright/test';

test('recorded test', async ({ page }) => {
  await page.goto('http://localhost:3000');

  await page.click('#login-button');
  await page.fill('[data-testid="username"]', 'testuser');
  await page.fill('[data-testid="password"]', 'password123');
  await page.click('.submit-btn');
});

注意事项

1. 该插件仅在开发环境下工作（apply: 'serve'）
2. 确保 WebSocket 端口（默认 3001）未被占用
3. 录制时会阻止某些默认事件以避免干扰
4. 生成的测试代码可能需要根据实际情况进行调整

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

v1.0.0

• 初始版本发布
• 支持基本的操作录制功能
• 提供美观的 UI 界面
• 自动生成 Playwright 测试代码