simple form with playwright

simple-browser.ts

import { chromium } from "playwright";
import { serve } from "bun";

const form = `
<form action="/" method="post">
  <input name="username" required/>
  <button type="submit">Submit</button>
</form>
  `;

serve({
  port: 3000,
  fetch: (request) => {
    if (request.method === "GET") {
      return new Response(form, {
        status: 200,
        headers: { "Content-Type": "text/html" },
      });
    }
    return new Response(`Submitted`, {
      status: 200,
      headers: { "Content-Type": "text/plain" },
    });
  },
});

const launchOptions = {
  headless: true,
  handleSIGHUP: false,
  handleSIGINT: false,
  handleSIGTERM: false,
};

const browser = await chromium.launch(launchOptions);
const context = await browser.newContext();

async function close(): Promise<void> {
  await context.close();
  await context.browser()?.close();
  process.exit(0);
}

process.on("SIGINT", () => {
  void close();
});

process.on("SIGTERM", () => {
  void close();
});

process.on("SIGHUP", () => {
  void close();
});

const page = await context.newPage();
await page.goto("http://localhost:3000");
// await page.locator("xpath=//input").fill("John Doe");
await page.locator("xpath=//button").click();

const validationMessage = await page
  .locator("xpath=//input[@name='username']")
  .evaluate((el: unknown) => {
    if (
      typeof el === "object" &&
      el !== null &&
      "validationMessage" in el &&
      typeof el.validationMessage === "string"
    ) {
      return el.validationMessage;
    }
    return undefined;
  });

console.error(validationMessage);

await page.waitForURL("http://localhost:3000/");

await close();