[SKILL] playwright-recording-processor

---
name: playwright-recording-processor
description: "Transforms raw Playwright codegen recordings into production-ready E2E tests through trimming, classification, and assertion injection. Use when processing codegen session recordings, trimming recorded browser sessions to a marker URL, classifying recordings as happy-path or bug-repro flows, or injecting diagnostic capture into reproduction tests. Invoke to convert a raw codegen recording into a maintainable test file or to build a bug reproduction test with console/network/state diagnostics."
license: MIT
metadata:
  author: https://github.com/Jeffallan
  version: "1.0.0"
  domain: quality
  triggers: codegen, recording, trim, marker URL, bug repro, diagnostic capture, session recording, Playwright codegen, recording processing, test generation
  role: specialist
  scope: implementation
  output-format: code
  related-skills: playwright-expert, test-master
---

await expect(page).toHaveURL('/dashboard');
await expect(page).toHaveURL(/\/invoices\/\d+/);  // regex for dynamic IDs
await expect(page).not.toHaveURL('/login');        // confirm not redirected out

await expect(page.getByText('Submission successful')).toBeVisible();
await expect(page.getByRole('alert')).toBeVisible();
await expect(page.getByTestId('loading-spinner')).toBeHidden();
await expect(page.getByRole('dialog')).not.toBeVisible();

await expect(page.getByLabel('Email')).toHaveValue('[email protected]');
await expect(page.getByRole('checkbox', { name: 'Remember me' })).toBeChecked();
await expect(page.getByRole('button', { name: 'Submit' })).toBeDisabled();
await expect(page.getByRole('button', { name: 'Submit' })).toBeEnabled();

await expect(page.getByRole('heading')).toHaveText('Invoice Export');
await expect(page.getByRole('status')).toContainText('3 items');
await expect(page.locator('table')).toContainText('Q1 2024');

await expect(page.getByRole('listitem')).toHaveCount(5);
await expect(page.locator('tr')).toHaveCount(11); // 10 rows + header

const downloadPromise = page.waitForEvent('download');
await page.getByRole('button', { name: 'Download' }).click();
const download = await downloadPromise;
expect(download.suggestedFilename()).toMatch(/\.csv$/);

// Must catch before it disappears
const toast = page.getByRole('status');
await expect(toast).toBeVisible();
await expect(toast).toContainText('Saved');

const row = page.getByRole('row', { name: /Invoice #1042/ });
await expect(row.getByRole('cell', { name: 'Paid' })).toBeVisible();

const errors: string[] = [];
page.on('console', m => { if (m.type() === 'error') errors.push(m.text()); });

const failed: string[] = [];
page.on('requestfailed', r => failed.push(`${r.method()} ${r.url()}`));

const state = await page.locator('#submit-btn').evaluate(el => ({
  disabled: (el as HTMLButtonElement).disabled,
  visible: (el as HTMLElement).offsetParent !== null,
  text: el.textContent?.trim(),
  ariaLabel: el.getAttribute('aria-label'),
}));

await test.info().attach('session-diagnostics', {
  body: JSON.stringify({ errors, failed, state, ts: new Date().toISOString() }, null, 2),
  contentType: 'application/json',
});

npx ts-node scripts/trim-recording.ts <input> <marker-url> <output> [fixture-name]

npx ts-node scripts/trim-recording.ts \
  recordings/raw-session-20240315.spec.ts \
  /invoices/export \
  e2e/invoice-export.spec.ts \
  authenticatedPage

#!/usr/bin/env ts-node
/**
 * trim-recording.ts
 * Trims a raw Playwright codegen recording to a marker URL entry point.
 *
 * Usage:
 *   ts-node trim-recording.ts <input-file> <marker-url> <output-file> [fixture-name]
 *
 * Example:
 *   ts-node trim-recording.ts recordings/raw.spec.ts /invoices/export e2e/invoice-export.spec.ts authenticatedPage
 */
import * as fs from 'fs';
import * as path from 'path';

const [inputFile, markerUrl, outputFile, fixtureName = 'authenticatedPage'] = process.argv.slice(2);

if (!inputFile || !markerUrl || !outputFile) {
  console.error('Usage: ts-node trim-recording.ts <input> <markerUrl> <output> [fixtureName]');
  console.error('');
  console.error('  input       Path to raw codegen recording (.spec.ts)');
  console.error('  markerUrl   URL path to trim to, e.g. /invoices/export');
  console.error('  output      Path for trimmed output file');
  console.error('  fixtureName Auth fixture name (default: authenticatedPage)');
  process.exit(1);
}

if (!fs.existsSync(inputFile)) {
  console.error(`Input file not found: ${inputFile}`);
  process.exit(1);
}

const raw = fs.readFileSync(inputFile, 'utf-8');
const lines = raw.split('\n');

// Find the line where the marker URL first appears in a goto() call
const markerIndex = lines.findIndex(line =>
  line.includes('page.goto(') && line.includes(markerUrl)
);

if (markerIndex === -1) {
  console.error(`Marker URL "${markerUrl}" not found in any page.goto() call.`);
  console.error('');
  console.error('URLs found in recording:');
  lines
    .filter(l => l.includes('page.goto('))
    .forEach(l => console.error(' ', l.trim()));
  process.exit(1);
}

// Extract imports from top of file
const imports = lines.filter(line =>
  line.startsWith('import') || line.startsWith('const {')
);

// Everything from the marker line down becomes the test body
const body = lines.slice(markerIndex);

// Derive a test name from the output filename
const testName = path.basename(outputFile, '.spec.ts')
  .replace(/-/g, ' ')
  .replace(/\b\w/g, c => c.toUpperCase());

// Build output
const output = [
  imports.join('\n'),
  '',
  `test('${testName}', async ({ ${fixtureName}: page }) => {`,
  body.join('\n'),
].join('\n').trimEnd();

// Ensure output directory exists
const outputDir = path.dirname(outputFile);
if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
}

fs.writeFileSync(outputFile, output + '\n');

const linesRemoved = markerIndex;
const linesKept = body.length;

console.log('');
console.log('Recording trimmed successfully');
console.log(`  Input:         ${inputFile}`);
console.log(`  Output:        ${outputFile}`);
console.log(`  Marker URL:    ${markerUrl} (line ${markerIndex + 1})`);
console.log(`  Auth fixture:  ${fixtureName}`);
console.log(`  Lines removed: ${linesRemoved} (pre-feature activity)`);
console.log(`  Lines kept:    ${linesKept}`);
console.log('');
console.log('Next steps:');
console.log('  1. Review output -- add assertions at key checkpoints');
console.log('  2. Harden any positional or CSS locators');
console.log('  3. Parameterize hardcoded dynamic values');
console.log('  4. Tag: @happy-path or @bug-repro');

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
  await page.goto('https://app.example.com/login');
  await page.getByLabel('Email').fill('[email protected]');
  await page.getByLabel('Password').fill('password123');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await page.getByRole('link', { name: 'Invoices' }).click();
  await page.goto('https://app.example.com/invoices/export');
  await page.getByLabel('Date Range').fill('last-30-days');
  await page.getByRole('button', { name: 'Download' }).click();
});

