# @dnvgl/playwright-live-recorder 中文文档

规范地址：https://npmcn.com/package/%40dnvgl/playwright-live-recorder/

版本：2\.0\.72
npm 元数据更新时间：2025-08-14T10:10:38.971Z
中文译文更新时间：2026-11-12T13:31:47.732Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dnvgl/playwright-live-recorder
原文对照：https://npmcn.com/package/%40dnvgl/playwright-live-recorder/?lang=original
源码仓库：https://github.com/dnv-opensource/playwright-live-recorder

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：77.1 kB，26 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：7 个
- 首次发布：2022-09-16T21:54:52.940Z
- 最新版本发布：2025-08-14T10:10:38.702Z
- 近 30 天下载量：3965（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：63（近 12 个月 0 个）

## 中文简介

在运行测试时从浏览器控制台测试上下文时添加活编码. 提供可方案配置的记录器。 引入关于页面对象模型的强有力公约的想法

## 安装

```sh
npm install @dnvgl/playwright-live-recorder
```

也可以使用：`pnpm add @dnvgl/playwright-live-recorder`、`yarn add @dnvgl/playwright-live-recorder`、`bun add @dnvgl/playwright-live-recorder`

## README

![Playwright live recorder infographic](https://npmcn.com/package/%40dnvgl/playwright-live-recorder/docs/playwright-live-recorder-infographic.png "Playwright live recorder infographic")

# 开始

## 观看视频演示

[![Getting Started](https://i.ytimg.com/vi/ys5vczHm9sw/maxresdefault.jpg)](https://youtu.be/ys5vczHm9sw)

* * *

## 先决条件

`@playwright/test` (类型)

首先使用 @ playwright/ test 设置重播, 如果从新重播开始 [https://playwright.dev/docs/intro (英语)](https://playwright.dev/docs/intro)

## 安装

```bash
npm install -D @dnvgl/playwright-live-recorder
#or
yarn add -D @dnvgl/playwright-live-recorder
#or
pnpm add -D @dnvgl/playwright-live-recorder
```

运行设置脚本

```bash
npx @dnvgl/playwright-live-recorder
```

确保将 baseURL 设置到您的网络应用的根 URL `playwright.config.ts` 譬如说.

```ts
//playwright.config.ts
export default defineConfig({
  //...
  use: {
    baseURL: 'https://demo.playwright.dev/todomvc/#/',
    //...
```

# 如何使用

## 测试的打字码

在剧作家测试中, 添加导入

```ts
import { PlaywrightLiveRecorder } from '@dnvgl/playwright-live-recorder';
```

然后在您想要录制的剧作家测试结束时添加此等待行

```ts
// note - recorded lines will be inserted here
await PlaywrightLiveRecorder.start(page, s => <undefined>eval(s));
```

以标题模式运行测试

> 如果您正在使用 vscode 插件 `ms-playwright.playwright` 它将自动以标题模式运行,其中PWDEBUG设置为控制台(见修改 `.vscode/settings.json`(中文(简体) )  
> 如果您正在运行命令行, 请设置环境变量 `PWDEBUG=console` 在运行剧作家命令之前,例如. `playwright test --ui`

测试会运行, 当 `PlaywrightLiveRecorder.start` 已执行的 lib 功能将暴露在浏览器中,所有脚本将载入浏览器中。 测试执行等待浏览器关闭.  
新录入的测试行被插入到测试文件中.  
将创建新添加的页面对象模型文件,将新添加的项目插入页面对象模型文件.  
以上新增加或修改的试验线 `PlaywrightLiveRecorder.start` 在保存文件时执行.

## 浏览器

> ![Playwright live recorder sticky bar](https://npmcn.com/package/%40dnvgl/playwright-live-recorder/docs/control-bar.png "Playwright live recorder sticky bar")  
> Playwright活录器在浏览器页面上方增加了一个控制栏.
> 
> -   记录模式QQ/QQ可以通过点击图标来切换/ 打开, 或者按下 CTRL+ALT+SHIFT+R
> -   标签是页面对象模型路径+文件名
> -   f(x) 按钮显示您页面对象模型文件中可用的公共帮助功能, 单击绿色 qq, 在文件中添加示例
> 
> 当记录被切换在悬浮工具提示上时, 位置位于显示将生成的代码的光标旁边
> 
> > 如果录制器屏蔽了您的测试会话, 工作通过将记录调出, 点击, 然后重新调出

## **记录**

> 正在切换记录, 请单击一个元素将其添加到测试中
> 
> -   如果元素不是Page对象模型的一部分,则会提示您给它一个名称
>     -   按下输入后,新属性将添加到页面对象模型文件,元素会突出显示(默认:鲑鱼颜色),以表示它是页面对象模型的一部分
>     -   按 \[esc\] 跳过添加到页面对象模型
> -   如果元素是 Page 对象模型的一部分, 它将会被突出显示为沙门颜色
>     -   点击它会在测试的页面对象模型方法中添加一个调用
> 
> 在点击元素后, 测试代码将被添加并保存到您的测试文件中 。 文件更改会自动被重新执行.  
> 您总是可以修改文本代码并保存以重新执行已修改的行.
> 
> > 这对修改一个 `.click()` 呼叫一个 `.fill()`,或包起来 `expect` 围绕您刚刚点击的元素。 保存文件并重新执行. 另一个强大的工作流程是编辑页面对象模型函数,保存文件,然后在测试文件中再添加同一行来强制重执行 在函数执行正确之前,您可以一直这样延时.
> 
> 当测试中执行代码行时,它们会在屏幕上显示覆盖 ![code execute overlay](https://npmcn.com/package/%40dnvgl/playwright-live-recorder/docs/code-execute-overlay.png "code execute overlay")

## 常见问题

### @dnvgl/playwright-live-recorder 是什么？

在运行测试时从浏览器控制台测试上下文时添加活编码\. 提供可方案配置的记录器。 引入关于页面对象模型的强有力公约的想法

### 如何安装 @dnvgl/playwright-live-recorder？

在项目目录运行 npm install @dnvgl/playwright-live-recorder，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 playwright-live-recorder，可以用 npx playwright-live-recorder 直接运行。

### @dnvgl/playwright-live-recorder 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/dnvgl\_\_playwright-live-recorder 是否存在。

### @dnvgl/playwright-live-recorder 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @dnvgl/playwright-live-recorder 可以商用吗？

@dnvgl/playwright-live-recorder 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dnvgl/playwright-live-recorder 的下载量有多少？

根据 npm 官方下载统计，@dnvgl/playwright-live-recorder 在 2026/10/13 – 2026/11/11 这 30 天内被下载 3,965 次，日均约 132 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dnvgl/playwright-live-recorder 还在维护吗？

最新版本 2\.0\.72 发布于 2025/08/14（1\.2 年前）；至今共发布 63 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/09/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。