@toolstackhq/create-qa-patterns 1.0.3 → 1.0.5

package/README.md

@@ -50,3 +50,5 @@ The CLI checks:
 - `npm` availability for install and test actions
 - `npx` availability for Playwright browser installation
 - `docker` availability and warns if it is missing
+
+If `npx playwright install` fails because the host is missing browser dependencies, the CLI keeps the generated project and prints the recovery steps instead of treating scaffold generation as failed.

package/index.js

@@ -11,6 +11,7 @@ const MIN_NODE_VERSION = {
   minor: 18,
   patch: 0
 };
+const COLOR_ENABLED = Boolean(process.stdout.isTTY) && !("NO_COLOR" in process.env);
 const DEFAULT_GITIGNORE = `node_modules/
 
 .env
@@ -40,8 +41,37 @@ const TEMPLATE_ALIASES = new Map(
   ])
 );
 
+function style(text, ...codes) {
+  if (!COLOR_ENABLED) {
+    return text;
+  }
+
+  return `\u001b[${codes.join(";")}m${text}\u001b[0m`;
+}
+
+const colors = {
+  bold(text) {
+    return style(text, 1);
+  },
+  dim(text) {
+    return style(text, 2);
+  },
+  cyan(text) {
+    return style(text, 36);
+  },
+  green(text) {
+    return style(text, 32);
+  },
+  yellow(text) {
+    return style(text, 33);
+  },
+  red(text) {
+    return style(text, 31);
+  }
+};
+
 function printHelp() {
-  process.stdout.write(`create-qa-patterns
+  process.stdout.write(`${colors.bold("create-qa-patterns")}
 
 Usage:
   create-qa-patterns
@@ -121,15 +151,15 @@ function collectPrerequisites() {
 
 function printPrerequisiteWarnings(prerequisites) {
   if (!prerequisites.npm) {
-    process.stdout.write("Warning: npm was not found. Automated install and test steps will be unavailable.\n");
+    process.stdout.write(`${colors.yellow("Warning:")} npm was not found. Automated install and test steps will be unavailable.\n`);
   }
 
   if (!prerequisites.npx) {
-    process.stdout.write("Warning: npx was not found. Playwright browser installation will be unavailable.\n");
+    process.stdout.write(`${colors.yellow("Warning:")} npx was not found. Playwright browser installation will be unavailable.\n`);
   }
 
   if (!prerequisites.docker) {
-    process.stdout.write("Warning: docker was not found. Docker-based template flows will not run until Docker is installed.\n");
+    process.stdout.write(`${colors.yellow("Warning:")} docker was not found. Docker-based template flows will not run until Docker is installed.\n`);
   }
 
   if (!prerequisites.npm || !prerequisites.npx || !prerequisites.docker) {
@@ -144,6 +174,18 @@ function createLineInterface() {
   });
 }
 
+function createSummary(templateName, targetDirectory, generatedInCurrentDirectory, demoAppsManagedByTemplate) {
+  return {
+    templateName,
+    targetDirectory,
+    generatedInCurrentDirectory,
+    demoAppsManagedByTemplate,
+    npmInstall: "not-run",
+    playwrightInstall: "not-run",
+    testRun: "not-run"
+  };
+}
+
 function askQuestion(prompt) {
   const lineInterface = createLineInterface();
 
@@ -444,6 +486,26 @@ function getCommandName(base) {
   return base;
 }
 
+function printPlaywrightInstallRecovery(targetDirectory) {
+  process.stdout.write(`
+${colors.yellow("Playwright browser installation did not complete.")}
+
+Common cause:
+  Missing OS packages required to run Playwright browsers.
+
+Recommended next steps:
+  cd ${path.relative(process.cwd(), targetDirectory) || "."}
+  sudo npx playwright install-deps
+  npx playwright install
+
+If you already know the missing package name, install it with your system package manager and then rerun:
+  npx playwright install
+
+The template was generated successfully. You can complete browser setup later.
+
+`);
+}
+
 function runCommand(command, args, cwd) {
   return new Promise((resolve, reject) => {
     const child = spawn(getCommandName(command), args, {
@@ -467,17 +529,17 @@ function runCommand(command, args, cwd) {
 function printSuccess(templateName, targetDirectory, generatedInCurrentDirectory) {
   const template = getTemplate(templateName);
 
-  process.stdout.write(`\nSuccess
+  process.stdout.write(`\n${colors.green(colors.bold("Success"))}
 Generated ${template ? template.label : templateName} in ${targetDirectory}
 \n`);
 
   if (!generatedInCurrentDirectory) {
-    process.stdout.write(`Change directory first:\n  cd ${path.relative(process.cwd(), targetDirectory) || "."}\n\n`);
+    process.stdout.write(`${colors.cyan("Change directory first:")}\n  cd ${path.relative(process.cwd(), targetDirectory) || "."}\n\n`);
   }
 }
 
 function printNextSteps(targetDirectory, generatedInCurrentDirectory) {
-  process.stdout.write("Next steps:\n");
+  process.stdout.write(`${colors.cyan("Next steps:")}\n`);
 
   if (!generatedInCurrentDirectory) {
     process.stdout.write(`  cd ${path.relative(process.cwd(), targetDirectory) || "."}\n`);
@@ -488,7 +550,34 @@ function printNextSteps(targetDirectory, generatedInCurrentDirectory) {
   process.stdout.write("  npm test\n");
 }
 
-async function runPostGenerateActions(targetDirectory) {
+function formatStatus(status) {
+  switch (status) {
+    case "completed":
+      return colors.green("completed");
+    case "skipped":
+      return colors.dim("skipped");
+    case "unavailable":
+      return colors.yellow("unavailable");
+    case "manual-recovery":
+      return colors.yellow("manual recovery required");
+    default:
+      return colors.dim("not run");
+  }
+}
+
+function printSummary(summary) {
+  process.stdout.write(`\n${colors.bold("Summary")}\n`);
+  process.stdout.write(`  Template: ${summary.templateName}\n`);
+  process.stdout.write(`  Target: ${summary.targetDirectory}\n`);
+  process.stdout.write(
+    `  Demo apps: ${summary.demoAppsManagedByTemplate ? "bundled and auto-started in dev when using default local URLs" : "external application required"}\n`
+  );
+  process.stdout.write(`  npm install: ${formatStatus(summary.npmInstall)}\n`);
+  process.stdout.write(`  Playwright browser install: ${formatStatus(summary.playwrightInstall)}\n`);
+  process.stdout.write(`  npm test: ${formatStatus(summary.testRun)}\n`);
+}
+
+async function runPostGenerateActions(targetDirectory, summary) {
   if (!process.stdin.isTTY || !process.stdout.isTTY) {
     return;
   }
@@ -500,19 +589,38 @@ async function runPostGenerateActions(targetDirectory) {
 
     if (shouldInstallDependencies) {
       await runCommand("npm", ["install"], targetDirectory);
+      summary.npmInstall = "completed";
+    } else {
+      summary.npmInstall = "skipped";
     }
   } else {
-    process.stdout.write("Skipping npm install prompt because npm is not available.\n");
+    process.stdout.write(`${colors.yellow("Skipping")} npm install prompt because npm is not available.\n`);
+    summary.npmInstall = "unavailable";
   }
 
   if (prerequisites.npx) {
     const shouldInstallPlaywright = await askYesNo("Run npx playwright install now?", true);
 
     if (shouldInstallPlaywright) {
-      await runCommand("npx", ["playwright", "install"], targetDirectory);
+      try {
+        await runCommand("npx", ["playwright", "install"], targetDirectory);
+        summary.playwrightInstall = "completed";
+      } catch (error) {
+        summary.playwrightInstall = "manual-recovery";
+        printPlaywrightInstallRecovery(targetDirectory);
+
+        const shouldContinue = await askYesNo("Continue without completing Playwright browser install?", true);
+
+        if (!shouldContinue) {
+          throw error;
+        }
+      }
+    } else {
+      summary.playwrightInstall = "skipped";
     }
   } else {
-    process.stdout.write("Skipping Playwright browser install prompt because npx is not available.\n");
+    process.stdout.write(`${colors.yellow("Skipping")} Playwright browser install prompt because npx is not available.\n`);
+    summary.playwrightInstall = "unavailable";
   }
 
   if (prerequisites.npm) {
@@ -520,9 +628,13 @@ async function runPostGenerateActions(targetDirectory) {
 
     if (shouldRunTests) {
       await runCommand("npm", ["test"], targetDirectory);
+      summary.testRun = "completed";
+    } else {
+      summary.testRun = "skipped";
     }
   } else {
-    process.stdout.write("Skipping npm test prompt because npm is not available.\n");
+    process.stdout.write(`${colors.yellow("Skipping")} npm test prompt because npm is not available.\n`);
+    summary.testRun = "unavailable";
   }
 }
 
@@ -537,10 +649,12 @@ async function main() {
   }
 
   const { templateName, targetDirectory, generatedInCurrentDirectory } = await resolveScaffoldArgs(args);
+  const summary = createSummary(templateName, targetDirectory, generatedInCurrentDirectory, true);
   printPrerequisiteWarnings(collectPrerequisites());
   await scaffoldProject(templateName, targetDirectory);
   printSuccess(templateName, targetDirectory, generatedInCurrentDirectory);
-  await runPostGenerateActions(targetDirectory);
+  await runPostGenerateActions(targetDirectory, summary);
+  printSummary(summary);
   printNextSteps(targetDirectory, generatedInCurrentDirectory);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolstackhq/create-qa-patterns",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "CLI for generating QA framework templates.",
   "license": "MIT",
   "repository": {

package/templates/playwright-template/README.md

@@ -35,6 +35,7 @@ This is a Playwright + TypeScript automation framework template for UI and API t
 - page objects in `pages/` own locators and user actions
 - runtime config is loaded from `config/runtime-config.ts`
 - application URLs and credentials are resolved from `TEST_ENV`
+- bundled demo apps auto-start during `npm test` in local `dev` mode when the default local URLs are in use
 - reports and artifacts are written under `reports/`, `allure-results/`, and `test-results/`
 
 ## Project structure
@@ -64,22 +65,22 @@ playwright-template
 npm install
 ```
 
-2. Start the target apps you want the tests to hit.
-
-For the local demo apps from the root repo:
+2. Run tests.
 
 ```bash
-npm run dev:ui
+npm test
 ```
 
+In local `dev`, the template starts its bundled demo apps automatically before the tests run.
+
+If you want to run the demo apps manually for debugging:
+
 ```bash
-npm run dev:api
+npm run demo:ui
 ```
 
-3. Run tests.
-
 ```bash
-npm test
+npm run demo:api
 ```
 
 Default local values:
@@ -137,6 +138,12 @@ STAGING_APP_PASSWORD=my-password \
 npx playwright test
 ```
 
+If you want to disable the bundled local demo apps even in `dev`, use:
+
+```bash
+PW_DISABLE_LOCAL_DEMO_APPS=true npm test
+```
+
 If your team uses a real secret system later, replace the implementation behind `config/secret-manager.ts`.
 
 ## Main commands
@@ -146,6 +153,8 @@ npm test
 npm run test:smoke
 npm run test:regression
 npm run test:critical
+npm run demo:ui
+npm run demo:api
 npm run lint
 npm run typecheck
 npm run report:playwright
@@ -203,6 +212,7 @@ test("do something @smoke", async ({ dataFactory, loginPage }) => {
 
 Common extension points:
 
+- update or replace the bundled demo apps under `demo-apps/`
 - add page objects under `pages/`
 - add reusable UI pieces under `components/`
 - extend fixtures in `fixtures/test-fixtures.ts`

package/templates/playwright-template/demo-apps/api-demo-server/src/server.js

@@ -0,0 +1,36 @@
+const express = require("express");
+
+const { createPerson, state } = require("./store");
+
+const app = express();
+const host = process.env.HOST || "0.0.0.0";
+const port = Number(process.env.PORT || "3001");
+
+app.use(express.json());
+
+app.get("/health", (_request, response) => {
+  response.json({ status: "ok" });
+});
+
+app.get("/people", (_request, response) => {
+  response.json(state.people);
+});
+
+app.post("/people", (request, response) => {
+  const { name, role, email } = request.body;
+  if (!name || !role || !email) {
+    response.status(400).json({ error: "name, role, and email are required" });
+    return;
+  }
+
+  try {
+    const person = createPerson(request.body);
+    response.status(201).json(person);
+  } catch (error) {
+    response.status(409).json({ error: error.message });
+  }
+});
+
+app.listen(port, host, () => {
+  console.log(`API demo server listening on http://${host}:${port}`);
+});

package/templates/playwright-template/demo-apps/api-demo-server/src/store.js

@@ -0,0 +1,37 @@
+const state = {
+  people: [],
+  counters: {
+    person: 0
+  }
+};
+
+function nextId() {
+  state.counters.person += 1;
+  return `person-${String(state.counters.person).padStart(4, "0")}`;
+}
+
+function getPerson(personId) {
+  return state.people.find((person) => person.personId === personId);
+}
+
+function createPerson(payload) {
+  const personId = payload.personId || nextId();
+  if (getPerson(personId)) {
+    throw new Error(`Person ${personId} already exists`);
+  }
+
+  const person = {
+    personId,
+    name: payload.name,
+    role: payload.role,
+    email: payload.email
+  };
+
+  state.people.push(person);
+  return person;
+}
+
+module.exports = {
+  state,
+  createPerson
+};

package/templates/playwright-template/demo-apps/ui-demo-app/public/styles.css

@@ -0,0 +1,120 @@
+body {
+  margin: 0;
+  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+  background: linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%);
+  color: #102038;
+}
+
+.layout {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 32px 24px 48px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.brand {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.nav {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.nav a {
+  text-decoration: none;
+  color: #102038;
+  background: #d8e6ff;
+  padding: 10px 14px;
+  border-radius: 999px;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.card,
+.panel {
+  background: #ffffff;
+  border-radius: 18px;
+  padding: 20px;
+  box-shadow: 0 20px 40px rgba(16, 32, 56, 0.08);
+}
+
+.panel-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+}
+
+form {
+  display: grid;
+  gap: 14px;
+}
+
+label {
+  display: grid;
+  gap: 6px;
+  font-weight: 600;
+}
+
+input,
+select,
+button {
+  font: inherit;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid #c4d3eb;
+}
+
+button {
+  background: #174ea6;
+  color: #ffffff;
+  border: none;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  text-align: left;
+  padding: 12px 8px;
+  border-bottom: 1px solid #e1e9f5;
+}
+
+.flash-message {
+  background: #dff6e7;
+  border: 1px solid #9dd5ae;
+  color: #174f2c;
+  padding: 12px 14px;
+  border-radius: 14px;
+  margin-bottom: 16px;
+}
+
+.login-shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+
+.login-card {
+  width: min(420px, 100%);
+}

package/templates/playwright-template/demo-apps/ui-demo-app/src/server.js

@@ -0,0 +1,149 @@
+const fs = require("node:fs");
+const http = require("node:http");
+const path = require("node:path");
+const querystring = require("node:querystring");
+
+const { createPerson, getPeople, state } = require("./store");
+const { layout, loginPage, peoplePage } = require("./templates");
+
+const host = process.env.HOST || "0.0.0.0";
+const port = Number(process.env.PORT || "3000");
+
+function readBody(request) {
+  return new Promise((resolve, reject) => {
+    let body = "";
+    request.on("data", (chunk) => {
+      body += chunk.toString();
+    });
+    request.on("end", () => resolve(querystring.parse(body)));
+    request.on("error", reject);
+  });
+}
+
+function parseCookies(request) {
+  const header = request.headers.cookie;
+  if (!header) {
+    return {};
+  }
+
+  return header.split(";").reduce((cookies, entry) => {
+    const [key, value] = entry.trim().split("=");
+    cookies[key] = value;
+    return cookies;
+  }, {});
+}
+
+function redirect(response, location) {
+  response.writeHead(302, { Location: location });
+  response.end();
+}
+
+function sendHtml(response, html) {
+  response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+  response.end(html);
+}
+
+function sendJson(response, payload) {
+  response.writeHead(200, { "Content-Type": "application/json" });
+  response.end(JSON.stringify(payload));
+}
+
+function isAuthenticated(request) {
+  return parseCookies(request).session === "authenticated";
+}
+
+function protectedRoute(request, response) {
+  if (!isAuthenticated(request)) {
+    redirect(response, "/login");
+    return false;
+  }
+
+  return true;
+}
+
+function pageMessage(url) {
+  return new URL(url, "http://127.0.0.1").searchParams.get("message") || "";
+}
+
+const server = http.createServer(async (request, response) => {
+  const url = new URL(request.url, "http://127.0.0.1");
+
+  if (request.method === "GET" && url.pathname === "/styles.css") {
+    const cssPath = path.join(__dirname, "..", "public", "styles.css");
+    response.writeHead(200, { "Content-Type": "text/css; charset=utf-8" });
+    response.end(fs.readFileSync(cssPath, "utf8"));
+    return;
+  }
+
+  if (request.method === "GET" && url.pathname === "/health") {
+    sendJson(response, { status: "ok", people: state.people.length });
+    return;
+  }
+
+  if (request.method === "GET" && url.pathname === "/") {
+    redirect(response, "/login");
+    return;
+  }
+
+  if (request.method === "GET" && url.pathname === "/login") {
+    sendHtml(response, loginPage());
+    return;
+  }
+
+  if (request.method === "POST" && url.pathname === "/login") {
+    const body = await readBody(request);
+    if (
+      body.username === state.credentials.username &&
+      body.password === state.credentials.password
+    ) {
+      response.writeHead(302, {
+        Location: "/people",
+        "Set-Cookie": "session=authenticated; HttpOnly; Path=/; SameSite=Lax"
+      });
+      response.end();
+      return;
+    }
+
+    sendHtml(response, loginPage("Invalid credentials"));
+    return;
+  }
+
+  if (request.method === "GET" && url.pathname === "/people") {
+    if (!protectedRoute(request, response)) {
+      return;
+    }
+
+    sendHtml(
+      response,
+      layout({
+        title: "People",
+        body: peoplePage(getPeople(url.searchParams.get("search") || "")),
+        flashMessage: pageMessage(request.url),
+        username: state.credentials.username
+      })
+    );
+    return;
+  }
+
+  if (request.method === "POST" && url.pathname === "/people") {
+    if (!protectedRoute(request, response)) {
+      return;
+    }
+
+    try {
+      const body = await readBody(request);
+      createPerson(body);
+      redirect(response, "/people?message=Person%20added");
+    } catch (error) {
+      redirect(response, `/people?message=${encodeURIComponent(error.message)}`);
+    }
+    return;
+  }
+
+  response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+  response.end("Not found");
+});
+
+server.listen(port, host, () => {
+  console.log(`UI demo app listening on http://${host}:${port}`);
+});

package/templates/playwright-template/demo-apps/ui-demo-app/src/store.js

@@ -0,0 +1,43 @@
+const state = {
+  credentials: {
+    username: process.env.UI_DEMO_USERNAME || "tester",
+    password: process.env.UI_DEMO_PASSWORD || "Password123!"
+  },
+  people: []
+};
+
+function findPerson(personId) {
+  return state.people.find((person) => person.personId === personId);
+}
+
+function createPerson(person) {
+  if (findPerson(person.personId)) {
+    throw new Error(`Person ${person.personId} already exists`);
+  }
+
+  state.people.push({
+    personId: person.personId,
+    name: person.name,
+    role: person.role,
+    email: person.email
+  });
+}
+
+function getPeople(search = "") {
+  const query = String(search).trim().toLowerCase();
+  if (!query) {
+    return state.people;
+  }
+
+  return state.people.filter((person) => {
+    return [person.name, person.role, person.email].some((value) =>
+      value.toLowerCase().includes(query)
+    );
+  });
+}
+
+module.exports = {
+  state,
+  createPerson,
+  getPeople
+};

package/templates/playwright-template/demo-apps/ui-demo-app/src/templates.js

@@ -0,0 +1,121 @@
+function layout({ title, body, flashMessage = "", username = "tester" }) {
+  return `<!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>${title}</title>
+      <link rel="stylesheet" href="/styles.css" />
+    </head>
+    <body>
+      <div class="layout">
+        <header class="header">
+          <div class="brand">UI Patterns Demo</div>
+          <nav class="nav" aria-label="Primary">
+            <a href="/people">People</a>
+          </nav>
+        </header>
+        ${flashMessage ? `<div class="flash-message" data-testid="flash-message" role="status">${flashMessage}</div>` : ""}
+        <p data-testid="welcome-message">Signed in as ${username}</p>
+        ${body}
+      </div>
+    </body>
+  </html>`;
+}
+
+function loginPage(errorMessage = "") {
+  return `<!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Login</title>
+      <link rel="stylesheet" href="/styles.css" />
+    </head>
+    <body>
+      <main class="login-shell">
+        <section class="card login-card">
+          <h1>Login</h1>
+          <p>Keep the example intentionally small: sign in, add one person, assert the list.</p>
+          ${errorMessage ? `<div class="flash-message" role="status">${errorMessage}</div>` : ""}
+          <form action="/login" method="post">
+            <label for="username">
+              Username
+              <input id="username" name="username" type="text" autocomplete="username" required />
+            </label>
+            <label for="password">
+              Password
+              <input id="password" name="password" type="password" autocomplete="current-password" required />
+            </label>
+            <button type="submit">Sign in</button>
+          </form>
+        </section>
+      </main>
+    </body>
+  </html>`;
+}
+
+function peoplePage(people) {
+  const rows = people
+    .map((person) => {
+      return `<tr data-testid="person-row-${person.personId}">
+        <td>${person.name}</td>
+        <td>${person.role}</td>
+        <td>${person.email}</td>
+      </tr>`;
+    })
+    .join("");
+
+  return `
+    <section class="panel-grid">
+      <section class="panel">
+        <h1>People</h1>
+        <form action="/people" method="post">
+          <label for="personId">
+            Person ID
+            <input id="personId" name="personId" type="text" required />
+          </label>
+          <label for="name">
+            Name
+            <input id="name" name="name" type="text" required />
+          </label>
+          <label for="role">
+            Role
+            <input id="role" name="role" type="text" required />
+          </label>
+          <label for="email">
+            Email
+            <input id="email" name="email" type="email" required />
+          </label>
+          <button type="submit">Add person</button>
+        </form>
+      </section>
+      <section class="panel">
+        <h2>Directory</h2>
+        <form action="/people" method="get">
+          <label for="search">
+            Search
+            <input id="search" name="search" type="text" placeholder="Search people" />
+          </label>
+          <button type="submit">Apply filter</button>
+        </form>
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Role</th>
+              <th>Email</th>
+            </tr>
+          </thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </section>
+    </section>
+  `;
+}
+
+module.exports = {
+  layout,
+  loginPage,
+  peoplePage
+};

package/templates/playwright-template/eslint.config.mjs

@@ -19,6 +19,19 @@ export default [
     ]
   },
   js.configs.recommended,
+  {
+    files: ["demo-apps/**/*.js"],
+    languageOptions: {
+      globals: {
+        __dirname: "readonly",
+        console: "readonly",
+        module: "readonly",
+        process: "readonly",
+        require: "readonly",
+        URL: "readonly"
+      }
+    }
+  },
   {
     files: ["**/*.ts"],
     languageOptions: {

package/templates/playwright-template/package.json

@@ -8,6 +8,8 @@
     "test:smoke": "playwright test --grep @smoke",
     "test:regression": "playwright test --grep @regression",
     "test:critical": "playwright test --grep @critical",
+    "demo:ui": "node ./demo-apps/ui-demo-app/src/server.js",
+    "demo:api": "node ./demo-apps/api-demo-server/src/server.js",
     "lint": "eslint .",
     "typecheck": "tsc --noEmit",
     "report:playwright": "playwright show-report reports/html",
@@ -18,6 +20,7 @@
   "dependencies": {
     "@faker-js/faker": "^8.4.1",
     "dotenv": "^16.4.5",
+    "express": "^4.21.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

package/templates/playwright-template/playwright.config.ts

@@ -3,6 +3,11 @@ import { defineConfig, devices } from "@playwright/test";
 import { loadRuntimeConfig } from "./config/runtime-config";
 
 const runtimeConfig = loadRuntimeConfig();
+const shouldAutoStartDemoApps =
+  runtimeConfig.testEnv === "dev" &&
+  runtimeConfig.uiBaseUrl === "http://127.0.0.1:3000" &&
+  runtimeConfig.apiBaseUrl === "http://127.0.0.1:3001" &&
+  process.env.PW_DISABLE_LOCAL_DEMO_APPS !== "true";
 
 export default defineConfig({
   testDir: "./tests",
@@ -35,6 +40,22 @@ export default defineConfig({
     testRunId: runtimeConfig.testRunId,
     apiBaseUrl: runtimeConfig.apiBaseUrl
   },
+  webServer: shouldAutoStartDemoApps
+    ? [
+        {
+          command: "npm run demo:ui",
+          url: `${runtimeConfig.uiBaseUrl}/health`,
+          reuseExistingServer: !process.env.CI,
+          timeout: 30_000
+        },
+        {
+          command: "npm run demo:api",
+          url: `${runtimeConfig.apiBaseUrl}/health`,
+          reuseExistingServer: !process.env.CI,
+          timeout: 30_000
+        }
+      ]
+    : undefined,
   projects: [
     {
       name: "chromium",