@toolstackhq/create-qa-patterns 1.0.13 → 1.0.15

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

@@ -1,22 +1,22 @@
-const fs = require("node:fs");
-const http = require("node:http");
-const path = require("node:path");
-const querystring = require("node:querystring");
+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 { 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");
+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) => {
+    let body = '';
+    request.on('data', (chunk) => {
       body += chunk.toString();
     });
-    request.on("end", () => resolve(querystring.parse(body)));
-    request.on("error", reject);
+    request.on('end', () => resolve(querystring.parse(body)));
+    request.on('error', reject);
   });
 }
 
@@ -26,8 +26,8 @@ function parseCookies(request) {
     return {};
   }
 
-  return header.split(";").reduce((cookies, entry) => {
-    const [key, value] = entry.trim().split("=");
+  return header.split(';').reduce((cookies, entry) => {
+    const [key, value] = entry.trim().split('=');
     cookies[key] = value;
     return cookies;
   }, {});
@@ -39,22 +39,22 @@ function redirect(response, location) {
 }
 
 function sendHtml(response, html) {
-  response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+  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.writeHead(200, { 'Content-Type': 'application/json' });
   response.end(JSON.stringify(payload));
 }
 
 function isAuthenticated(request) {
-  return parseCookies(request).session === "authenticated";
+  return parseCookies(request).session === 'authenticated';
 }
 
 function protectedRoute(request, response) {
   if (!isAuthenticated(request)) {
-    redirect(response, "/login");
+    redirect(response, '/login');
     return false;
   }
 
@@ -62,53 +62,53 @@ function protectedRoute(request, response) {
 }
 
 function pageMessage(url) {
-  return new URL(url, "http://127.0.0.1").searchParams.get("message") || "";
+  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");
+  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"));
+  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 });
+  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");
+  if (request.method === 'GET' && url.pathname === '/') {
+    redirect(response, '/login');
     return;
   }
 
-  if (request.method === "GET" && url.pathname === "/login") {
+  if (request.method === 'GET' && url.pathname === '/login') {
     sendHtml(response, loginPage());
     return;
   }
 
-  if (request.method === "POST" && url.pathname === "/login") {
+  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"
+        Location: '/people',
+        'Set-Cookie': 'session=authenticated; HttpOnly; Path=/; SameSite=Lax'
       });
       response.end();
       return;
     }
 
-    sendHtml(response, loginPage("Invalid credentials"));
+    sendHtml(response, loginPage('Invalid credentials'));
     return;
   }
 
