playwright frontend tests

Author: evantahler

frontend/__tests__/smoketest.test.ts

@@ -1,7 +1,13 @@
-import { test, expect, describe } from "bun:test";
+import { test, expect } from "@playwright/test";
 
-describe("Frontend Smoke Test", () => {
-  test("it works", async () => {
-    expect(true).toBe(true);
+test.describe("Frontend Smoke Test", () => {
+  test("homepage loads and shows main elements", async ({ page }) => {
+    await page.goto("http://localhost:3000/");
+    await expect(
+      page.getByRole("heading", { name: "Bun Actionhero" }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole("link", { name: "View API Endpoints" }),
+    ).toBeVisible();
   });
 });

frontend/bun.lockb

@@ -12,7 +12,8 @@
     "compileNext": "bun run next build",
     "lint": "prettier --check .",
     "format": "prettier --write .",
-    "types": "bun --cwd ../backend types && rm -rf ./types && mkdir -p ./types && cp -r ../backend/types ./types/backend"
+    "types": "bun --cwd ../backend types && rm -rf ./types && mkdir -p ./types && cp -r ../backend/types ./types/backend",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "next": "^14.2.7",
@@ -22,6 +23,7 @@
     "typescript": "^5.4.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.53.0",
     "@types/node": "22.7.5",
     "@types/react-dom": "^18.3.0",
     "prettier": "^3.3.3"

frontend/package.json

@@ -0,0 +1,14 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  webServer: {
+    command: "cd .. && bun dev",
+    port: 3000,
+    timeout: 120 * 1000, // 2 minutes
+    reuseExistingServer: !process.env.CI,
+  },
+  testDir: "__tests__",
+  use: {
+    baseURL: "http://localhost:3000",
+  },
+});

frontend/playwright.config.ts

@@ -15,7 +15,7 @@
     "compile": "bun compile-backend && bun compile-frontend",
     "tests": "bun test-backend && bun test-frontend",
     "test-backend": "cd backend && bun test",
-    "test-frontend": "cd frontend && bun test",
+    "test-frontend": "cd frontend && bun test:e2e",
     "lint-backend": "cd backend && bun lint",
     "lint-frontend": "cd frontend && bun lint",
     "lint": "bun lint-backend && bun lint-frontend",