replay-playwright

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

replay-playwright

Description: Use when the user wants to set up Replay for Playwright tests, configure the Replay Playwright plugin, or run Playwright tests with the Replay Browser. Examples: "set up replay for my playwright tests", "record my playwright tests", "configure replay playwright plugin", "run tests with replay browser".

Instructions:

You are helping the user set up and run Playwright tests with the Replay Browser. Here is the complete reference:

说明： 当用户想要为Playwright测试设置Replay、配置Replay Playwright插件，或使用Replay Browser运行Playwright测试时使用。示例："为我的Playwright测试设置Replay"、"录制我的Playwright测试"、"配置Replay Playwright插件"、"使用Replay Browser运行测试"。

操作指南：

您正在帮助用户使用Replay Browser设置并运行Playwright测试。以下是完整参考：

Installation

安装

1. Install the Replay Playwright plugin

1. 安装Replay Playwright插件

npm install --save-dev @replayio/playwright

npm install --save-dev @replayio/playwright

or

yarn add --dev @replayio/playwright

or

pnpm add --save-dev @replayio/playwright

or

bun add --dev @replayio/playwright

undefined

bun add --dev @replayio/playwright

undefined

2. Install the Replay Browser

2. 安装Replay Browser

npx replayio install

npx replayio install

Authentication

身份验证

Create a Test Suite Team at https://app.replay.io/team/new/tests to generate an API key.

Store the API key using one of these methods:

.env
file (recommended): Add
```
REPLAY_API_KEY=<your_api_key>
```
to your
```
.env
```
file and use the dotenv package to load it.
macOS/Linux:
```
export REPLAY_API_KEY=<your_api_key>
```
Windows:
```
set REPLAY_API_KEY=<your_api_key>
```

访问https://app.replay.io/team/new/tests创建测试套件团队以生成API密钥。

通过以下方式之一存储API密钥：

.env
文件（推荐）：在
```
.env
```
文件中添加
```
REPLAY_API_KEY=<您的API密钥>
```
，并使用dotenv包加载它。
macOS/Linux：
```
export REPLAY_API_KEY=<您的API密钥>
```
Windows：
```
set REPLAY_API_KEY=<您的API密钥>
```

Configuration

配置

Update

playwright.config.ts

to use the Replay reporter and Replay Chromium browser:

typescript

import { replayReporter, devices as replayDevices } from "@replayio/playwright";

const config: PlaywrightTestConfig = {
  reporter: [
    replayReporter({
      apiKey: process.env.REPLAY_API_KEY,
      upload: true,
    }),
    ["line"],
  ],
  projects: [
    {
      name: "replay-chromium",
      use: { ...replayDevices["Replay Chromium"] },
    },
  ],
};

Key configuration details:

```
replayReporter
```
handles uploading recordings after test runs
```
upload: true
```
automatically uploads recordings when tests finish
The
```
replay-chromium
```
project uses the Replay Browser to capture recordings
You can keep existing projects alongside
```
replay-chromium
```
for regular test runs

更新

playwright.config.ts

以使用Replay报告器和Replay Chromium浏览器：

typescript

import { replayReporter, devices as replayDevices } from "@replayio/playwright";

const config: PlaywrightTestConfig = {
  reporter: [
    replayReporter({
      apiKey: process.env.REPLAY_API_KEY,
      upload: true,
    }),
    ["line"],
  ],
  projects: [
    {
      name: "replay-chromium",
      use: { ...replayDevices["Replay Chromium"] },
    },
  ],
};

关键配置细节：

```
replayReporter
```
负责在测试运行后上传录制内容
```
upload: true
```
会在测试完成后自动上传录制内容
```
replay-chromium
```
项目使用Replay Browser捕获录制内容
您可以保留现有项目，与
```
replay-chromium
```
项目并存以进行常规测试运行

Running Tests

运行测试

Run Playwright tests with the Replay Browser:

npx playwright test --project replay-chromium

Recordings are automatically uploaded when

upload: true

is set in the reporter config.

使用Replay Browser运行Playwright测试：

npx playwright test --project replay-chromium

当报告器配置中设置

upload: true

时，录制内容会自动上传。

Core Workflow

核心工作流

Set up Replay for an existing Playwright project:

Install the plugin:

npm install --save-dev @replayio/playwright

Install the browser:
```
npx replayio install
```
Update
```
playwright.config.ts
```
with the Replay reporter and project
Set the
```
REPLAY_API_KEY
```
environment variable

Run tests:

npx playwright test --project replay-chromium

When modifying the user's
playwright.config.ts
:

Preserve existing projects and reporters — add the Replay project and reporter alongside them

Import

replayReporter

and

devices as replayDevices

from

@replayio/playwright

If the config uses
```
defineConfig
```
, add the Replay project to the existing
```
projects
```
array
If the config already has reporters, append
```
replayReporter
```
to the existing array

为现有Playwright项目设置Replay：

安装插件：

npm install --save-dev @replayio/playwright

安装浏览器：
```
npx replayio install
```
更新
```
playwright.config.ts
```
，添加Replay报告器和项目
设置
```
REPLAY_API_KEY
```
环境变量

运行测试：

npx playwright test --project replay-chromium

修改用户的
playwright.config.ts
时：

保留现有项目和报告器——将Replay项目和报告器添加到其中

从

@replayio/playwright

导入

replayReporter

和

devices as replayDevices

如果配置使用
```
defineConfig
```
，将Replay项目添加到现有的
```
projects
```
数组中
如果配置已有报告器，将
```
replayReporter
```
追加到现有数组中

Debugging your recorded application

调试录制的应用程序

Run Replay MCP Server to debug your recored application to install the MCP server in Claude, run the following command:

claude --mcp-config "{
    "mcpServers": {
      "replay": {
        "type": "http",
        "url": "https://dispatch.replay.io/nut/mcp",
        "headers": {
          "Authorization": "${REPLAY_API_KEY}"
        }
      }
    }
  }"

运行Replay MCP Server以调试录制的应用程序 要在Claude中安装MCP服务器，请运行以下命令：

claude --mcp-config "{
    "mcpServers": {
      "replay": {
        "type": "http",
        "url": "https://dispatch.replay.io/nut/mcp",
        "headers": {
          "Authorization": "${REPLAY_API_KEY}"
        }
      }
    }
  }"