# @cypress/chrome-recorder 中文文档

规范地址：https://npmcn.com/package/%40cypress/chrome-recorder/

版本：2\.3\.1
npm 元数据更新时间：2023-04-19T19:41:03.124Z
中文译文更新时间：2026-11-11T07:31:02.135Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40cypress/chrome-recorder
原文对照：https://npmcn.com/package/%40cypress/chrome-recorder/?lang=original
项目主页：https://github.com/cypress-io/cypress-chrome-recorder#readme
源码仓库：https://github.com/cypress-io/cypress-chrome-recorder

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

- 包体积（解压后）：23.4 kB，14 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：7 个
- 首次发布：2022-04-12T17:37:49.545Z
- 最新版本发布：2023-04-19T19:41:02.935Z
- 近 30 天下载量：5094（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 0 个）

## 中文简介

从 Chrome DevTools 录制生成 Cypress 测试

## 安装

```sh
npm install @cypress/chrome-recorder
```

也可以使用：`pnpm add @cypress/chrome-recorder`、`yarn add @cypress/chrome-recorder`、`bun add @cypress/chrome-recorder`

## README

# @ cypress/ chrome- 记录器

[![npm version](https://img.shields.io/npm/v/@cypress/chrome-recorder)](https://www.npmjs.com/package/@cypress/chrome-recorder) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

此 repo 提供了导出 Cypress 测试的工具 [Google Chrome DevTools 的录音](https://goo.gle/devtools-recorder) 在方案方面.

安装 [Cypress Chrome 录音机扩展名](https://github.com/cypress-io/cypress-recorder-extension) 如果您想直接从 Chrome DevTools 的录音机 UI 中导出录音.

[![Cypress Chrome Recorder Demo](https://img.youtube.com/vi/-RJuZrq-wOk/0.jpg)](https://youtu.be/-RJuZrq-wOk)

## 先决条件

要从 Chrome DevTools Recorder 中导出 JSON 文件, 您需要使用 Chrome 101 或 更新 .

`dblClick` 财务报告和审定财务报表 `rightclick` 要求Chrome 103或更新.

## 安装

```sh
$ npm install -g @cypress/chrome-recorder
```

## 使用量

### 通过 CLI

要使用交互式 CLI, 运行 :

```sh
$ npx @cypress/chrome-recorder
```

CLI 将提示您输入您想要修改的目录或文件的路径, 以及写入生成的 Cypress 测试的路径 .

如果您喜欢通过 CLI 进入路径, 您可以运行以下命令导出单个录音 :

```sh
$ npx @cypress/chrome-recorder <relative path to target test file>
```

或包含多段录音的文件夹:

```sh
$ npx @cypress/chrome-recorder <relative path to target test folder>/*.json
```

默认输出会写入到 `cypress/integration` 倒计时 `cypress/e2e`。如果没有这些文件夹,请手工创建这些文件夹,或通过运行安装 Cypress `yarn add -D cypress` 或者说 `npm install --save-dev cypress` 在你的项目.

如果您喜欢不同的输出目录, 请指定通过 CLI :

```sh
$ npx @cypress/chrome-recorder <relative path to target test folder>/*.json --output=folder-name
```

或者通过交互的 CLI 提示.

### CLI 选项

| 选项 | 说明 |
| --- | --- |
| \-f, --部队 | 绕行 进行安全检查并迫使出口商运行 |
| \-d --干 干 干 -干 干 | 干运行( 文件没有更改) |
| \-哦, -- 产出 | 输出出口商生成的文件位置 |
| \-p, -- 印记 | 打印已转换的文件到 stdout, 用于开发 |

### Via 导入

```js
import { cypressStringifyChromeRecording } from '@cypress/chrome-recorder';

const stringifiedContent = await cypressStringifyChromeRecording(
  recordingContent
);

return stringifiedContent;
```

## 支持的 Chrome 记录器步骤类型

以下是目前支持的步数类型:

| 类型 | 说明 |
| --- | --- |
| 变动 | 变成 **cy ("")_元素_".)类型 ("文本")** |
| 单击 | 变成 **cy ("")_元素_" 。单击();** |
| 单击(右键点击) | 变成 **cy ("")_元素_" ),右键单击(;** |
| 双击 | 变成 **cy ("")_元素_".dbl 点击 ();** |
| 盘旋 | 变成 **cy ("")_元素_" ) 触发器(;** |
| 键下 | 变成 **cy. type ("{key}")** |
| 键 | _目前未导出_ |
| 导航 | 变成 **cy.visit ("url") (中文(简体) )** |
| 设置Viewport | 变成 **cy.viewport(宽,高)** |
| 滚动 | 变成 **cy.scrollTo(${step.x},${step.y})** |

如果上面没有列出步骤类型,那么应在CLI中显示警告信息.

## 许可证

[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress-chrome-recorder/blob/master/LICENSE)

本项目的许可条件如下: [麻省理工学院许可证](https://npmcn.com/LICENSE)。 。 。 .

## 常见问题

### @cypress/chrome-recorder 是什么？

从 Chrome DevTools 录制生成 Cypress 测试

### 如何安装 @cypress/chrome-recorder？

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

### @cypress/chrome-recorder 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cypress/chrome-recorder 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cypress/chrome-recorder 可以商用吗？

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

### @cypress/chrome-recorder 的下载量有多少？

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

### @cypress/chrome-recorder 还在维护吗？

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