middlewright

A plugin/middleware system for Playwright locator actions — the one Playwright doesn’t have.

Wrap click, fill, inputValue, waitFor and friends with composable middleware, so your tests can be smart about why an action is slow or failing, without sprinkling waitForSomething() helpers through every test.

Quick start

Install with pnpm add -D middlewright then wire it once in a fixture:

// test-helpers.ts
import { test as base } from "@playwright/test";
import { addPlugins, spinnerWaiter } from "middlewright";

export const test = base.extend({
  page: async ({ page: basePage }, use, testInfo) => {
    await using page = await addPlugins({
      page: basePage,
      testInfo,
      plugins: [spinnerWaiter()],
    });
    await use(page);
  },
});

Then write completely ordinary tests — no special helpers, no wrapper calls:

import { test } from "./test-helpers";

test("kick off a slow report", async ({ page }) => {
  await page.goto("/reports");
  await page.getByRole("button", { name: "Generate report" }).click();
  // The report takes ~20s. The app shows "generating..." while it runs, so
  // spinnerWaiter waits patiently here —…