@toolstackhq/create-qa-patterns 1.0.13 → 1.0.15

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

@@ -1,8 +1,8 @@
 // Page object for the login screen and its user actions.
-import type { Page } from "@playwright/test";
+import type { Page } from '@playwright/test';
 
-import type { Logger } from "../utils/logger";
-import { BasePage } from "./base-page";
+import type { Logger } from '../utils/logger';
+import { BasePage } from './base-page';
 
 export class LoginPage extends BasePage {
   constructor(page: Page, baseUrl: string, logger: Logger) {
@@ -10,14 +10,14 @@ export class LoginPage extends BasePage {
   }
 
   async goto(): Promise<void> {
-    this.logger.info("page.goto", { page: "login" });
-    await this.page.goto(this.buildUrl("/login"));
+    this.logger.info('page.goto', { page: 'login' });
+    await this.page.goto(this.buildUrl('/login'));
   }
 
   async login(username: string, password: string): Promise<void> {
-    this.logger.info("login.submit", { username });
-    await this.page.getByLabel("Username").fill(username);
-    await this.page.getByLabel("Password").fill(password);
-    await this.page.getByRole("button", { name: "Sign in" }).click();
+    this.logger.info('login.submit', { username });
+    await this.page.getByLabel('Username').fill(username);
+    await this.page.getByLabel('Password').fill(password);
+    await this.page.getByRole('button', { name: 'Sign in' }).click();
   }
 }

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

@@ -1,9 +1,9 @@
 // Page object for the people screen used in the starter UI workflow.
-import type { Page } from "@playwright/test";
+import type { Page } from '@playwright/test';
 
-import type { PersonRecord } from "../data/factories/data-factory";
-import type { Logger } from "../utils/logger";
-import { BasePage } from "./base-page";
+import type { PersonRecord } from '../data/factories/data-factory';
+import type { Logger } from '../utils/logger';
+import { BasePage } from './base-page';
 
 export class PeoplePage extends BasePage {
   constructor(page: Page, baseUrl: string, logger: Logger) {
@@ -11,30 +11,34 @@ export class PeoplePage extends BasePage {
   }
 
   async waitForReady(): Promise<void> {
-    await this.page.getByRole("heading", { level: 1, name: "People", exact: true }).waitFor();
+    await this.page
+      .getByRole('heading', { level: 1, name: 'People', exact: true })
+      .waitFor();
   }
 
   async addPerson(person: PersonRecord): Promise<void> {
-    this.logger.info("person.create", { personId: person.personId });
-    await this.page.getByLabel("Person ID").fill(person.personId);
-    await this.page.getByLabel("Name").fill(person.name);
-    await this.page.getByLabel("Role").fill(person.role);
-    await this.page.getByLabel("Email").fill(person.email);
-    await this.page.getByRole("button", { name: "Add person" }).click();
-    await this.page.waitForLoadState("networkidle");
+    this.logger.info('person.create', { personId: person.personId });
+    await this.page.getByLabel('Person ID').fill(person.personId);
+    await this.page.getByLabel('Name').fill(person.name);
+    await this.page.getByLabel('Role').fill(person.role);
+    await this.page.getByLabel('Email').fill(person.email);
+    await this.page.getByRole('button', { name: 'Add person' }).click();
+    await this.page.waitForLoadState('networkidle');
   }
 
-  async getPersonSummary(personId: string): Promise<{ name: string; role: string; email: string } | null> {
+  async getPersonSummary(
+    personId: string
+  ): Promise<{ name: string; role: string; email: string } | null> {
     const row = this.page.getByTestId(`person-row-${personId}`);
     if (!(await row.count())) {
       return null;
     }
 
-    const cells = row.getByRole("cell");
+    const cells = row.getByRole('cell');
     return {
-      name: (await cells.nth(0).textContent()) ?? "",
-      role: (await cells.nth(1).textContent()) ?? "",
-      email: (await cells.nth(2).textContent()) ?? ""
+      name: (await cells.nth(0).textContent()) ?? '',
+      role: (await cells.nth(1).textContent()) ?? '',
+      email: (await cells.nth(2).textContent()) ?? ''
     };
   }
 }

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

@@ -1,17 +1,17 @@
 // Central Playwright configuration for local runs, CI, reporters, and demo app startup.
-import { defineConfig, devices } from "@playwright/test";
+import { defineConfig, devices } from '@playwright/test';
 
-import { loadRuntimeConfig } from "./config/runtime-config";
+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";
+  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",
+  testDir: './tests',
   fullyParallel: false,
   forbidOnly: Boolean(process.env.CI),
   retries: process.env.CI ? 1 : 0,
@@ -20,20 +20,23 @@ export default defineConfig({
   expect: {
     timeout: 10_000
   },
-  outputDir: "test-results",
+  outputDir: 'test-results',
   reporter: [
-    ["list"],
-    ["html", { open: "never", outputFolder: "reports/html" }],
+    ['list'],
+    ['html', { open: 'never', outputFolder: 'reports/html' }],
     // Keep the HTML reporter as the default path most users expect.
     // Remove the Allure line below if you prefer to stay with Playwright's built-in reporters only.
-    ["allure-playwright", { resultsDir: "allure-results" }],
-    ["./reporters/structured-reporter.ts", { outputFile: "reports/logs/playwright-events.jsonl" }]
+    ['allure-playwright', { resultsDir: 'allure-results' }],
+    [
+      './reporters/structured-reporter.ts',
+      { outputFile: 'reports/logs/playwright-events.jsonl' }
+    ]
   ],
   use: {
     baseURL: runtimeConfig.uiBaseUrl,
-    trace: "retain-on-failure",
-    screenshot: "only-on-failure",
-    video: "retain-on-failure",
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
     headless: !process.env.PWDEBUG
   },
   metadata: {
@@ -44,13 +47,13 @@ export default defineConfig({
   webServer: shouldAutoStartDemoApps
     ? [
         {
-          command: "npm run demo:ui",
+          command: 'npm run demo:ui',
           url: `${runtimeConfig.uiBaseUrl}/health`,
           reuseExistingServer: !process.env.CI,
           timeout: 30_000
         },
         {
-          command: "npm run demo:api",
+          command: 'npm run demo:api',
           url: `${runtimeConfig.apiBaseUrl}/health`,
           reuseExistingServer: !process.env.CI,
           timeout: 30_000
@@ -59,9 +62,9 @@ export default defineConfig({
     : undefined,
   projects: [
     {
-      name: "chromium",
+      name: 'chromium',
       use: {
-        ...devices["Desktop Chrome"]
+        ...devices['Desktop Chrome']
       }
     }
   ]

package/templates/playwright-template/reporters/structured-reporter.ts

@@ -1,6 +1,6 @@
 // Custom reporter that writes machine-readable test lifecycle events to disk.
-import fs from "node:fs";
-import path from "node:path";
+import fs from 'node:fs';
+import path from 'node:path';
 
 import type {
   FullConfig,
@@ -9,14 +9,17 @@ import type {
   Suite,
   TestCase,
   TestResult
-} from "@playwright/test/reporter";
+} from '@playwright/test/reporter';
 
 type ReporterOptions = {
   outputFile?: string;
 };
 
 class StructuredReporter implements Reporter {
-  private outputFile = path.resolve(process.cwd(), "reports/logs/playwright-events.jsonl");
+  private outputFile = path.resolve(
+    process.cwd(),
+    'reports/logs/playwright-events.jsonl'
+  );
 
   constructor(options?: ReporterOptions) {
     if (options?.outputFile) {
@@ -27,7 +30,7 @@ class StructuredReporter implements Reporter {
 
   onBegin(config: FullConfig, suite: Suite): void {
     this.write({
-      event: "run.started",
+      event: 'run.started',
       projectCount: config.projects.length,
       testCount: suite.allTests().length
     });
@@ -35,7 +38,7 @@ class StructuredReporter implements Reporter {
 
   onTestEnd(test: TestCase, result: TestResult): void {
     this.write({
-      event: "test.finished",
+      event: 'test.finished',
       title: test.title,
       tags: test.title.match(/@\w+/g) ?? [],
       status: result.status,
@@ -45,7 +48,7 @@ class StructuredReporter implements Reporter {
 
   onEnd(result: FullResult): void {
     this.write({
-      event: "run.finished",
+      event: 'run.finished',
       status: result.status
     });
   }
@@ -54,7 +57,7 @@ class StructuredReporter implements Reporter {
     fs.appendFileSync(
       this.outputFile,
       `${JSON.stringify({ timestamp: new Date().toISOString(), ...payload })}\n`,
-      "utf8"
+      'utf8'
     );
   }
 }

package/templates/playwright-template/scripts/ensure-local-env.mjs

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+
+import crypto from 'node:crypto';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const currentProcess = globalThis.process;
+const envPath = path.resolve(currentProcess.cwd(), '.env');
+
+if (fs.existsSync(envPath)) {
+  currentProcess.exit(0);
+}
+
+const projectSlug = path
+  .basename(currentProcess.cwd())
+  .toLowerCase()
+  .replace(/[^a-z0-9]+/g, '-')
+  .replace(/^-+|-+$/g, '')
+  .slice(0, 12);
+const username = `${projectSlug || 'local'}-${crypto.randomBytes(3).toString('hex')}`;
+const password = `${crypto.randomBytes(9).toString('base64url')}A1!`;
+
+const envContents = [
+  'TEST_ENV=dev',
+  'TEST_RUN_ID=local',
+  'DEV_UI_BASE_URL=http://127.0.0.1:3000',
+  'DEV_API_BASE_URL=http://127.0.0.1:3001',
+  `DEV_APP_USERNAME=${username}`,
+  `DEV_APP_PASSWORD=${password}`,
+  `UI_DEMO_USERNAME=${username}`,
+  `UI_DEMO_PASSWORD=${password}`
+].join('\n');
+
+fs.writeFileSync(envPath, `${envContents}\n`, 'utf8');
+currentProcess.stdout.write(
+  `Generated local .env with demo credentials for ${username}\n`
+);

package/templates/playwright-template/scripts/generate-allure-report.mjs

@@ -1,12 +1,12 @@
 // Builds a local Allure report from raw test results after a test run completes.
-import { AllureReport, readConfig } from "@allurereport/core";
-import { readdir, rm, stat } from "node:fs/promises";
-import { join, resolve } from "node:path";
-import process from "node:process";
+import { AllureReport, readConfig } from '@allurereport/core';
+import { readdir, rm, stat } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+import process from 'node:process';
 
 const cwd = process.cwd();
-const resultsDir = resolve(cwd, "allure-results");
-const outputDir = resolve(cwd, "reports/allure");
+const resultsDir = resolve(cwd, 'allure-results');
+const outputDir = resolve(cwd, 'reports/allure');
 
 const collectResultFiles = async () => {
   const entries = (await readdir(resultsDir)).sort();
@@ -28,20 +28,24 @@ const generateReport = async () => {
   try {
     await stat(resultsDir);
   } catch {
-    process.stdout.write("Skipping Allure report generation because allure-results does not exist.\n");
+    process.stdout.write(
+      'Skipping Allure report generation because allure-results does not exist.\n'
+    );
     return;
   }
 
   const files = await collectResultFiles();
 
   if (files.length === 0) {
-    process.stdout.write("Skipping Allure report generation because no result files were found.\n");
+    process.stdout.write(
+      'Skipping Allure report generation because no result files were found.\n'
+    );
     return;
   }
 
   await rm(outputDir, { force: true, recursive: true });
 
-  const config = await readConfig(cwd, "allurerc.mjs", { output: outputDir });
+  const config = await readConfig(cwd, 'allurerc.mjs', { output: outputDir });
   const report = new AllureReport(config);
 
   await report.start();
@@ -52,7 +56,9 @@ const generateReport = async () => {
 
   await report.done();
 
-  process.stdout.write("Allure report generated at reports/allure/index.html\n");
+  process.stdout.write(
+    'Allure report generated at reports/allure/index.html\n'
+  );
 };
 
 generateReport().catch((error) => {

package/templates/playwright-template/scripts/run-tests.sh

@@ -1,6 +1,7 @@
 #!/usr/bin/env bash
 set -euo pipefail
 
+node ./scripts/ensure-local-env.mjs
 npm run lint
 npm run typecheck
 npx playwright test "$@"

package/templates/playwright-template/tests/api-people.spec.ts

@@ -1,8 +1,8 @@
 // Starter API journey that pairs with the deterministic demo API server.
-import { expect, test } from "../fixtures/test-fixtures";
+import { expect, test } from '../fixtures/test-fixtures';
 
-test.describe("API starter flow", () => {
-  test("create and list one person @regression", async ({
+test.describe('API starter flow', () => {
+  test('create and list one person @regression', async ({
     appConfig,
     dataFactory,
     request,
@@ -10,7 +10,7 @@ test.describe("API starter flow", () => {
   }) => {
     const person = dataFactory.person();
 
-    await stepLogger.run("Create one person through the API", async () => {
+    await stepLogger.run('Create one person through the API', async () => {
       const response = await request.post(`${appConfig.apiBaseUrl}/people`, {
         data: person
       });
@@ -18,12 +18,14 @@ test.describe("API starter flow", () => {
       expect(await response.json()).toMatchObject(person);
     });
 
-    await stepLogger.run("List people and verify the new record", async () => {
+    await stepLogger.run('List people and verify the new record', async () => {
       const response = await request.get(`${appConfig.apiBaseUrl}/people`);
       expect(response.ok()).toBeTruthy();
 
       const people = await response.json();
-      expect(people).toContainEqual(expect.objectContaining({ personId: person.personId }));
+      expect(people).toContainEqual(
+        expect.objectContaining({ personId: person.personId })
+      );
     });
   });
 });

package/templates/playwright-template/tests/ui-journey.spec.ts

@@ -1,8 +1,8 @@
 // Starter UI journey that shows the preferred Playwright test style in this template.
-import { expect, test } from "../fixtures/test-fixtures";
+import { expect, test } from '../fixtures/test-fixtures';
 
-test.describe("UI starter journey", () => {
-  test("login and add one person @smoke @critical", async ({
+test.describe('UI starter journey', () => {
+  test('login and add one person @smoke @critical', async ({
     appConfig,
     loginPage,
     peoplePage,
@@ -11,16 +11,21 @@ test.describe("UI starter journey", () => {
   }) => {
     const person = dataFactory.person();
 
-    await stepLogger.run("Sign in to the demo app", async () => {
+    await stepLogger.run('Sign in to the demo app', async () => {
       await loginPage.goto();
-      await loginPage.login(appConfig.credentials.username, appConfig.credentials.password);
+      await loginPage.login(
+        appConfig.credentials.username,
+        appConfig.credentials.password
+      );
       await peoplePage.waitForReady();
-      expect(await peoplePage.getWelcomeMessage()).toContain(appConfig.credentials.username);
+      expect(await peoplePage.getWelcomeMessage()).toContain(
+        appConfig.credentials.username
+      );
     });
 
-    await stepLogger.run("Add one person and verify the list", async () => {
+    await stepLogger.run('Add one person and verify the list', async () => {
       await peoplePage.addPerson(person);
-      expect(await peoplePage.flashMessage.getText()).toContain("Person added");
+      expect(await peoplePage.flashMessage.getText()).toContain('Person added');
       expect(await peoplePage.getPersonSummary(person.personId)).toEqual({
         name: person.name,
         role: person.role,

package/templates/playwright-template/tsconfig.json

@@ -3,23 +3,15 @@
     "target": "ES2022",
     "module": "commonjs",
     "moduleResolution": "node",
-    "lib": [
-      "ES2022",
-      "DOM"
-    ],
-    "types": [
-      "node",
-      "@playwright/test"
-    ],
+    "lib": ["ES2022", "DOM"],
+    "types": ["node", "@playwright/test"],
     "strict": true,
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "baseUrl": "."
   },
-  "include": [
-    "**/*.ts"
-  ],
+  "include": ["**/*.ts"],
   "exclude": [
     "node_modules",
     "reports",

package/templates/playwright-template/utils/logger.ts

@@ -1,18 +1,22 @@
 // Structured JSON logger used by tests, pages, and helper classes.
-import fs from "node:fs";
-import path from "node:path";
+import fs from 'node:fs';
+import path from 'node:path';
 
-type LogLevel = "info" | "error";
+type LogLevel = 'info' | 'error';
 
 type LogContext = Record<string, string | number | boolean | null | undefined>;
 
-const LOG_FILE = path.resolve(process.cwd(), "reports/logs/execution.log");
+const LOG_FILE = path.resolve(process.cwd(), 'reports/logs/execution.log');
 
 function ensureLogDirectory(): void {
   fs.mkdirSync(path.dirname(LOG_FILE), { recursive: true });
 }
 
-function serialize(level: LogLevel, message: string, context?: LogContext): string {
+function serialize(
+  level: LogLevel,
+  message: string,
+  context?: LogContext
+): string {
   return JSON.stringify({
     timestamp: new Date().toISOString(),
     level,
@@ -34,11 +38,11 @@ export class Logger {
   }
 
   info(message: string, context?: LogContext): void {
-    this.write("info", message, context);
+    this.write('info', message, context);
   }
 
   error(message: string, context?: LogContext): void {
-    this.write("error", message, context);
+    this.write('error', message, context);
   }
 
   private write(level: LogLevel, message: string, context?: LogContext): void {
@@ -46,7 +50,7 @@ export class Logger {
       ...this.context,
       ...context
     });
-    fs.appendFileSync(LOG_FILE, `${line}\n`, "utf8");
+    fs.appendFileSync(LOG_FILE, `${line}\n`, 'utf8');
     console.log(line);
   }
 }

package/templates/playwright-template/utils/test-step.ts

@@ -1,19 +1,19 @@
 // Small wrapper that records named test steps in a consistent way.
-import { test } from "@playwright/test";
+import { test } from '@playwright/test';
 
-import type { Logger } from "./logger";
+import type { Logger } from './logger';
 
 export class StepLogger {
   constructor(private readonly logger: Logger) {}
 
   async run<T>(message: string, callback: () => Promise<T>): Promise<T> {
-    this.logger.info("step.started", { step: message });
+    this.logger.info('step.started', { step: message });
     try {
       const result = await test.step(message, callback);
-      this.logger.info("step.passed", { step: message });
+      this.logger.info('step.passed', { step: message });
       return result;
     } catch (error) {
-      this.logger.error("step.failed", {
+      this.logger.error('step.failed', {
         step: message,
         error: error instanceof Error ? error.message : String(error)
       });

package/templates/wdio-template/.env.example

@@ -0,0 +1,14 @@
+TEST_ENV=dev
+TEST_RUN_ID=local
+
+DEV_UI_BASE_URL=http://127.0.0.1:3000
+DEV_APP_USERNAME=generate-a-local-username
+DEV_APP_PASSWORD=generate-a-local-password
+
+STAGING_UI_BASE_URL=https://staging-ui.example.internal
+STAGING_APP_USERNAME=your-staging-username
+STAGING_APP_PASSWORD=your-staging-password
+
+PROD_UI_BASE_URL=https://ui.example.internal
+PROD_APP_USERNAME=your-prod-username
+PROD_APP_PASSWORD=your-prod-password

package/templates/wdio-template/.github/workflows/wdio-tests.yml

@@ -0,0 +1,46 @@
+name: WebdriverIO Template Validation
+
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - 'templates/wdio-template/**'
+      - 'test-apps/**'
+      - 'package.json'
+
+jobs:
+  wdio:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install template dependencies
+        working-directory: templates/wdio-template
+        run: npm ci
+
+      - name: Run WebdriverIO validation
+        working-directory: templates/wdio-template
+        env:
+          TEST_ENV: dev
+          TEST_RUN_ID: ci
+        run: bash ./scripts/run-tests.sh
+
+      - name: Generate Allure report
+        if: always()
+        working-directory: templates/wdio-template
+        run: npm run report:allure
+
+      - name: Upload WebdriverIO artifacts
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: wdio-template-artifacts
+          if-no-files-found: ignore
+          path: |
+            templates/wdio-template/reports
+            templates/wdio-template/allure-results