@pedropaulovc/playwright-core 1.59.0-alpha-1769214875000

package/lib/server/trace/exporter/traceExporter.js

@@ -0,0 +1,1102 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var traceExporter_exports = {};
+__export(traceExporter_exports, {
+  exportTraceToMarkdown: () => exportTraceToMarkdown
+});
+module.exports = __toCommonJS(traceExporter_exports);
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
+var import_zipFile = require("../../utils/zipFile");
+var import_stringUtils = require("../../../utils/isomorphic/stringUtils");
+async function exportTraceToMarkdown(traceFile, options) {
+  const context = await parseTrace(traceFile);
+  const outputDir = options.outputDir;
+  const assetsDir = import_path.default.join(outputDir, "assets");
+  const snapshotsDir = import_path.default.join(assetsDir, "snapshots");
+  await import_fs.default.promises.mkdir(outputDir, { recursive: true });
+  await import_fs.default.promises.mkdir(snapshotsDir, { recursive: true });
+  const assetMap = await extractAssets(traceFile, context, outputDir);
+  const files = [
+    { name: "README.md", content: generateReadmeMarkdown() },
+    { name: "index.md", content: generateIndexMarkdown(context, traceFile) },
+    { name: "metadata.md", content: generateMetadataMarkdown(context) },
+    { name: "timeline.md", content: generateTimelineMarkdown(context.actions, assetMap, buildStepSnapshotMap(context.actions)) },
+    { name: "errors.md", content: generateErrorsMarkdown(context.errors, context.actions) },
+    { name: "console.md", content: generateConsoleMarkdown(context.events) },
+    { name: "network.md", content: generateNetworkMarkdown(context.resources) },
+    { name: "filmstrip.md", content: generateFilmstripMarkdown(context.pages, context.startTime, assetMap) },
+    { name: "attachments.md", content: generateAttachmentsMarkdown(context.actions, assetMap) }
+  ];
+  for (const file of files)
+    await import_fs.default.promises.writeFile(import_path.default.join(outputDir, file.name), file.content);
+}
+async function parseTrace(traceFile) {
+  const zipFile = new import_zipFile.ZipFile(traceFile);
+  const entries = await zipFile.entries();
+  const context = {
+    browserName: "Unknown",
+    wallTime: 0,
+    startTime: Number.MAX_SAFE_INTEGER,
+    endTime: 0,
+    options: {},
+    actions: [],
+    events: [],
+    errors: [],
+    resources: [],
+    pages: [],
+    snapshots: [],
+    networkResourceMap: /* @__PURE__ */ new Map()
+  };
+  const actionMap = /* @__PURE__ */ new Map();
+  const pageMap = /* @__PURE__ */ new Map();
+  const traceEntries = entries.filter((name) => name.endsWith(".trace"));
+  const networkEntries = entries.filter((name) => name.endsWith(".network"));
+  for (const entryName of [...traceEntries, ...networkEntries]) {
+    const content = await zipFile.read(entryName);
+    const lines = content.toString("utf-8").split("\n");
+    for (const line of lines) {
+      if (!line.trim())
+        continue;
+      try {
+        const event = JSON.parse(line);
+        processTraceEvent(event, context, actionMap, pageMap);
+      } catch {
+      }
+    }
+  }
+  context.actions = [...actionMap.values()].sort((a, b) => a.startTime - b.startTime);
+  context.pages = [...pageMap.values()];
+  for (const action of context.actions) {
+    if (action.endTime > context.endTime)
+      context.endTime = action.endTime;
+  }
+  zipFile.close();
+  return context;
+}
+function processTraceEvent(event, context, actionMap, pageMap) {
+  switch (event.type) {
+    case "context-options":
+      context.browserName = event.browserName || "Unknown";
+      context.channel = event.channel;
+      context.title = event.title;
+      context.platform = event.platform;
+      context.playwrightVersion = event.playwrightVersion;
+      context.wallTime = event.wallTime || 0;
+      context.startTime = event.monotonicTime || 0;
+      context.sdkLanguage = event.sdkLanguage;
+      context.options = event.options || {};
+      break;
+    case "before":
+      actionMap.set(event.callId, {
+        callId: event.callId,
+        class: event.class,
+        method: event.method,
+        params: event.params || {},
+        startTime: event.startTime || 0,
+        endTime: 0,
+        log: [],
+        stack: event.stack,
+        beforeSnapshot: event.beforeSnapshot,
+        pageId: event.pageId,
+        parentId: event.parentId,
+        title: event.title,
+        group: event.group,
+        stepId: event.stepId
+      });
+      break;
+    case "after":
+      const action = actionMap.get(event.callId);
+      if (action) {
+        action.endTime = event.endTime || action.startTime;
+        action.error = event.error;
+        action.result = event.result;
+        action.afterSnapshot = event.afterSnapshot;
+        if (event.attachments?.length) {
+          action.attachments = event.attachments.map((a) => ({
+            name: a.name,
+            contentType: a.contentType,
+            path: a.path,
+            sha1: a.sha1
+          }));
+        }
+      }
+      break;
+    case "log":
+      const logAction = actionMap.get(event.callId);
+      if (logAction) {
+        logAction.log.push({
+          time: event.time || 0,
+          message: event.message || ""
+        });
+      }
+      break;
+    case "console":
+      context.events.push({
+        type: "console",
+        time: event.time || 0,
+        messageType: event.messageType,
+        text: event.text,
+        location: event.location
+      });
+      break;
+    case "error":
+      context.errors.push({
+        message: event.message || "Unknown error",
+        stack: event.stack
+      });
+      break;
+    case "resource-snapshot":
+      if (event.snapshot) {
+        const url = event.snapshot.request?.url || "";
+        const sha1 = event.snapshot.response?.content?._sha1;
+        context.resources.push({
+          request: {
+            method: event.snapshot.request?.method || "GET",
+            url
+          },
+          response: {
+            status: event.snapshot.response?.status || 0,
+            content: event.snapshot.response?.content,
+            _failureText: event.snapshot.response?._failureText
+          }
+        });
+        if (url && sha1)
+          context.networkResourceMap.set(url, sha1);
+      }
+      break;
+    case "screencast-frame":
+      let page = pageMap.get(event.pageId);
+      if (!page) {
+        page = { pageId: event.pageId, screencastFrames: [] };
+        pageMap.set(event.pageId, page);
+      }
+      page.screencastFrames.push({
+        sha1: event.sha1,
+        timestamp: event.timestamp || 0
+      });
+      break;
+    case "frame-snapshot":
+      if (event.snapshot) {
+        context.snapshots.push({
+          snapshotName: event.snapshot.snapshotName || "",
+          callId: event.snapshot.callId || "",
+          pageId: event.snapshot.pageId || "",
+          frameId: event.snapshot.frameId || "",
+          frameUrl: event.snapshot.frameUrl || "",
+          html: event.snapshot.html,
+          timestamp: event.snapshot.timestamp || 0,
+          resourceOverrides: event.snapshot.resourceOverrides || [],
+          doctype: event.snapshot.doctype,
+          viewport: event.snapshot.viewport
+        });
+      }
+      break;
+  }
+}
+async function extractAssets(traceFile, context, outputDir) {
+  const assetMap = /* @__PURE__ */ new Map();
+  const zipFile = new import_zipFile.ZipFile(traceFile);
+  const entries = await zipFile.entries();
+  const resourcesDir = import_path.default.join(outputDir, "assets", "resources");
+  await import_fs.default.promises.mkdir(resourcesDir, { recursive: true });
+  const snapshotsByFrame = /* @__PURE__ */ new Map();
+  for (const snapshot of context.snapshots) {
+    let frameSnapshots = snapshotsByFrame.get(snapshot.frameId);
+    if (!frameSnapshots) {
+      frameSnapshots = [];
+      snapshotsByFrame.set(snapshot.frameId, frameSnapshots);
+    }
+    frameSnapshots.push(snapshot);
+  }
+  const neededSha1s = /* @__PURE__ */ new Set();
+  for (const snapshot of context.snapshots) {
+    const frameSnapshots = snapshotsByFrame.get(snapshot.frameId) || [];
+    const snapshotIndex = frameSnapshots.indexOf(snapshot);
+    for (const override of snapshot.resourceOverrides) {
+      if (override.sha1) {
+        neededSha1s.add(override.sha1);
+      } else if (override.ref !== void 0 && snapshotIndex >= 0) {
+        const refIndex = snapshotIndex - override.ref;
+        if (refIndex >= 0 && refIndex < frameSnapshots.length) {
+          const refSnapshot = frameSnapshots[refIndex];
+          const refOverride = refSnapshot.resourceOverrides.find((o) => o.url === override.url);
+          if (refOverride?.sha1)
+            neededSha1s.add(refOverride.sha1);
+        }
+      }
+    }
+  }
+  for (const page of context.pages) {
+    for (const frame of page.screencastFrames)
+      neededSha1s.add(frame.sha1);
+  }
+  for (const sha1 of context.networkResourceMap.values())
+    neededSha1s.add(sha1);
+  const attachmentMap = /* @__PURE__ */ new Map();
+  for (const action of context.actions) {
+    if (action.attachments) {
+      for (const attachment of action.attachments) {
+        if (attachment.sha1)
+          attachmentMap.set(attachment.sha1, attachment.name);
+      }
+    }
+  }
+  for (const sha1 of neededSha1s) {
+    if (attachmentMap.has(sha1))
+      continue;
+    const resourcePath = `resources/${sha1}`;
+    if (!entries.includes(resourcePath))
+      continue;
+    try {
+      const buffer = await zipFile.read(resourcePath);
+      const fullPath = import_path.default.join(resourcesDir, sha1);
+      await import_fs.default.promises.writeFile(fullPath, buffer);
+      assetMap.set(sha1, `./assets/resources/${sha1}`);
+    } catch {
+    }
+  }
+  const attachmentsDir = import_path.default.join(outputDir, "assets", "attachments");
+  await import_fs.default.promises.mkdir(attachmentsDir, { recursive: true });
+  for (const [sha1, filename] of attachmentMap) {
+    const resourcePath = `resources/${sha1}`;
+    if (!entries.includes(resourcePath))
+      continue;
+    try {
+      const buffer = await zipFile.read(resourcePath);
+      const safeName = filename.replace(/[/\\:*?"<>|]/g, "_");
+      const fullPath = import_path.default.join(attachmentsDir, safeName);
+      await import_fs.default.promises.writeFile(fullPath, buffer);
+      assetMap.set(sha1, `./assets/attachments/${safeName}`);
+    } catch {
+    }
+  }
+  const snapshotsDir = import_path.default.join(outputDir, "assets", "snapshots");
+  await import_fs.default.promises.mkdir(snapshotsDir, { recursive: true });
+  for (const snapshot of context.snapshots) {
+    if (!snapshot.html || !snapshot.snapshotName)
+      continue;
+    try {
+      const frameSnapshots = snapshotsByFrame.get(snapshot.frameId) || [];
+      const snapshotIndex = frameSnapshots.indexOf(snapshot);
+      const renderer = new ExportSnapshotRenderer(frameSnapshots, snapshotIndex, context.networkResourceMap);
+      const html = renderer.render();
+      for (const sha1 of renderer.getUsedSha1s()) {
+        if (!assetMap.has(sha1)) {
+          const resourcePath = `resources/${sha1}`;
+          if (entries.includes(resourcePath)) {
+            try {
+              const buffer = await zipFile.read(resourcePath);
+              const fullPath2 = import_path.default.join(resourcesDir, sha1);
+              await import_fs.default.promises.writeFile(fullPath2, buffer);
+              assetMap.set(sha1, `./assets/resources/${sha1}`);
+            } catch {
+            }
+          }
+        }
+      }
+      const safeName = snapshot.snapshotName.replace(/[^a-zA-Z0-9@_-]/g, "_");
+      const relativePath = `assets/snapshots/${safeName}.html`;
+      const fullPath = import_path.default.join(outputDir, relativePath);
+      await import_fs.default.promises.writeFile(fullPath, html);
+      assetMap.set(snapshot.snapshotName, `./${relativePath}`);
+    } catch {
+    }
+  }
+  zipFile.close();
+  return assetMap;
+}
+function generateReadmeMarkdown() {
+  return `# Playwright Trace Export
+
+This folder contains a Playwright trace exported to LLM-friendly Markdown format.
+
+## Contents
+
+- **index.md** - Overview with test status and error summary
+- **timeline.md** - Step-by-step action timeline with links to DOM snapshots
+- **metadata.md** - Browser and environment information
+- **errors.md** - Full error details with stack traces
+- **console.md** - Browser console output
+- **network.md** - HTTP request log
+- **filmstrip.md** - Screenshot timeline
+- **attachments.md** - Test attachments
+
+## Viewing DOM Snapshots
+
+The exported DOM snapshots include CSS and can be viewed in a browser. Since snapshots use relative paths, you need to serve them via HTTP:
+
+\`\`\`bash
+# Using npx serve
+npx serve
+
+# Or using Python
+python -m http.server 8000
+\`\`\`
+
+Then open the snapshot URLs from \`timeline.md\`, for example:
+- http://localhost:3000/assets/snapshots/after@call@123.html (npx serve)
+- http://localhost:8000/assets/snapshots/after@call@123.html (Python)
+
+## Loading Snapshots with Playwright
+
+You can load exported snapshots into Playwright for automated DOM inspection:
+
+\`\`\`js
+const { chromium } = require('playwright');
+
+(async () => {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+
+  // Serve the export directory first, then:
+  await page.goto('http://localhost:3000/assets/snapshots/after@call@123.html');
+
+  // Inspect the DOM
+  const title = await page.title();
+  const buttons = await page.locator('button').all();
+  console.log(\`Page has \${buttons.length} buttons\`);
+
+  await browser.close();
+})();
+\`\`\`
+
+This is useful for LLM-based analysis where the AI can navigate and inspect the captured page state.
+`;
+}
+function generateIndexMarkdown(context, traceFile) {
+  const title = context.title || "Trace Export";
+  const duration = Math.round(context.endTime - context.startTime);
+  const actionCount = context.actions.length;
+  const errorCount = context.errors.length + context.actions.filter((a) => a.error).length;
+  const hasErrors = errorCount > 0;
+  const errorSummary = collectErrorSummary(context);
+  let md = `# Trace Export: ${title}
+
+`;
+  md += `**Test:** \`${title}\`
+`;
+  md += `**Source:** \`${traceFile}\`
+
+`;
+  md += `**Status:** ${hasErrors ? "FAILED" : "PASSED"} | **Duration:** ${duration}ms | **Actions:** ${actionCount} | **Errors:** ${errorCount}
+
+`;
+  if (errorSummary.length > 0) {
+    md += `## Error Summary
+`;
+    for (const error of errorSummary)
+      md += `- ${error}
+`;
+    md += "\n";
+  }
+  md += `## Sections
+`;
+  md += `- [Timeline](./timeline.md) - Step-by-step action timeline
+`;
+  md += `- [Metadata](./metadata.md) - Browser/environment info
+`;
+  md += `- [Errors](./errors.md) - Full error details with stack traces
+`;
+  md += `- [Console](./console.md) - Browser console output
+`;
+  md += `- [Network](./network.md) - HTTP request log
+`;
+  md += `- [Filmstrip](./filmstrip.md) - Screenshot timeline
+`;
+  md += `- [Attachments](./attachments.md) - Test attachments
+`;
+  return md;
+}
+function collectErrorSummary(context) {
+  const errors = [];
+  for (const error of context.errors)
+    errors.push(truncateString(stripAnsi(error.message), 100));
+  for (const action of context.actions) {
+    if (action.error)
+      errors.push(truncateString(stripAnsi(action.error.message), 100));
+  }
+  return errors.slice(0, 10);
+}
+function generateMetadataMarkdown(context) {
+  let md = `# Trace Metadata
+
+`;
+  md += `## Environment
+
+`;
+  md += `| Property | Value |
+`;
+  md += `|----------|-------|
+`;
+  md += `| Browser | ${context.browserName || "Unknown"} |
+`;
+  if (context.channel)
+    md += `| Channel | ${context.channel} |
+`;
+  if (context.platform)
+    md += `| Platform | ${context.platform} |
+`;
+  if (context.playwrightVersion)
+    md += `| Playwright Version | ${context.playwrightVersion} |
+`;
+  if (context.sdkLanguage)
+    md += `| SDK Language | ${context.sdkLanguage} |
+`;
+  md += `
+## Context Options
+
+`;
+  md += `| Property | Value |
+`;
+  md += `|----------|-------|
+`;
+  if (context.options.viewport)
+    md += `| Viewport | ${context.options.viewport.width}x${context.options.viewport.height} |
+`;
+  if (context.options.deviceScaleFactor)
+    md += `| Device Scale Factor | ${context.options.deviceScaleFactor} |
+`;
+  if (context.options.isMobile !== void 0)
+    md += `| Mobile | ${context.options.isMobile} |
+`;
+  if (context.options.userAgent)
+    md += `| User Agent | ${truncateString(context.options.userAgent, 80)} |
+`;
+  if (context.options.baseURL)
+    md += `| Base URL | ${context.options.baseURL} |
+`;
+  md += `
+## Timing
+
+`;
+  md += `| Property | Value |
+`;
+  md += `|----------|-------|
+`;
+  md += `| Wall Time | ${new Date(context.wallTime).toISOString()} |
+`;
+  md += `| Duration | ${Math.round(context.endTime - context.startTime)}ms |
+`;
+  return md;
+}
+function buildActionTree(actions) {
+  const itemMap = /* @__PURE__ */ new Map();
+  for (const action of actions) {
+    itemMap.set(action.callId, {
+      action,
+      children: [],
+      parent: void 0
+    });
+  }
+  const rootItem = {
+    action: {
+      callId: "root",
+      class: "Root",
+      method: "",
+      params: {},
+      startTime: actions[0]?.startTime || 0,
+      endTime: actions[actions.length - 1]?.endTime || 0,
+      log: []
+    },
+    children: [],
+    parent: void 0
+  };
+  for (const item of itemMap.values()) {
+    const parent = item.action.parentId ? itemMap.get(item.action.parentId) || rootItem : rootItem;
+    parent.children.push(item);
+    item.parent = parent;
+  }
+  const sortChildren = (item) => {
+    item.children.sort((a, b) => a.action.startTime - b.action.startTime);
+    for (const child of item.children)
+      sortChildren(child);
+  };
+  sortChildren(rootItem);
+  return rootItem;
+}
+function getActionTitle(action) {
+  if (action.title)
+    return action.title;
+  return `${action.class}.${action.method}`;
+}
+function buildStepSnapshotMap(actions) {
+  const map = /* @__PURE__ */ new Map();
+  for (const action of actions) {
+    if (action.stepId && (action.beforeSnapshot || action.afterSnapshot)) {
+      const existing = map.get(action.stepId) || {};
+      if (action.beforeSnapshot)
+        existing.before = action.beforeSnapshot;
+      if (action.afterSnapshot)
+        existing.after = action.afterSnapshot;
+      map.set(action.stepId, existing);
+    }
+  }
+  return map;
+}
+function generateTimelineMarkdown(actions, assetMap, stepSnapshotMap) {
+  if (actions.length === 0)
+    return `# Actions Timeline
+
+No actions recorded.
+`;
+  const filteredActions = actions.filter((action) => action.class === "Test");
+  const startTime = filteredActions[0]?.startTime || 0;
+  const totalDuration = filteredActions.length > 0 ? (filteredActions[filteredActions.length - 1].endTime || filteredActions[filteredActions.length - 1].startTime) - startTime : 0;
+  let md = `# Actions Timeline
+
+`;
+  md += `Total actions: ${filteredActions.length} | Duration: ${Math.round(totalDuration)}ms
+
+`;
+  const rootItem = buildActionTree(filteredActions);
+  const renderItem = (item, prefix, index, depth) => {
+    const action = item.action;
+    if (action.callId === "root")
+      return;
+    const number = prefix ? `${prefix}.${index}` : `${index}`;
+    const relativeTime = action.startTime - startTime;
+    const duration = (action.endTime || action.startTime) - action.startTime;
+    const hasError = !!action.error;
+    const title = getActionTitle(action);
+    const headingLevel = Math.min(depth + 1, 6);
+    const heading = "#".repeat(headingLevel);
+    md += `${heading} ${number}. ${title}${hasError ? " - ERROR" : ""}
+
+`;
+    md += `- **Start:** ${Math.round(relativeTime)}ms
+`;
+    md += `- **Duration:** ${Math.round(duration)}ms
+`;
+    if (action.params && Object.keys(action.params).length > 0 && action.group !== "internal") {
+      const paramsStr = formatParams(action.params);
+      if (paramsStr !== "{}")
+        md += `- **Params:** \`${paramsStr}\`
+`;
+    }
+    if (hasError)
+      md += `- **Error:** ${stripAnsi(action.error.message)}
+`;
+    else if (action.result !== void 0 && action.group !== "internal")
+      md += `- **Result:** ${formatResult(action.result)}
+`;
+    if (action.stack && action.stack.length > 0) {
+      const frame = action.stack[0];
+      md += `- **Source:** \`${frame.file}:${frame.line}\`
+`;
+    }
+    const stepSnapshots = stepSnapshotMap.get(action.callId);
+    const beforeSnapshotName = action.beforeSnapshot || stepSnapshots?.before;
+    const afterSnapshotName = action.afterSnapshot || stepSnapshots?.after;
+    const beforeSnapshot = beforeSnapshotName ? resolveSnapshotLink(beforeSnapshotName, assetMap) : null;
+    const afterSnapshot = afterSnapshotName ? resolveSnapshotLink(afterSnapshotName, assetMap) : null;
+    if (beforeSnapshot || afterSnapshot) {
+      const links = [];
+      if (beforeSnapshot)
+        links.push(`[before](${beforeSnapshot})`);
+      if (afterSnapshot)
+        links.push(`[after](${afterSnapshot})`);
+      md += `- **Snapshots:** ${links.join(" | ")}
+`;
+    }
+    if (action.attachments && action.attachments.length > 0) {
+      const attachmentLinks = action.attachments.filter((a) => a.sha1).map((a) => {
+        const resourcePath = assetMap.get(a.sha1) || `./assets/resources/${a.sha1}`;
+        return `[${a.name}](${resourcePath})`;
+      });
+      if (attachmentLinks.length > 0)
+        md += `- **Attachments:** ${attachmentLinks.join(" | ")}
+`;
+    }
+    if (action.log && action.log.length > 0) {
+      md += `
+<details><summary>Action Log</summary>
+
+`;
+      for (const entry of action.log)
+        md += `- ${entry.message}
+`;
+      md += `
+</details>
+`;
+    }
+    if (hasError && action.stack && action.stack.length > 0) {
+      md += `
+<details><summary>Stack Trace</summary>
+
+`;
+      md += "```\n";
+      md += `Error: ${stripAnsi(action.error.message)}
+`;
+      for (const frame of action.stack)
+        md += `  at ${frame.function || "(anonymous)"} (${frame.file}:${frame.line}:${frame.column})
+`;
+      md += "```\n\n";
+      md += `</details>
+`;
+    }
+    md += `
+`;
+    for (let i = 0; i < item.children.length; i++)
+      renderItem(item.children[i], number, i + 1, depth + 1);
+  };
+  for (let i = 0; i < rootItem.children.length; i++)
+    renderItem(rootItem.children[i], "", i + 1, 1);
+  return md;
+}
+function resolveSnapshotLink(snapshotName, assetMap) {
+  if (assetMap.has(snapshotName))
+    return assetMap.get(snapshotName);
+  for (const [key, assetPath] of assetMap) {
+    if (snapshotName.includes(key) || key.includes(snapshotName))
+      return assetPath;
+  }
+  return null;
+}
+function generateErrorsMarkdown(errors, actions) {
+  const allErrors = [];
+  for (const error of errors) {
+    allErrors.push({
+      message: stripAnsi(error.message),
+      stack: error.stack
+    });
+  }
+  for (const action of actions) {
+    if (action.error) {
+      allErrors.push({
+        message: stripAnsi(action.error.message),
+        stack: action.stack,
+        source: action.stack?.[0] ? `${action.stack[0].file}:${action.stack[0].line}` : void 0
+      });
+    }
+  }
+  if (allErrors.length === 0)
+    return `# Errors
+
+No errors recorded.
+`;
+  let md = `# Errors
+
+`;
+  md += `Total errors: ${allErrors.length}
+
+`;
+  for (let i = 0; i < allErrors.length; i++) {
+    const error = allErrors[i];
+    md += `## Error ${i + 1}
+
+`;
+    md += `**Message:** ${error.message}
+
+`;
+    if (error.source)
+      md += `**Source:** \`${error.source}\`
+
+`;
+    if (error.stack && error.stack.length > 0) {
+      md += `**Stack Trace:**
+
+`;
+      md += "```\n";
+      for (const frame of error.stack)
+        md += `  at ${frame.function || "(anonymous)"} (${frame.file}:${frame.line}:${frame.column})
+`;
+      md += "```\n\n";
+    }
+    md += `---
+
+`;
+  }
+  return md;
+}
+function generateConsoleMarkdown(events) {
+  const consoleEvents = events.filter((e) => e.type === "console");
+  if (consoleEvents.length === 0)
+    return `# Console Log
+
+No console messages recorded.
+`;
+  let md = `# Console Log
+
+`;
+  md += `Total messages: ${consoleEvents.length}
+
+`;
+  md += `| Time | Type | Message | Location |
+`;
+  md += `|------|------|---------|----------|
+`;
+  for (const event of consoleEvents) {
+    const message = truncateString(event.text || "", 100).replace(/\|/g, "\\|").replace(/\n/g, " ");
+    const location = event.location ? `${event.location.url}:${event.location.lineNumber}` : "";
+    md += `| ${event.time}ms | ${event.messageType || "log"} | ${message} | ${truncateString(location, 50)} |
+`;
+  }
+  return md;
+}
+function generateNetworkMarkdown(resources) {
+  if (resources.length === 0)
+    return `# Network Log
+
+No network requests recorded.
+`;
+  let md = `# Network Log
+
+`;
+  md += `Total requests: ${resources.length}
+
+`;
+  md += `| # | Method | URL | Status | Size |
+`;
+  md += `|---|--------|-----|--------|------|
+`;
+  const failedRequests = [];
+  for (let i = 0; i < resources.length; i++) {
+    const resource = resources[i];
+    const url = truncateString(resource.request.url, 60);
+    const status = resource.response.status;
+    const size = formatSize(resource.response.content?.size || 0);
+    md += `| ${i + 1} | ${resource.request.method} | ${url} | ${status} | ${size} |
+`;
+    if (status >= 400)
+      failedRequests.push(resource);
+  }
+  if (failedRequests.length > 0) {
+    md += `
+## Failed Requests
+
+`;
+    for (const resource of failedRequests) {
+      md += `### ${resource.request.method} ${truncateString(resource.request.url, 80)} - ${resource.response.status}
+
+`;
+      if (resource.response._failureText)
+        md += `**Failure:** ${resource.response._failureText}
+
+`;
+      if (resource.response.content?.text) {
+        md += `<details><summary>Response</summary>
+
+`;
+        md += "```\n";
+        md += truncateString(resource.response.content.text, 1e3);
+        md += "\n```\n\n";
+        md += `</details>
+
+`;
+      }
+    }
+  }
+  return md;
+}
+function generateFilmstripMarkdown(pages, startTime, assetMap) {
+  const allFrames = [];
+  for (const page of pages) {
+    for (const frame of page.screencastFrames) {
+      allFrames.push({
+        timestamp: frame.timestamp,
+        sha1: frame.sha1,
+        pageId: page.pageId
+      });
+    }
+  }
+  if (allFrames.length === 0)
+    return `# Filmstrip
+
+No screenshots recorded.
+`;
+  allFrames.sort((a, b) => a.timestamp - b.timestamp);
+  let md = `# Filmstrip
+
+`;
+  md += `Total screenshots: ${allFrames.length}
+
+`;
+  md += `| # | Time | Screenshot |
+`;
+  md += `|---|------|------------|
+`;
+  for (let i = 0; i < allFrames.length; i++) {
+    const frame = allFrames[i];
+    const relativeTime = Math.round(frame.timestamp - startTime);
+    const resourcePath = assetMap.get(frame.sha1) || `./assets/resources/${frame.sha1}`;
+    md += `| ${i + 1} | ${relativeTime}ms | [view](${resourcePath}) |
+`;
+  }
+  return md;
+}
+function generateAttachmentsMarkdown(actions, assetMap) {
+  const allAttachments = [];
+  for (const action of actions) {
+    if (!action.attachments?.length)
+      continue;
+    const actionTitle = action.title || `${action.class}.${action.method}`;
+    for (const attachment of action.attachments) {
+      allAttachments.push({
+        actionTitle,
+        attachment
+      });
+    }
+  }
+  if (allAttachments.length === 0)
+    return `# Attachments
+
+No attachments recorded.
+`;
+  let md = `# Attachments
+
+`;
+  md += `Total attachments: ${allAttachments.length}
+
+`;
+  md += `| # | Name | Type | Action | Link |
+`;
+  md += `|---|------|------|--------|------|
+`;
+  for (let i = 0; i < allAttachments.length; i++) {
+    const { actionTitle, attachment } = allAttachments[i];
+    const name = attachment.name.replace(/\|/g, "\\|");
+    const contentType = attachment.contentType.replace(/\|/g, "\\|");
+    const action = truncateString(actionTitle, 30).replace(/\|/g, "\\|");
+    let link = "";
+    if (attachment.sha1) {
+      const resourcePath = assetMap.get(attachment.sha1) || `./assets/resources/${attachment.sha1}`;
+      link = `[view](${resourcePath})`;
+    }
+    md += `| ${i + 1} | ${name} | ${contentType} | ${action} | ${link} |
+`;
+  }
+  return md;
+}
+const autoClosing = /* @__PURE__ */ new Set(["AREA", "BASE", "BR", "COL", "COMMAND", "EMBED", "HR", "IMG", "INPUT", "KEYGEN", "LINK", "MENUITEM", "META", "PARAM", "SOURCE", "TRACK", "WBR"]);
+function isNodeNameAttributesChildNodesSnapshot(n) {
+  return Array.isArray(n) && typeof n[0] === "string";
+}
+function isSubtreeReferenceSnapshot(n) {
+  return Array.isArray(n) && Array.isArray(n[0]);
+}
+function buildNodeIndex(snapshot) {
+  const nodes = [];
+  const visit = (n) => {
+    if (typeof n === "string") {
+      nodes.push(n);
+    } else if (isNodeNameAttributesChildNodesSnapshot(n)) {
+      const [, , ...children] = n;
+      for (const child of children)
+        visit(child);
+      nodes.push(n);
+    }
+  };
+  visit(snapshot.html);
+  return nodes;
+}
+class ExportSnapshotRenderer {
+  constructor(snapshots, index, networkResourceMap) {
+    this._nodeIndexCache = /* @__PURE__ */ new Map();
+    // URL -> SHA1 from network log
+    this._usedSha1s = /* @__PURE__ */ new Set();
+    this._snapshots = snapshots;
+    this._index = index;
+    this._snapshot = snapshots[index];
+    this._baseUrl = snapshots[index].frameUrl;
+    this._networkResourceMap = networkResourceMap;
+    this._overrideMap = this._buildOverrideMap();
+  }
+  // Build a map of URL -> SHA1 from all resourceOverrides, resolving refs
+  _buildOverrideMap() {
+    const map = /* @__PURE__ */ new Map();
+    for (const override of this._snapshot.resourceOverrides) {
+      if (override.sha1) {
+        map.set(override.url, override.sha1);
+      } else if (override.ref !== void 0) {
+        const refIndex = this._index - override.ref;
+        if (refIndex >= 0 && refIndex < this._snapshots.length) {
+          const refSnapshot = this._snapshots[refIndex];
+          const refOverride = refSnapshot.resourceOverrides.find((o) => o.url === override.url);
+          if (refOverride?.sha1)
+            map.set(override.url, refOverride.sha1);
+        }
+      }
+    }
+    return map;
+  }
+  _getNodeIndex(snapshotIndex) {
+    let nodes = this._nodeIndexCache.get(snapshotIndex);
+    if (!nodes) {
+      nodes = buildNodeIndex(this._snapshots[snapshotIndex]);
+      this._nodeIndexCache.set(snapshotIndex, nodes);
+    }
+    return nodes;
+  }
+  // Resolve a potentially relative URL to absolute using base URL
+  _resolveUrl(url) {
+    if (!url || url.startsWith("data:") || url.startsWith("blob:") || url.startsWith("javascript:"))
+      return url;
+    try {
+      return new URL(url, this._baseUrl).href;
+    } catch {
+      return url;
+    }
+  }
+  // Rewrite URL to relative path for export
+  _rewriteUrl(url) {
+    let sha1 = this._overrideMap.get(url);
+    if (!sha1) {
+      const resolvedUrl = this._resolveUrl(url);
+      sha1 = this._overrideMap.get(resolvedUrl);
+      if (!sha1) {
+        sha1 = this._networkResourceMap.get(url) || this._networkResourceMap.get(resolvedUrl);
+      }
+    }
+    if (sha1) {
+      this._usedSha1s.add(sha1);
+      return `../resources/${sha1}`;
+    }
+    return url;
+  }
+  // Rewrite URLs in CSS text (url(...) references)
+  _rewriteCssUrls(cssText) {
+    return cssText.replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/gi, (match, quote, url) => {
+      const rewritten = this._rewriteUrl(url.trim());
+      return `url('${rewritten}')`;
+    });
+  }
+  // Get all SHA1s that were actually used during rendering
+  getUsedSha1s() {
+    return this._usedSha1s;
+  }
+  render() {
+    const result = [];
+    const visit = (n, snapshotIndex, parentTag) => {
+      if (typeof n === "string") {
+        if (parentTag === "STYLE" || parentTag === "style")
+          result.push(this._rewriteCssUrls((0, import_stringUtils.escapeHTML)(n)));
+        else
+          result.push((0, import_stringUtils.escapeHTML)(n));
+        return;
+      }
+      if (isSubtreeReferenceSnapshot(n)) {
+        const [snapshotsAgo, nodeIndex] = n[0];
+        const referenceIndex = snapshotIndex - snapshotsAgo;
+        if (referenceIndex >= 0 && referenceIndex <= snapshotIndex) {
+          const nodes = this._getNodeIndex(referenceIndex);
+          if (nodeIndex >= 0 && nodeIndex < nodes.length)
+            return visit(nodes[nodeIndex], referenceIndex, parentTag);
+        }
+        return;
+      }
+      if (isNodeNameAttributesChildNodesSnapshot(n)) {
+        const [name, nodeAttrs, ...children] = n;
+        const nodeName = name === "NOSCRIPT" ? "X-NOSCRIPT" : name;
+        const attrs = Object.entries(nodeAttrs || {});
+        if (nodeName === "BASE")
+          return;
+        result.push("<", nodeName.toLowerCase());
+        const isFrame = nodeName === "IFRAME" || nodeName === "FRAME";
+        const isAnchor = nodeName === "A";
+        const isLink = nodeName === "LINK";
+        const isScript = nodeName === "SCRIPT";
+        const isImg = nodeName === "IMG";
+        for (const [attr, value] of attrs) {
+          if (attr.startsWith("__playwright") && attr !== "__playwright_src__")
+            continue;
+          let attrName = attr;
+          let attrValue = value;
+          const attrLower = attr.toLowerCase();
+          if (isFrame && attr === "__playwright_src__") {
+            attrName = "src";
+            attrValue = this._rewriteUrl(value);
+          } else if (isLink && attrLower === "href") {
+            attrValue = this._rewriteUrl(value);
+          } else if ((isScript || isImg) && attrLower === "src") {
+            attrValue = this._rewriteUrl(value);
+          } else if (!isAnchor && !isLink && attrLower === "src") {
+            attrValue = this._rewriteUrl(value);
+          } else if (attrLower === "srcset") {
+            attrValue = this._rewriteSrcset(value);
+          } else if (attrLower === "style") {
+            attrValue = this._rewriteCssUrls(value);
+          }
+          result.push(" ", attrName, '="', (0, import_stringUtils.escapeHTMLAttribute)(attrValue), '"');
+        }
+        result.push(">");
+        for (const child of children)
+          visit(child, snapshotIndex, nodeName);
+        if (!autoClosing.has(nodeName))
+          result.push("</", nodeName.toLowerCase(), ">");
+      }
+    };
+    const snapshot = this._snapshot;
+    visit(snapshot.html, this._index, void 0);
+    const doctype = snapshot.doctype ? `<!DOCTYPE ${snapshot.doctype}>` : "<!DOCTYPE html>";
+    const comment = `<!-- Playwright Snapshot: ${snapshot.snapshotName} | URL: ${snapshot.frameUrl} | Timestamp: ${snapshot.timestamp} -->`;
+    return doctype + "\n" + comment + "\n" + result.join("");
+  }
+  // Rewrite srcset attribute (format: "url1 1x, url2 2x, ...")
+  _rewriteSrcset(srcset) {
+    return srcset.split(",").map((entry) => {
+      const parts = entry.trim().split(/\s+/);
+      if (parts.length >= 1) {
+        parts[0] = this._rewriteUrl(parts[0]);
+      }
+      return parts.join(" ");
+    }).join(", ");
+  }
+}
+function truncateString(str, maxLength) {
+  if (str.length <= maxLength)
+    return str;
+  return str.substring(0, maxLength - 3) + "...";
+}
+function formatParams(params) {
+  const str = JSON.stringify(params);
+  return truncateString(str, 200);
+}
+function formatResult(result) {
+  if (result === null || result === void 0)
+    return "null";
+  if (typeof result === "string")
+    return truncateString(result, 100);
+  const str = JSON.stringify(result);
+  return truncateString(str, 100);
+}
+function formatSize(bytes) {
+  if (bytes < 1024)
+    return `${bytes}B`;
+  if (bytes < 1024 * 1024)
+    return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+function stripAnsi(str) {
+  return str.replace(/\x1b\[[0-9;]*m/g, "");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  exportTraceToMarkdown
+});