-  if (request.method === "GET" && url.pathname === "/people") {
+  if (request.method === 'GET' && url.pathname === '/people') {
     if (!protectedRoute(request, response)) {
       return;
     }
@@ -116,8 +116,8 @@ const server = http.createServer(async (request, response) => {
     sendHtml(
       response,
       layout({
-        title: "People",
-        body: peoplePage(getPeople(url.searchParams.get("search") || "")),
+        title: 'People',
+        body: peoplePage(getPeople(url.searchParams.get('search') || '')),
         flashMessage: pageMessage(request.url),
         username: state.credentials.username
       })
@@ -125,7 +125,7 @@ const server = http.createServer(async (request, response) => {
     return;
   }
 
-  if (request.method === "POST" && url.pathname === "/people") {
+  if (request.method === 'POST' && url.pathname === '/people') {
     if (!protectedRoute(request, response)) {
       return;
     }
@@ -133,15 +133,18 @@ const server = http.createServer(async (request, response) => {
     try {
       const body = await readBody(request);
       createPerson(body);
-      redirect(response, "/people?message=Person%20added");
+      redirect(response, '/people?message=Person%20added');
     } catch (error) {
-      redirect(response, `/people?message=${encodeURIComponent(error.message)}`);
+      redirect(
+        response,
+        `/people?message=${encodeURIComponent(error.message)}`
+      );
     }
     return;
   }
 
-  response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
-  response.end("Not found");
+  response.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+  response.end('Not found');
 });
 
 server.listen(port, host, () => {

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

@@ -1,7 +1,35 @@
+const fs = require('node:fs');
+const path = require('node:path');
+
+const dotenv = require('dotenv');
+
+function loadClosestEnv(startDirectory) {
+  let currentDirectory = startDirectory;
+
+  while (true) {
+    const candidate = path.join(currentDirectory, '.env');
+    if (fs.existsSync(candidate)) {
+      dotenv.config({ path: candidate });
+      return;
+    }
+
+    const parentDirectory = path.dirname(currentDirectory);
+    if (parentDirectory === currentDirectory) {
+      return;
+    }
+
+    currentDirectory = parentDirectory;
+  }
+}
+
+loadClosestEnv(process.cwd());
+loadClosestEnv(__dirname);
+
 const state = {
   credentials: {
-    username: process.env.UI_DEMO_USERNAME || "tester",
-    password: process.env.UI_DEMO_PASSWORD || "Password123!"
+    username:
+      process.env.UI_DEMO_USERNAME || process.env.DEV_APP_USERNAME || '',
+    password: process.env.UI_DEMO_PASSWORD || process.env.DEV_APP_PASSWORD || ''
   },
   people: []
 };
@@ -23,7 +51,7 @@ function createPerson(person) {
   });
 }
 
-function getPeople(search = "") {
+function getPeople(search = '') {
   const query = String(search).trim().toLowerCase();
   if (!query) {
     return state.people;

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

@@ -1,4 +1,4 @@
-function layout({ title, body, flashMessage = "", username = "tester" }) {
+function layout({ title, body, flashMessage = '', username = 'Local user' }) {
   return `<!DOCTYPE html>
   <html lang="en">
     <head>
@@ -15,7 +15,7 @@ function layout({ title, body, flashMessage = "", username = "tester" }) {
             <a href="/people">People</a>
           </nav>
         </header>
-        ${flashMessage ? `<div class="flash-message" data-testid="flash-message" role="status">${flashMessage}</div>` : ""}
+        ${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>
@@ -23,7 +23,7 @@ function layout({ title, body, flashMessage = "", username = "tester" }) {
   </html>`;
 }
 
-function loginPage(errorMessage = "") {
+function loginPage(errorMessage = '') {
   return `<!DOCTYPE html>
   <html lang="en">
     <head>
@@ -37,7 +37,7 @@ function loginPage(errorMessage = "") {
         <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>` : ""}
+          ${errorMessage ? `<div class="flash-message" role="status">${errorMessage}</div>` : ''}
           <form action="/login" method="post">
             <label for="username">
               Username
@@ -64,7 +64,7 @@ function peoplePage(people) {
         <td>${person.email}</td>
       </tr>`;
     })
-    .join("");
+    .join('');
 
   return `
     <section class="panel-grid">

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

@@ -1,79 +1,79 @@
-import js from "@eslint/js";
-import tseslint from "@typescript-eslint/eslint-plugin";
-import tsParser from "@typescript-eslint/parser";
-import { fileURLToPath } from "node:url";
+import js from '@eslint/js';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import { fileURLToPath } from 'node:url';
 
-import architecturePlugin from "./lint/architecture-plugin.cjs";
+import architecturePlugin from './lint/architecture-plugin.cjs';
 
-const configDirectory = fileURLToPath(new globalThis.URL(".", import.meta.url));
+const configDirectory = fileURLToPath(new globalThis.URL('.', import.meta.url));
 
 export default [
   {
     ignores: [
-      "node_modules/**",
-      "reports/**",
-      "allure-results/**",
-      "allure-report/**",
-      "test-results/**",
-      "playwright-report/**"
+      'node_modules/**',
+      'reports/**',
+      'allure-results/**',
+      'allure-report/**',
+      'test-results/**',
+      'playwright-report/**'
     ]
   },
   js.configs.recommended,
   {
-    files: ["demo-apps/**/*.js"],
+    files: ['demo-apps/**/*.js'],
     languageOptions: {
       globals: {
-        __dirname: "readonly",
-        console: "readonly",
-        module: "readonly",
-        process: "readonly",
-        require: "readonly",
-        URL: "readonly"
+        __dirname: 'readonly',
+        console: 'readonly',
+        module: 'readonly',
+        process: 'readonly',
+        require: 'readonly',
+        URL: 'readonly'
       }
     }
   },
   {
-    files: ["**/*.ts"],
+    files: ['**/*.ts'],
     languageOptions: {
       parser: tsParser,
       parserOptions: {
-        project: "./tsconfig.json",
+        project: './tsconfig.json',
         tsconfigRootDir: configDirectory
       },
       globals: {
-        console: "readonly",
-        process: "readonly",
-        URL: "readonly"
+        console: 'readonly',
+        process: 'readonly',
+        URL: 'readonly'
       }
     },
     plugins: {
-      "@typescript-eslint": tseslint,
+      '@typescript-eslint': tseslint,
       architecture: architecturePlugin
     },
     rules: {
       ...tseslint.configs.recommended.rules,
-      "@typescript-eslint/naming-convention": [
-        "error",
+      '@typescript-eslint/naming-convention': [
+        'error',
         {
-          selector: "default",
-          format: ["camelCase"],
-          leadingUnderscore: "allow"
+          selector: 'default',
+          format: ['camelCase'],
+          leadingUnderscore: 'allow'
         },
         {
-          selector: "typeLike",
-          format: ["PascalCase"]
+          selector: 'typeLike',
+          format: ['PascalCase']
         },
         {
-          selector: "variable",
-          modifiers: ["const"],
-          format: ["camelCase", "UPPER_CASE", "PascalCase"]
+          selector: 'variable',
+          modifiers: ['const'],
+          format: ['camelCase', 'UPPER_CASE', 'PascalCase']
         }
       ],
-      "@typescript-eslint/no-explicit-any": "off",
-      "no-empty-pattern": "off",
-      "architecture/no-raw-locators-in-tests": "error",
-      "architecture/no-wait-for-timeout": "error",
-      "architecture/no-expect-in-page-objects": "error"
+      '@typescript-eslint/no-explicit-any': 'off',
+      'no-empty-pattern': 'off',
+      'architecture/no-raw-locators-in-tests': 'error',
+      'architecture/no-wait-for-timeout': 'error',
+      'architecture/no-expect-in-page-objects': 'error'
     }
   }
 ];

package/templates/playwright-template/fixtures/test-fixtures.ts

@@ -1,12 +1,15 @@
 // Shared Playwright fixtures so tests can stay small and focus on behavior.
-import { test as base } from "@playwright/test";
+import { test as base } from '@playwright/test';
 
-import { loadRuntimeConfig, type RuntimeConfig } from "../config/runtime-config";
-import { DataFactory } from "../data/factories/data-factory";
-import { LoginPage } from "../pages/login-page";
-import { PeoplePage } from "../pages/people-page";
-import { createLogger, type Logger } from "../utils/logger";
-import { StepLogger } from "../utils/test-step";
+import {
+  loadRuntimeConfig,
+  type RuntimeConfig
+} from '../config/runtime-config';
+import { DataFactory } from '../data/factories/data-factory';
+import { LoginPage } from '../pages/login-page';
+import { PeoplePage } from '../pages/people-page';
+import { createLogger, type Logger } from '../utils/logger';
+import { StepLogger } from '../utils/test-step';
 
 type FrameworkFixtures = {
   appConfig: RuntimeConfig;
@@ -23,22 +26,34 @@ export const test = base.extend<FrameworkFixtures>({
   },
   logger: async ({}, use, testInfo) => {
     const logger = createLogger({
-      test: testInfo.titlePath.join(" > ")
+      test: testInfo.titlePath.join(' > ')
     });
     await use(logger);
   },
   stepLogger: async ({ logger }, use) => {
-    await use(new StepLogger(logger.child({ scope: "steps" })));
+    await use(new StepLogger(logger.child({ scope: 'steps' })));
   },
   dataFactory: async ({ appConfig }, use) => {
     await use(new DataFactory(appConfig.testRunId));
   },
   loginPage: async ({ page, appConfig, logger }, use) => {
-    await use(new LoginPage(page, appConfig.uiBaseUrl, logger.child({ pageObject: "LoginPage" })));
+    await use(
+      new LoginPage(
+        page,
+        appConfig.uiBaseUrl,
+        logger.child({ pageObject: 'LoginPage' })
+      )
+    );
   },
   peoplePage: async ({ page, appConfig, logger }, use) => {
-    await use(new PeoplePage(page, appConfig.uiBaseUrl, logger.child({ pageObject: "PeoplePage" })));
+    await use(
+      new PeoplePage(
+        page,
+        appConfig.uiBaseUrl,
+        logger.child({ pageObject: 'PeoplePage' })
+      )
+    );
   }
 });
 
-export { expect } from "@playwright/test";
+export { expect } from '@playwright/test';

package/templates/playwright-template/lint/architecture-plugin.cjs

@@ -2,41 +2,41 @@ const TEST_FILE_PATTERN = /[/\\]tests[/\\].+\.ts$/;
 const PAGE_OBJECT_PATTERN = /[/\\](pages|components)[/\\].+\.ts$/;
 
 const locatorMethods = new Set([
-  "locator",
-  "getByRole",
-  "getByLabel",
-  "getByTestId",
-  "getByText",
-  "getByPlaceholder",
-  "getByAltText",
-  "getByTitle",
-  "$",
-  "$$"
+  'locator',
+  'getByRole',
+  'getByLabel',
+  'getByTestId',
+  'getByText',
+  'getByPlaceholder',
+  'getByAltText',
+  'getByTitle',
+  '$',
+  '$$'
 ]);
 
 function isIdentifierProperty(node, name) {
   return (
     node &&
-    node.type === "MemberExpression" &&
+    node.type === 'MemberExpression' &&
     !node.computed &&
     node.property &&
-    node.property.type === "Identifier" &&
+    node.property.type === 'Identifier' &&
     node.property.name === name
   );
 }
 
 module.exports = {
   rules: {
-    "no-raw-locators-in-tests": {
+    'no-raw-locators-in-tests': {
       meta: {
-        type: "problem",
+        type: 'problem',
         docs: {
-          description: "Disallow selectors inside test files"
+          description: 'Disallow selectors inside test files'
         },
         schema: [],
         messages: {
           noRawLocators:
-            "Raw locators are not allowed in tests. Move selector logic into a page object or component."
+            'Raw locators are not allowed in tests. Move selector logic into a page object or component.'
         }
       },
       create(context) {
@@ -47,54 +47,56 @@ module.exports = {
         return {
           CallExpression(node) {
             if (
-              node.callee.type === "MemberExpression" &&
+              node.callee.type === 'MemberExpression' &&
               !node.callee.computed &&
-              node.callee.property.type === "Identifier" &&
+              node.callee.property.type === 'Identifier' &&
               locatorMethods.has(node.callee.property.name)
             ) {
               context.report({
                 node,
-                messageId: "noRawLocators"
+                messageId: 'noRawLocators'
               });
             }
           }
         };
       }
     },
-    "no-wait-for-timeout": {
+    'no-wait-for-timeout': {
       meta: {
-        type: "problem",
+        type: 'problem',
         docs: {
-          description: "Disallow waitForTimeout"
+          description: 'Disallow waitForTimeout'
         },
         schema: [],
         messages: {
-          noWaitForTimeout: "waitForTimeout is not allowed. Synchronize with user-visible events instead."
+          noWaitForTimeout:
+            'waitForTimeout is not allowed. Synchronize with user-visible events instead.'
         }
       },
       create(context) {
         return {
           CallExpression(node) {
-            if (isIdentifierProperty(node.callee, "waitForTimeout")) {
+            if (isIdentifierProperty(node.callee, 'waitForTimeout')) {
               context.report({
                 node,
-                messageId: "noWaitForTimeout"
+                messageId: 'noWaitForTimeout'
               });
             }
           }
         };
       }
     },
-    "no-expect-in-page-objects": {
+    'no-expect-in-page-objects': {
       meta: {
-        type: "problem",
+        type: 'problem',
         docs: {
-          description: "Disallow assertions inside page objects and UI components"
+          description:
+            'Disallow assertions inside page objects and UI components'
         },
         schema: [],
         messages: {
           noExpect:
-            "Assertions are not allowed inside page objects or components. Return state and assert from the test."
+            'Assertions are not allowed inside page objects or components. Return state and assert from the test.'
         }
       },
       create(context) {
@@ -104,10 +106,13 @@ module.exports = {
 
         return {
           CallExpression(node) {
-            if (node.callee.type === "Identifier" && node.callee.name === "expect") {
+            if (
+              node.callee.type === 'Identifier' &&
+              node.callee.name === 'expect'
+            ) {
               context.report({
                 node,
-                messageId: "noExpect"
+                messageId: 'noExpect'
               });
             }
           }

package/templates/playwright-template/package.json

@@ -4,12 +4,13 @@
   "private": true,
   "description": "Production-ready Playwright automation framework template with deterministic test patterns.",
   "scripts": {
-    "test": "playwright test",
-    "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",
+    "ensure:env": "node ./scripts/ensure-local-env.mjs",
+    "test": "node ./scripts/ensure-local-env.mjs && playwright test",
+    "test:smoke": "node ./scripts/ensure-local-env.mjs && playwright test --grep @smoke",
+    "test:regression": "node ./scripts/ensure-local-env.mjs && playwright test --grep @regression",
+    "test:critical": "node ./scripts/ensure-local-env.mjs && playwright test --grep @critical",
+    "demo:ui": "node ./scripts/ensure-local-env.mjs && node ./demo-apps/ui-demo-app/src/server.js",
+    "demo:api": "node ./scripts/ensure-local-env.mjs && node ./demo-apps/api-demo-server/src/server.js",
     "lint": "eslint .",
     "typecheck": "tsc --noEmit",
     "report:playwright": "playwright show-report reports/html",

package/templates/playwright-template/pages/base-page.ts

@@ -1,8 +1,8 @@
 // Base page with shared helpers that concrete page objects can build on.
-import type { Page } from "@playwright/test";
+import type { Page } from '@playwright/test';
 
-import { FlashMessage } from "../components/flash-message";
-import type { Logger } from "../utils/logger";
+import { FlashMessage } from '../components/flash-message';
+import type { Logger } from '../utils/logger';
 
 export abstract class BasePage {
   readonly flashMessage: FlashMessage;
@@ -20,6 +20,6 @@ export abstract class BasePage {
   }
 
   async getWelcomeMessage(): Promise<string> {
-    return (await this.page.getByTestId("welcome-message").textContent()) ?? "";
+    return (await this.page.getByTestId('welcome-message').textContent()) ?? '';
   }
 }