Home

Awesome

<img src=".github/connect-logo.png" width="15%" />

Playwright for Connect-ES

License Build NPM Version

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, UserService.methods.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, UserService.methods.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

Ecosystem

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.