Playwright 这个测试软件现在的运行环境是 Node JS 去操控前端的浏览器。我想开发一个前端库，运行在浏览器上， 需要对齐以下目标：
- 需要覆盖页面操作的所有API， 用法与官方一致。 Locator, 断言， 页面事件的触发，鼠标键盘操作，注入脚本等是必须要具备的。 触发事件时，要接近真实的事件，比如鼠标点击，先产生pointevent,然后mousedown, mouseup事件，最后click事件， 类似这种事件要模拟真实环境来触发。 估计playwright源码中也是类似来实现的。
- 不需要它的配置，启动与 Browser,BrowserServer等API， 因为这个库会直接在页面执行，直接可以获得当前页面
- 网络请求的拦截和模拟，如果前端可以就实现。 截图与截图比较的功能，如果前端可以做就实现
- 页面元素的Role信息，不知道仅通过页面上，能否获得，还是必须得有扩展或者CDP协议才能获得。 如果从页面上无法获取准确的role信息， 那就做一个模拟版本，可以通过标签名或属性来动态识别。
- 定时器使用真实的定时器即可，无须模拟定时器或 模拟 Clock
复刻完 这个库之后，我目前写的众多的playwright脚本就可以用它在页面运行了，比如
import { test, expect } from 'browser-playwright'
test('弹窗的事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('modal#modal-event')
const content = page.locator('.is-message')
await page.getByRole('button', { name: '打开带事件弹窗' }).first().click()
await expect(content).toHaveText(/show 事件触发了/)
})
这样，它就可以无缝的嵌入 vue， react等前端项目中。 然后我需要一个运行函数runScript，它无框架依赖，接收脚本，然后可以逐行执行script脚本， 每执行一步就触发一下事件，告知外界它的当前执行的位置
function runScript( script: string){
}最后，还需要一个Vue组件，使用runScript 这个函数，这个组件的script属性接收一个脚本字符串，然后在浏览器上浮动一个UI界面，中间是当前执行的代码下，旁边有有播放，单步，下一步，暂停等按钮。 类似一个调试功能的设计。 这样，我有这个vue组件的话，就可以在前端工程中悬浮一个页面级的自动测试工具了。 传入一段测试脚本，它就能执行，断言成功或失败，都可以从界面上看到。 执行结束，还有和playwright测试结束后一致的测试结果， 多少个成功，多少个失败这样的结果 。
playwright-main 文件夹是截止到2026.7.23号的playwright的官方源码。 你可以参考它的实现，但禁止修改文件夹内容。
在根目录要生成一个 AGENT.md， 记录这个仓库的开发规范。
工程代码在 browser-playwright/ monorepo（pnpm + Vite+）。环境要求：Node.js >= 22.18、pnpm 11+。
# 进入 monorepo
cd browser-playwright
# 安装依赖
pnpm install
# 或：vp install
# 构建全部包（core / browser-playwright-vue / site）
pnpm build
# 启动演示站（apps/site）
pnpm dev浏览器打开终端里提示的本地地址（一般为 http://localhost:5173）。页面右下角有浮动调试面板，可对 README 同类脚本做播放 / 暂停 / 单步 / 停止。
| 命令 | 说明 |
|---|---|
pnpm install |
安装 workspace 依赖 |
pnpm build |
构建所有包 |
pnpm dev |
启动 apps/site 演示（已 alias 到源码，改库可 HMR） |
pnpm --filter site accept |
无头验收 README 脚本（getByRole → click → toHaveText） |
pnpm ready |
全量校验（check + test + build） |
单独构建某个包：
pnpm --filter browser-playwright build # packages/core
pnpm --filter browser-playwright-vue build # Vue 调试组件
pnpm --filter site build # 演示站生产构建