diff --git a/tests/e2e/toast-service.spec.ts b/tests/e2e/toast-service.spec.ts
new file mode 100644
index 00000000..9d7ad051
--- /dev/null
+++ b/tests/e2e/toast-service.spec.ts
@@ -0,0 +1,37 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("toast service in full DOM", () => {
+  test("renders, expires, and dismisses toasts", async ({ page }) => {
+    await page.emulateMedia({ reducedMotion: "reduce" });
+    await page.goto("/docs/kitchen-sink.html", { waitUntil: "networkidle" });
+
+    await page.addScriptTag({
+      type: "module",
+      content: `
+        import { createBeaconToast } from "/torrent/ui/toastService.js";
+        window.__toast = createBeaconToast(document);
+      `,
+    });
+
+    await page.evaluate(() => {
+      window.__toast?.success("Sticky toast", { sticky: true });
+      window.__toast?.info("Transient toast", { duration: 800 });
+    });
+
+    const container = page.locator("#beacon-toast-container");
+    await expect(container).toBeVisible();
+
+    const toastNodes = container.locator("div[role='status']");
+    expect(await toastNodes.count()).toBeGreaterThanOrEqual(2);
+
+    await page.waitForTimeout(900);
+
+    await expect(container.locator("div[role='status']", { hasText: "Transient toast" }))
+      .toHaveCount(0);
+    await expect(container.locator("div[role='status']", { hasText: "Sticky toast" }))
+      .toHaveCount(1);
+
+    await container.locator("button.notification-dismiss").first().click();
+    await expect(container.locator("div[role='status']")).toHaveCount(0);
+  });
+});