@sun-asterisk/sungen 2.6.8 → 2.6.11

package/src/exporters/test-data-resolver.ts

@@ -8,7 +8,11 @@ import { parse as parseYaml } from 'yaml';
 
 /**
  * Load test-data.yaml into a flat key→value map.
- * Returns empty map if file missing.
+ * Nested objects are flattened with dot notation so flow files like
+ *   kudos:
+ *     recipient: "An"
+ * become { "kudos.recipient": "An" }, matching {{kudos.recipient}} refs.
+ * Arrays are JSON-stringified. Returns empty map if file missing.
  */
 export function loadTestData(testDataFilePath: string): Record<string, string> {
   if (!fs.existsSync(testDataFilePath)) return {};
@@ -16,38 +20,58 @@ export function loadTestData(testDataFilePath: string): Record<string, string> {
   const parsed = parseYaml(content);
   if (!parsed || typeof parsed !== 'object') return {};
 
-  // Flatten shallow object to string values
   const result: Record<string, string> = {};
-  for (const [key, value] of Object.entries(parsed as Record<string, unknown>)) {
+  flatten(parsed as Record<string, unknown>, '', result);
+  return result;
+}
+
+function flatten(obj: Record<string, unknown>, prefix: string, out: Record<string, string>): void {
+  for (const [key, value] of Object.entries(obj)) {
     if (value === null || value === undefined) continue;
-    if (typeof value === 'object') continue; // skip nested structures
-    result[key] = String(value);
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (Array.isArray(value)) {
+      out[path] = JSON.stringify(value);
+    } else if (typeof value === 'object') {
+      flatten(value as Record<string, unknown>, path, out);
+    } else {
+      out[path] = String(value);
+    }
   }
-  return result;
 }
 
 /**
- * Format a list of variable references into a "key: value; key2: value2" string
- * suitable for the CSV Test Data column.
+ * Format a list of variable references into a "key: value" string.
  *
- * Long values (>80 chars) are truncated with "…".
+ * - `separator` controls how pairs are joined. Default `'; '` keeps CSV/XLSX
+ *   cells on one line. Pass `'\n'` for surfaces that render multi-line text
+ *   (e.g. the dashboard modal uses whitespace-pre-wrap).
+ * - Test data is never truncated by default — values represent real test
+ *   inputs and clients need to see them in full. Pass a finite `maxLen` only
+ *   if the downstream surface requires a cap (e.g. terminal preview).
  */
 export function formatTestData(
   referencedVars: string[],
-  testData: Record<string, string>
+  testData: Record<string, string>,
+  maxLen: number = Infinity,
+  separator: string = '; ',
 ): string {
   if (referencedVars.length === 0) return '';
+  // When joining with newlines (dashboard multi-line view), prefix each line
+  // with a bullet point so the list scans easily. CSV-style "; " join skips
+  // the bullet — single-cell text shouldn't have list markers.
+  const useBullet = separator.includes('\n');
   const pairs: string[] = [];
   for (const key of referencedVars) {
     const value = testData[key];
     if (value === undefined) continue;
-    pairs.push(`${key}: ${truncate(value, 80)}`);
+    const line = `${key}: ${truncate(value, maxLen)}`;
+    pairs.push(useBullet ? `• ${line}` : line);
   }
-  return pairs.join('; ');
+  return pairs.join(separator);
 }
 
 function truncate(s: string, max: number): string {
-  if (s.length <= max) return s;
+  if (!isFinite(max) || s.length <= max) return s;
   return s.substring(0, max - 1) + '…';
 }
 

package/src/exporters/types.ts

@@ -15,7 +15,7 @@ export interface TestCaseRow {
   testData: string;          // semicolon-separated key: value
   steps: string;             // numbered steps
   expectedResults: string;   // numbered expected results
-  priority: string;          // Critical | High | Normal | Low
+  priority: string;          // High | Normal | Low
   testcaseType: string;      // Auto | Manual | Not compiled
   testResult: string;        // Passed | Failed | Pending | N/A
   executedDate: string;      // dd/mm/yyyy
@@ -59,9 +59,20 @@ export interface FeatureMetadata {
   featureName: string;                    // e.g., "Create Kudo Modal"
   featurePath?: string;                   // e.g., "/kudos"
   featureTags: string[];                  // Feature-level tags
+  /** Background block classified by bucket. Shared across all runnable
+   *  scenarios — the merger is responsible for prepending these.  */
+  backgroundGivenSteps: string[];
+  backgroundWhenSteps:  string[];
+  backgroundThenSteps:  string[];
+  backgroundOrderedSteps: OrderedStep[];
   scenarios: ScenarioMetadata[];
 }
 
+export interface OrderedStep {
+  text: string;
+  bucket: 'given' | 'when' | 'then';
+}
+
 export interface ScenarioMetadata {
   name: string;                           // Full scenario name (with VP prefix)
   tags: string[];                         // Scenario-level tags (merged with feature tags)
@@ -71,6 +82,12 @@ export interface ScenarioMetadata {
   rawGivenSteps: string[];                // Raw Given/And-after-Given step text
   rawWhenSteps: string[];                 // Raw When/And-after-When step text
   rawThenSteps: string[];                 // Raw Then/And-after-Then step text
+  /**
+   * Steps in original chronological order with each step labelled by its
+   * effective bucket (And/But inherits from the prior explicit keyword).
+   * Use this when ordering matters — e.g. mid-scenario `Given` after `When`.
+   */
+  orderedSteps: OrderedStep[];
 }
 
 /**

package/src/exporters/xlsx-exporter.ts

@@ -12,14 +12,16 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import ExcelJS from 'exceljs';
+import JSZip from 'jszip';
 import { ScreenSummary, TestCaseRow } from './types';
 import { getPackageVersion } from './package-info';
+import { SUN_LOGO_PNG_BASE64 } from './sun-logo';
 
 const COL_COUNT = 16;
-const HEADER_FILL = 'FF1F4E78'; // deep blue band
-const HEADER_FONT = 'FFFFFFFF';
+const HEADER_FILL = 'FFD9D2E9'; // lavender — matches the summary-header band on row 6
+const HEADER_FONT = 'FF000000'; // black text reads better on the light lavender
 const META_FILL = 'FFDCE6F1'; // soft blue for meta rows
-const CATEGORY_FILL = 'FFFFF2CC'; // soft yellow for group dividers
+const CATEGORY_FILL = 'FFD9D2E9'; // same lavender for group dividers (Accessing / GUI / Function)
 const BORDER_COLOR = 'FFBFBFBF';
 
 type AnyCell = ExcelJS.Cell;
@@ -51,111 +53,180 @@ export function renderXlsx(
     return `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}/${d.getFullYear()}`;
   })();
 
-  const total = summary.total || 1;
-  const pct = (n: number) => `${Math.round((n / total) * 100)}%`;
-
-  // -- Column widths (matches CSV column order) --
+  // -- Column widths matching template_report.xlsx (Sample sheet) --
   ws.columns = [
-    { width: 18 }, // TC ID
-    { width: 42 }, // Category 1
-    { width: 14 }, // Category 2
-    { width: 26 }, // Category 3
-    { width: 14 }, // Category 4
-    { width: 36 }, // Pre-condition
-    { width: 30 }, // Test Data
-    { width: 46 }, // Steps
-    { width: 52 }, // Expected results
-    { width: 10 }, // Priority
-    { width: 14 }, // Testcase type
-    { width: 14 }, // Test Result
-    { width: 14 }, // Executed Date
-    { width: 16 }, // Test Executor
-    { width: 38 }, // Test Environment
-    { width: 40 }, // Note
+    { width: 20 },    // A — TC ID (wider to fit long flow IDs like FLOW-KUDO-…)
+    { width: 12.5 },  // B — Screen/Function
+    { width: 15.38 }, // C — Big item
+    { width: 16.25 }, // D — Medium item
+    { width: 17 },    // E — Test Object
+    { width: 25.5 },  // F — Pre-condition
+    { width: 24.88 }, // G — Test Data
+    { width: 24.88 }, // H — Steps
+    { width: 41 },    // I — Expected results
+    { width: 12 },    // J — Priority
+    { width: 13.5 },  // K — Testcase type
+    { width: 15.88 }, // L — Test Result
+    { width: 13.5 },  // M — Executed Date
+    { width: 16.5 },  // N — Test Executor
+    { width: 23 },    // O — Test Environment
+    { width: 29 },    // P — Note
   ];
 
-  // -- Top metadata band (rows 1-4) --
+  // -- Top metadata band (rows 1-4) — 1:1 with template_report.xlsx --
+  const TIMES = 'Times New Roman';
+  const ARIAL_FONT = 'Arial';
+  const BLACK = { argb: 'FF000000' };
+  const WHITE = { argb: 'FFFFFFFF' };
+  const LAVENDER = { argb: 'FFD9D2E9' };
+  const thinBlack = { style: 'thin' as const, color: BLACK };
+  const allBordersBlack = { top: thinBlack, left: thinBlack, bottom: thinBlack, right: thinBlack };
+
+  // Ensure rows 1..8 exist before merging.
+  for (let r = 1; r <= 8; r++) ws.getRow(r);
+
+  ws.mergeCells('A1:C3');
+  ws.mergeCells('D1:F3');
+  ws.mergeCells('G1:H1');
+  ws.mergeCells('G2:H2');
+  ws.mergeCells('G3:H3');
+  ws.mergeCells('A4:F4');
+  ws.mergeCells('G4:H4');
+
+  // A1 (logo band, merged A1:C3) — border + embedded Sun* logo (base64 inline).
+  const a1 = ws.getCell('A1');
+  a1.alignment = { horizontal: 'center', vertical: 'middle' };
+  a1.border = allBordersBlack;
+
+  try {
+    const imageId = wb.addImage({
+      buffer: Buffer.from(SUN_LOGO_PNG_BASE64, 'base64') as unknown as ExcelJS.Buffer,
+      extension: 'png',
+    });
+    // Centre a fixed-size 90×51 logo inside A1:C3 using absolute EMU offsets.
+    // Col widths (A=20, B=12.5, C=15.38) → pixels via Excel's `w*7+5` rule:
+    //   A=145, B=92.5, C=112.66  ⇒  A1:C3 ≈ 350 px wide.
+    // Left padding for a 90-px image = (350−90)/2 ≈ 130 px = 1,237,500 EMU.
+    // 3 default rows × 20 px = 60 px; top padding ≈ 4.5 px ≈ 42,862 EMU.
+    ws.addImage(imageId, {
+      tl: { nativeCol: 0, nativeColOff: 1237500, nativeRow: 0, nativeRowOff: 42862 } as unknown as ExcelJS.Anchor,
+      ext: { width: 90, height: 51 },
+      editAs: 'oneCell',
+    } as unknown as ExcelJS.ImageRange);
+  } catch { /* logo is decorative — never block export */ }
+
+  // D1 (TESTCASE title)
   const titleLabel = `${summary.screen.toUpperCase()} TESTCASE`;
-  const titleRow = ws.addRow(['', '', '', titleLabel, '', '', 'No: BM-2-901-13']);
-  titleRow.getCell(4).font = { bold: true, size: 16 };
-  titleRow.getCell(4).alignment = { horizontal: 'center', vertical: 'middle' };
-  ws.mergeCells(titleRow.number, 4, titleRow.number, 6);
-  titleRow.getCell(7).font = { bold: true };
-  titleRow.height = 22;
-
-  const versionRow = ws.addRow(['', '', '', '', '', '', `Version: ${getPackageVersion()}`]);
-  versionRow.getCell(7).font = { bold: true };
-  const dateRow = ws.addRow(['', '', '', '', '', '', `Issue Date: ${issueDate}`]);
-  dateRow.getCell(7).font = { bold: true };
-  const companyRow = ws.addRow([
-    'SUN ASTERISK VIETNAM CO., LTD',
-    '',
-    '',
-    '',
-    '',
-    '',
-    'ISO/IEC 27001:2022 & ISO 9001:2015',
-  ]);
-  companyRow.getCell(1).font = { bold: true };
-  companyRow.getCell(7).font = { bold: true };
+  const d1 = ws.getCell('D1');
+  d1.value = titleLabel;
+  d1.font = { bold: true, size: 18, name: TIMES };
+  d1.alignment = { horizontal: 'center', vertical: 'middle', wrapText: true };
+  d1.border = allBordersBlack;
 
-  ws.addRow([]); // spacer
+  // G1 — No: BM-2-901-13
+  const g1 = ws.getCell('G1');
+  g1.value = 'No: BM-2-901-13';
+  g1.font = { size: 12, name: TIMES };
+  g1.alignment = { vertical: 'middle' };
+  g1.border = { top: thinBlack, left: thinBlack, right: thinBlack };
 
-  // -- Summary band --
-  const summaryHeader = ws.addRow([
-    '',
-    '',
-    'Total TCs',
-    'Passed',
-    'Failed',
-    'Pending',
-    'N/A',
-    'Remaining',
-  ]);
-  for (let i = 3; i <= 8; i++) {
-    const c = summaryHeader.getCell(i);
-    c.font = { bold: true, color: { argb: HEADER_FONT } };
-    c.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: HEADER_FILL } };
-    c.alignment = { horizontal: 'center', vertical: 'middle' };
-    applyBorder(c);
+  // G2 — Version
+  const g2 = ws.getCell('G2');
+  g2.value = `Version: ${getPackageVersion()}`;
+  g2.font = { size: 12, name: TIMES };
+  g2.alignment = { vertical: 'middle' };
+  g2.border = { left: thinBlack, right: thinBlack };
+
+  // G3 — Issue Date
+  const g3 = ws.getCell('G3');
+  g3.value = `Issue Date: ${issueDate}`;
+  g3.font = { size: 12, name: TIMES };
+  g3.alignment = { vertical: 'middle' };
+  g3.border = { left: thinBlack, right: thinBlack, bottom: thinBlack };
+
+  // A4 — SUN ASTERISK VIETNAM CO., LTD
+  const a4 = ws.getCell('A4');
+  a4.value = 'SUN ASTERISK VIETNAM CO., LTD';
+  a4.font = { bold: true, size: 10, name: TIMES };
+  a4.alignment = { vertical: 'middle' };
+  a4.border = allBordersBlack;
+
+  // G4 — ISO/IEC ...
+  const g4 = ws.getCell('G4');
+  g4.value = 'ISO/IEC 27001:2022 & ISO 9001:2015';
+  g4.font = { bold: true, size: 10, name: TIMES };
+  g4.alignment = { horizontal: 'right', vertical: 'middle', wrapText: true };
+  g4.border = allBordersBlack;
+
+  // -- Row 5: spacer (height auto-fit). --
+
+  // -- Row 6: Summary headers (cols C..H), lavender fill --
+  const sumLabels: Record<string, string> = {
+    C: 'Total TCs', D: 'Passed', E: 'Failed', F: 'Pending', G: 'N/A', H: 'Remaining',
+  };
+  for (const [col, label] of Object.entries(sumLabels)) {
+    const c = ws.getCell(`${col}6`);
+    c.value = label;
+    c.font = { bold: true, size: 10, color: BLACK, name: ARIAL_FONT };
+    c.fill = { type: 'pattern', pattern: 'solid', fgColor: LAVENDER };
+    c.alignment = { horizontal: 'center', vertical: 'top' };
+    c.border = allBordersBlack;
   }
+  // No explicit height → Excel auto-fits this row's content.
 
-  const summaryCounts = ws.addRow([
-    '',
-    '',
-    summary.total,
-    summary.passed,
-    summary.failed,
-    summary.pending,
-    summary.na,
-    summary.pending + summary.na,
-  ]);
-  for (let i = 3; i <= 8; i++) {
-    const c = summaryCounts.getCell(i);
-    c.font = { bold: true };
-    c.alignment = { horizontal: 'center' };
-    c.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: META_FILL } };
-    applyBorder(c);
+  // -- Row 7: Counts (cols C..H), live formulas referencing the data area --
+  // Data table starts at row 15 (col header at row 14, divider at row 14? actually
+  // header at row 13 + divider at 14 + first data at 15). The formulas read col L
+  // (Test Result) for status counts, col A (TC ID) for total via COUNTA.
+  const COUNT_RANGE_END = 10000;
+  const r7Values: Record<string, ExcelJS.CellValue> = {
+    C: { formula: `COUNTA(A15:A${COUNT_RANGE_END})`, result: summary.total } as ExcelJS.CellFormulaValue,
+    D: { formula: `COUNTIF(L15:L${COUNT_RANGE_END},"Passed")`, result: summary.passed } as ExcelJS.CellFormulaValue,
+    E: { formula: `COUNTIF(L15:L${COUNT_RANGE_END},"Failed")`, result: summary.failed } as ExcelJS.CellFormulaValue,
+    F: { formula: `COUNTIF(L15:L${COUNT_RANGE_END},"Pending")`, result: summary.pending } as ExcelJS.CellFormulaValue,
+    G: { formula: `COUNTIF(L15:L${COUNT_RANGE_END},"N/A")`, result: summary.na } as ExcelJS.CellFormulaValue,
+    H: { formula: 'C7-D7-G7', result: summary.failed + summary.pending } as ExcelJS.CellFormulaValue,
+  };
+  for (const [col, val] of Object.entries(r7Values)) {
+    const c = ws.getCell(`${col}7`);
+    c.value = val;
+    c.font = { size: 10, color: BLACK, name: ARIAL_FONT };
+    c.fill = { type: 'pattern', pattern: 'solid', fgColor: WHITE };
+    c.alignment = { horizontal: 'center', vertical: 'top' };
+    c.border = allBordersBlack;
+    if (col === 'H') c.numFmt = '#,##0';
   }
+  // No explicit height → Excel auto-fits.
 
-  const summaryPct = ws.addRow([
-    '',
-    '',
-    '',
-    pct(summary.passed),
-    pct(summary.failed),
-    pct(summary.pending),
-    pct(summary.na),
-    pct(summary.pending + summary.na),
-  ]);
-  for (let i = 4; i <= 8; i++) {
-    const c = summaryPct.getCell(i);
-    c.alignment = { horizontal: 'center' };
-    c.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: META_FILL } };
-    applyBorder(c);
+  // C8 has no value in the template but still needs a border so the band
+  // visually closes underneath "Total TCs".
+  const c8 = ws.getCell('C8');
+  c8.font = { size: 10, color: BLACK, name: ARIAL_FONT };
+  c8.fill = { type: 'pattern', pattern: 'solid', fgColor: WHITE };
+  c8.alignment = { horizontal: 'center', vertical: 'top' };
+  c8.border = allBordersBlack;
+
+  // -- Row 8: Percentages (cols D..H), formula = count / (Total − N/A) --
+  const r8Values: Record<string, ExcelJS.CellValue> = {
+    D: { formula: 'IFERROR(D7/(C7-G7),0)', result: summary.passed / Math.max(1, summary.total - summary.na) } as ExcelJS.CellFormulaValue,
+    E: { formula: 'IFERROR(E7/(C7-G7),0)', result: summary.failed / Math.max(1, summary.total - summary.na) } as ExcelJS.CellFormulaValue,
+    F: { formula: 'IFERROR(F7/(C7-G7),0)', result: summary.pending / Math.max(1, summary.total - summary.na) } as ExcelJS.CellFormulaValue,
+    G: { formula: 'IFERROR(G7/(C7-G7),0)', result: summary.na / Math.max(1, summary.total - summary.na) } as ExcelJS.CellFormulaValue,
+    H: { formula: 'IFERROR(H7/(C7-G7),0)', result: (summary.failed + summary.pending) / Math.max(1, summary.total - summary.na) } as ExcelJS.CellFormulaValue,
+  };
+  for (const [col, val] of Object.entries(r8Values)) {
+    const c = ws.getCell(`${col}8`);
+    c.value = val;
+    c.font = { size: 10, color: BLACK, name: ARIAL_FONT };
+    c.fill = { type: 'pattern', pattern: 'solid', fgColor: WHITE };
+    c.alignment = { horizontal: 'center', vertical: 'top' };
+    c.border = allBordersBlack;
+    c.numFmt = '0%';
   }
