Playwright for Connect-ES

e2e utilities designed to simplify writing Playwright tests for your Connect-ES application by providing an API to mock unary RPCs defined in your service.

Installation

npm install @connectrpc/connect-playwright

Usage

Unary Connect RPCs can be customized through the usage of the createMockRouter function. This function allows you to write mocks at the service-level as well as mocks at the individual RPC level.

For example, to write mocks at the service level, use the service function on the mock router:

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",
      };
    },
  });
  // ...
});

If you do not require any custom behavior and simply want to mock all RPCs in your service, you can do this with the shorthand:

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

If you wish to write mocks at the individual RPC level, you can do so with the rpc function on your mock router:

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");
});

Full documentation can be found in the package README.

In addition, an example of using all of the above in practice can be found in the connect-playwright-example directory.

Packages

• @connectrpc/connect-playwright: Utilities for writing end-to-end tests for a Connect-ES application using Playwright (source code).

Ecosystem

• connect-es: Connect, gRPC, and gRPC-Web support for Protobuf and TypeScript.
• connect-query-es: TypeScript-first expansion pack for TanStack Query that gives you Protobuf superpowers
• connect-swift: Idiomatic gRPC & Connect RPCs for Swift.
• connect-go: Go implementation of gRPC, gRPC-Web, and Connect
• examples-go: Example RPC service powering https://demo.connectrpc.com and built with connect-go
• conformance: Connect, gRPC, and gRPC-Web interoperability tests
• Buf Studio: web UI for ad-hoc RPCs

Status

This project is in beta, which means we may make a few changes as we gather feedback from early adopters. Join us on Slack to stay updated on future releases.

Legal

Offered under the Apache 2 license.