import { test, expect } from '@playwright/test';

test('Invoice Export', async ({ authenticatedPage: page }) => {
  await page.goto('https://app.example.com/invoices/export');
  await page.getByLabel('Date Range').fill('last-30-days');
  await page.getByRole('button', { name: 'Download' }).click();
});

/**
 * BUG REPRODUCTION TEST
 * Reported: 2024-03-15
 * Symptom: Export button does nothing after selecting date range
 * Browser: captured at runtime (see diagnosticReport)
 * Steps to reproduce: trimmed from user session recording
 * Expected: CSV download starts
 * Actual: Button click has no effect, no error shown
 */

// Capture environment at session start
const browserName = page.context().browser()?.browserType().name();
const viewport = page.viewportSize();
const userAgent = await page.evaluate(() => navigator.userAgent);

const consoleErrors: string[] = [];
page.on('console', msg => {
  if (msg.type() === 'error') consoleErrors.push(msg.text());
});

// Also catch uncaught exceptions
const pageErrors: string[] = [];
page.on('pageerror', err => pageErrors.push(err.message));

const failedRequests: { method: string; url: string; error: string }[] = [];
page.on('requestfailed', req => {
  failedRequests.push({
    method: req.method(),
    url: req.url(),
    error: req.failure()?.errorText ?? 'unknown',
  });
});

// Also capture non-2xx responses
const badResponses: { status: number; url: string }[] = [];
page.on('response', res => {
  if (res.status() >= 400) {
    badResponses.push({ status: res.status(), url: res.url() });
  }
});

const elementSnapshot = await page.locator('[data-testid="submit-btn"]').evaluate(el => ({
  disabled: (el as HTMLButtonElement).disabled,
  visible: (el as HTMLElement).offsetParent !== null,
  text: el.textContent,
  classes: el.className,
  ariaLabel: el.getAttribute('aria-label'),
  boundingBox: el.getBoundingClientRect().toJSON(),
}));

await test.info().attach('diagnostic-report', {
  body: JSON.stringify({
    browser: browserName,
    viewport,
    userAgent,
    consoleErrors,
    pageErrors,
    failedRequests,
    badResponses,
    elementSnapshot,
    timestamp: new Date().toISOString(),
  }, null, 2),
  contentType: 'application/json',
});

import { test, expect } from '@playwright/test';

/**
 * BUG REPRODUCTION TEST
 * Reported: 2024-03-15
 * Symptom: Export button does nothing after selecting date range
 * Expected: CSV download starts
 * Actual: Button click has no effect
 */
test('invoice-export-bug-repro @bug-repro', async ({ authenticatedPage: page }) => {
  // -- Diagnostic setup --
  const browserName = page.context().browser()?.browserType().name();
  const viewport = page.viewportSize();
  const userAgent = await page.evaluate(() => navigator.userAgent);

  const consoleErrors: string[] = [];
  page.on('console', m