+  // No explicit height → Excel auto-fits.
 
-  ws.addRow([]); // spacer
+  // After rows 1-8 are populated, append a blank row 9 spacer.
+  while (ws.rowCount < 9) ws.addRow([]);
 
   const specRow = ws.addRow(['Spec/Design link:', specLink]);
   specRow.getCell(1).font = { bold: true };
@@ -169,10 +240,10 @@ export function renderXlsx(
   // -- Column header row (bold, filled, wrapped) --
   const headerRow = ws.addRow([
     'TC ID*',
-    '{Category 1}',
-    '{Category 2}',
-    '{Category 3}',
-    '{Category 4}',
+    'Screen/Function',
+    'Big item',
+    'Medium item',
+    'Test Object',
     'Pre-condition',
     'Test Data',
     'Steps*',
@@ -222,10 +293,10 @@ export function renderXlsx(
     for (const r of groupRows) {
       const row = ws.addRow([
         r.tcId,
-        r.category1,
         '',
         '',
         '',
+        r.category1,
         r.precondition,
         r.testData,
         r.steps,
@@ -278,6 +349,17 @@ export function renderXlsx(
     to: { row: ws.rowCount, column: COL_COUNT },
   };
 
+  // Sheet protection lets the picLocks on the embedded logo take effect
+  // (Excel honours image locks only when the sheet is protected). Empty
+  // password — QA can run Review → Unprotect Sheet if they need to edit.
+  // `objects: false` here is ExcelJS's inverted semantic that writes
+  // `objects="1"` in XML (= objects ARE locked).
+  (ws as unknown as { sheetProtection: object }).sheetProtection = {
+    sheet: true,
+    objects: false,
+    scenarios: false,
+  };
+
   return wb;
 }
 
@@ -293,9 +375,41 @@ export async function writeXlsx(
   const outDir = path.join(cwd, 'qa', 'deliverables');
   if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
   const outPath = path.join(outDir, `${screen}-testcases.xlsx`);
-  await wb.xlsx.writeFile(outPath);
+  const buffer = await wb.xlsx.writeBuffer();
+  const locked = await lockEmbeddedImages(Buffer.from(buffer as ArrayBuffer));
+  fs.writeFileSync(outPath, locked);
   return outPath;
 }
 
+/**
+ * Post-process the workbook buffer: extend `<a:picLocks>` on every drawing
+ * with `noMove`, `noResize`, `noSelect`. Combined with the sheet protection
+ * above, the embedded logo can't be dragged, resized, or selected via the UI.
+ */
+export async function lockEmbeddedImages(buffer: Buffer): Promise<Buffer> {
+  const zip = await JSZip.loadAsync(buffer);
+  const drawingFiles = Object.keys(zip.files).filter(
+    (name) => /^xl\/drawings\/drawing\d+\.xml$/.test(name)
+  );
+  for (const name of drawingFiles) {
+    const file = zip.file(name);
+    if (!file) continue;
+    const xml = await file.async('string');
+    const patched = xml.replace(
+      /<a:picLocks([^/]*)\/>/g,
+      (_match, attrs: string) => {
+        const has = (k: string) => new RegExp(`\\b${k}=`).test(attrs);
+        const additions = ['noMove', 'noResize', 'noSelect']
+          .filter((k) => !has(k))
+          .map((k) => ` ${k}="1"`)
+          .join('');
+        return `<a:picLocks${attrs}${additions}/>`;
+      }
+    );
+    zip.file(name, patched);
+  }
+  return zip.generateAsync({ type: 'nodebuffer', compression: 'DEFLATE' });
+}
+
 void applyBorder;
 void ({} as AnyRow);

package/src/orchestrator/project-initializer.ts

@@ -450,8 +450,9 @@ export class ProjectInitializer {
     console.log(`📦 Installing ${missingDeps.join(', ')}...\n`);
     execSync(`npm install -D ${missingDeps.join(' ')}`, execOpts);
 
-    console.log('\n🎭 Installing Playwright browsers...\n');
-    execSync('npx playwright install', execOpts);
+    console.log('\n🎭 Installing Chromium (default browser)...\n');
+    execSync('npx playwright install --with-deps chromium', execOpts);
+    console.log('\n💡 To install other browsers: npm run install:browsers -- firefox webkit\n');
   }
 
   /**
@@ -477,7 +478,7 @@ export class ProjectInitializer {
       'test:ui': 'playwright test specs/generated/ --ui',
       'report': 'playwright show-report',
       'generate': 'sungen generate --all',
-      'install:browsers': 'npx playwright install chromium',
+      'install:browsers': 'npx playwright install',
     };
 
     let added = 0;

package/src/orchestrator/templates/playwright.config.ts

@@ -13,6 +13,8 @@ import { defineConfig, devices } from '@playwright/test';
  */
 export default defineConfig({
   testDir: './specs/generated',
+  /* Output directory for test artifacts (screenshots, videos, traces). */
+  outputDir: './test-results',
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */

package/src/orchestrator/templates/specs-base.ts

@@ -66,14 +66,10 @@ const test = base.extend<{
 }>({
   screenshotOnFailure: [false, { option: true }],
 
-  page: async ({ browser, storageState }, use) => {
-    const context = storageState
-      ? await browser.newContext({ storageState })
-      : await browser.newContext();
+  page: async ({ context }, use) => {
     const page = await context.newPage();
     await use(page);
     await page.close();
-    await context.close();
   },
 
   _autoScreenshot: [async ({ page, screenshotOnFailure }, use, testInfo) => {