# @connectrpc/connect-playwright 中文文档

规范地址：https://npmcn.com/package/%40connectrpc/connect-playwright/

版本：0\.6\.1
npm 元数据更新时间：2026-04-22T19:06:36.652Z
中文译文更新时间：2026-11-10T15:40:03.384Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：43.4 kB，20 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@playwright/test ^1\.0\.0，@connectrpc/connect ^2\.0\.0
- 首次发布：2023-08-15T16:05:04.051Z
- 最新版本发布：2025-11-07T15:18:42.605Z
- 近 30 天下载量：32191（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 0 个）

## 中文简介

用于 Playwright 和连接的 e2e 工具

## 安装

```sh
npm install @connectrpc/connect-playwright
```

也可以使用：`pnpm add @connectrpc/connect-playwright`、`yarn add @connectrpc/connect-playwright`、`bun add @connectrpc/connect-playwright`

## README

# @ 连接rpc/ 连接- playwright

Connect是图书馆的一个家族,用于构建具有不同语言和平台的型号安全API. [连接-ES](https://www.npmjs.com/package/@connectrpc/connect) 把他们带到TypeScript, 网页浏览器,然后去Node.js.

`@connectrpc/connect-playwright` 为Connect-ES应用程序编写端到端测试提供公用设备 使用 [剧作家](https://playwright.dev/)。 。 。 .

## 安装

```
npm install @connectrpc/connect-playwright
```

## 使用量

`@connectrpc/connect-playwright` 目的是通过提供 一个模拟无用的RPC的API.

统一连接RPC可以通过使用 `createMockRouter` 函数。 此函数 允许您修改您服务中的一对多RPC的行为.

让我们用以下的Protobuf文件通过一个实例:

```protobuf
syntax = "proto3";
package example;

message GetUserRequest {
  int32 id = 1;
}

message GetUserResponse {
  int32 id = 1;
  string name = 2;
  string role = 3;
}

message UpdateUserRequest {
  int32 id = 1;
  string name = 2;
  string role = 3;
}

message UpdateUserResponse {}

message DeleteUserRequest {
  int32 id = 1;
}

message DeleteUserResponse {}

service UserService {
  rpc GetUser(GetUserRequest) returns (GetUserResponse) {}
  rpc UpdateUser(UpdateUserRequest) returns (UpdateUserResponse) {}
  rpc DeleteUser(DeleteUserRequest) returns (DeleteUserResponse) {}
}
```

这个 `createMockRouter` 函数接受 Playwright [`BrowserContext`](https://playwright.dev/docs/api/class-browsercontext) 和用于指定 `baseUrl` 您的连接客户端通常会在一个 非试验环境。 此函数调用将返回 a `MockRouter` 用于指定 RPC 对象 行为.

这个 `MockRouter` 类型提供了两种方法,允许您在服务级别或 个人RPC级别.

#### 服务级模拟器

这个 `service` 方法提供了在一次引用中嘲弄整个服务的能力。 它接受两个论点: 从您的 Protobuf 文件生成的服务定义, 然后, 两个值之一 :

-   包含您想要的所有 RPC 模拟执行对象 .
-   `mock` - 配置只返回 RPC 指定的类型的呼叫的字符串,所有默认 数值设定。 如果您不关心响应, 但希望它能成功.

> **注:任何未具体说明的《议定书》将直接通过实际执行.**

例如:

```typescript
test("mock RPCs at service level", async ({ context }) => {
  const mock = createMockRouter(context, {
    baseUrl: "https://api.myproject.com",
  });

  await mock.service(UserService, {
    // Mock getUser to return a custom response.
    getUser() {
      return {
        id: 1,
        name: "Homer Simpson",
        role: "Safety Inspector",
      };
    },
  });
  // ...
});
```

再次指出,在上述例子中 `updateUser` 财务报告和审定财务报表 `deleteUser` 函数将传递到实际执行中 因为它们没有具体说明.

如果你不需要任何自定义行为,而只是想嘲笑你服务中的所有RPC,你可以这样做 简称 :

```typescript
await createMockRouter(context, {
  baseUrl: "https://api.myproject.com",
}).service(UserService, "mock");
```

#### RPC- 级别模拟器

这个 `rpc` 方法提供了嘲弄单一RPC的能力. 它接受三个论点:服务定义 从您的 Protobuf 文件生成的 RPC 名称, 您想要模拟, 然后, 两个值之一 :

-   包含理想的 RPC 模拟执行功能.
-   `mock` - 配置只返回 RPC 指定的类型的呼叫的字符串,所有默认 数值设定.

例如:

```typescript
test("mock RPCs at rpc level", async ({ context }) => {
  const mock = createMockRouter(context, {
    baseUrl: "https://api.myproject.com",
  });

  // Mock getUser with a custom response
  await mock.rpc(UserService.method.getUser, () => {
    return {
      id: 1,
      name: "Homer Simpson",
      role: "Safety Inspector",
    };
  });

  // Just return a default-constructed DeleteUserResponse without hitting the actual RPC.
  await mock.rpc(UserService.method.deleteUser, "mock");
});
```

同一规则适用于未指明的保护责任,而且 `updateUser` 函数将传递到实际执行中 因为它没有具体说明.

注意: `service` 财务报告和审定财务报表 `rpc` 方法返回 a `Promise`,它解决了原始 `MockRouter` 对象. 这可以让你利用 承诺链,如果你想.

在实践中使用上述所有方法的例子可见于 [连接- playwright- 示例](https://github.com/connectrpc/connect-playwright-es/tree/main/packages/connect-playwright-example) 目录.

## 洞穴

目前,只有无谓的请求才能被嘲笑. 我们希望很快增加流动支持.

## 常见问题

### @connectrpc/connect-playwright 是什么？

用于 Playwright 和连接的 e2e 工具

### 如何安装 @connectrpc/connect-playwright？

在项目目录运行 npm install @connectrpc/connect-playwright，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@playwright/test（^1\.0\.0）、@connectrpc/connect（^2\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @connectrpc/connect-playwright 支持 TypeScript 吗？

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

### @connectrpc/connect-playwright 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @connectrpc/connect-playwright 可以商用吗？

@connectrpc/connect-playwright 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @connectrpc/connect-playwright 的下载量有多少？

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

### @connectrpc/connect-playwright 还在维护吗？

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