cloudflare--workers-sdk/fixtures/create-test-harness-example/tests/playwright.test.ts

import { test as base, expect } from "@playwright/test";
import { http, HttpResponse } from "msw";
import { setupServer, type SetupServerApi } from "msw/node";
import { createTestHarness, type TestHarness } from "wrangler";

type TestFixtures = {
	reset: void;
};

type WorkerFixtures = {
	network: SetupServerApi;
	server: TestHarness;
};

const test = base.extend<TestFixtures, WorkerFixtures>({
	network: [
		async ({}, use) => {
			const network = setupServer();
			network.listen({ onUnhandledRequest: "error" });

			await use(network);

			network.close();
		},
		{ scope: "worker" },
	],

	server: [
		async ({}, use) => {
			const server = createTestHarness({
				workers: [
					// Playwright tests run against the Vite build output.
					{ configPath: "./dist/web_worker/wrangler.json" },
					{ configPath: "./dist/api_worker/wrangler.json" },
				],
			});

			await server.listen();

			await use(server);

			await server.close();
		},
		{ scope: "worker" },
	],

	baseURL: async ({ server }, use) => {
		const { url } = await server.listen();
		await use(url.href);
	},

	reset: [
		async ({ network, server }, use, testInfo) => {
			await server.getWorker("api-worker").applyD1Migrations("DATABASE");

			await use();

			if (testInfo.status !== testInfo.expectedStatus) {
				server.debug();
			}

			network.resetHandlers();
			await server.reset();
		},
		{ auto: true },
	],
});

test.describe("createTestHarness: Playwright setup", () => {
	test("renders a user profile", async ({ page, network }) => {
		network.use(
			http.get("http://identity.example.com/profile/:id", ({ params }) => {
				return HttpResponse.json({ id: params.id, name: "Ada" });
			})
		);

		await page.goto("/users/123");

		await expect(page.getByText("Profile: Ada")).toBeVisible();
	});

	test("renders a report generated by a scheduled handler", async ({
		page,
		network,
		server,
	}) => {
		network.use(
			http.get("http://identity.example.com/profile/:id", ({ params }) => {
				return HttpResponse.json({ id: params.id, name: "Ada" });
			})
		);

		const apiWorker = server.getWorker("api-worker");
		await apiWorker.fetch("/v1/users/123");
		await apiWorker.fetch("/v1/users/456");
		await apiWorker.scheduled({
			cron: "0 0 * * *",
			scheduledTime: new Date("2026-05-29T00:00:00.000Z"),
		});

		await page.goto("/reports/2026-05-29");

		await expect(
			page.getByText("Daily report (2026-05-29): active users 123, 456")
		).toBeVisible();
	});
});