@pedropaulovc/playwright-core 1.59.0-next

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

@@ -0,0 +1,679 @@
+"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");
+async function exportTraceToMarkdown(traceFile, options) {
+  const context = await parseTrace(traceFile);
+  const outputDir = options.outputDir;
+  const assetsDir = import_path.default.join(outputDir, "assets");
+  const screenshotsDir = import_path.default.join(assetsDir, "screenshots");
+  const snapshotsDir = import_path.default.join(assetsDir, "snapshots");
+  await import_fs.default.promises.mkdir(outputDir, { recursive: true });
+  let assetMap = /* @__PURE__ */ new Map();
+  if (options.includeAssets) {
+    await import_fs.default.promises.mkdir(screenshotsDir, { recursive: true });
+    await import_fs.default.promises.mkdir(snapshotsDir, { recursive: true });
+    assetMap = await extractAssets(traceFile, context, outputDir);
+  }
+  const files = [
+    { name: "index.md", content: generateIndexMarkdown(context, traceFile) },
+    { name: "metadata.md", content: generateMetadataMarkdown(context) },
+    { name: "timeline.md", content: generateTimelineMarkdown(context.actions, assetMap) },
+    { name: "errors.md", content: generateErrorsMarkdown(context.errors, context.actions) },
+    { name: "console.md", content: generateConsoleMarkdown(context.events) },
+    { name: "network.md", content: generateNetworkMarkdown(context.resources) }
+  ];
+  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: []
+  };
+  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
+      });
+      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;
+      }
+      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) {
+        context.resources.push({
+          request: {
+            method: event.snapshot.request?.method || "GET",
+            url: event.snapshot.request?.url || ""
+          },
+          response: {
+            status: event.snapshot.response?.status || 0,
+            content: event.snapshot.response?.content,
+            _failureText: event.snapshot.response?._failureText
+          }
+        });
+      }
+      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
+        });
+      }
+      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 screenshotSha1s = /* @__PURE__ */ new Set();
+  for (const page of context.pages) {
+    for (const frame of page.screencastFrames)
+      screenshotSha1s.add(frame.sha1);
+  }
+  for (const sha1 of screenshotSha1s) {
+    const resourcePath = `resources/${sha1}`;
+    if (entries.includes(resourcePath)) {
+      try {
+        const buffer = await zipFile.read(resourcePath);
+        const ext = sha1.includes(".") ? "" : ".png";
+        const relativePath = `assets/screenshots/${sha1}${ext}`;
+        const fullPath = import_path.default.join(outputDir, relativePath);
+        await import_fs.default.promises.writeFile(fullPath, buffer);
+        assetMap.set(sha1, `./${relativePath}`);
+      } catch {
+      }
+    }
+  }
+  const resourceEntries = entries.filter((name) => name.startsWith("resources/") && !screenshotSha1s.has(name.replace("resources/", "")));
+  for (const entryName of resourceEntries) {
+    const sha1 = entryName.replace("resources/", "");
+    try {
+      const buffer = await zipFile.read(entryName);
+      const text = buffer.toString("utf-8");
+      if (text.startsWith("<!") || text.startsWith("<html") || text.includes("<head") || text.includes("<body")) {
+        const ext = sha1.endsWith(".html") ? "" : ".html";
+        const relativePath = `assets/snapshots/${sha1}${ext}`;
+        const fullPath = import_path.default.join(outputDir, relativePath);
+        await import_fs.default.promises.writeFile(fullPath, text);
+        assetMap.set(sha1, `./${relativePath}`);
+      }
+    } catch {
+    }
+  }
+  for (const snapshot of context.snapshots) {
+    if (snapshot.html && snapshot.snapshotName) {
+      try {
+        const html = renderSnapshotToHtml(snapshot);
+        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 generateIndexMarkdown(context, traceFile) {
+  const title = context.title || "Trace Export";
+  const duration = 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
+`;
+  return md;
+}
+function collectErrorSummary(context) {
+  const errors = [];
+  for (const error of context.errors)
+    errors.push(truncateString(error.message, 100));
+  for (const action of context.actions) {
+    if (action.error)
+      errors.push(truncateString(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 | ${context.endTime - context.startTime}ms |
+`;
+  return md;
+}
+function generateTimelineMarkdown(actions, assetMap) {
+  if (actions.length === 0)
+    return `# Actions Timeline
+
+No actions recorded.
+`;
+  const startTime = actions[0]?.startTime || 0;
+  const totalDuration = actions.length > 0 ? (actions[actions.length - 1].endTime || actions[actions.length - 1].startTime) - startTime : 0;
+  let md = `# Actions Timeline
+
+`;
+  md += `Total actions: ${actions.length} | Duration: ${totalDuration}ms
+
+`;
+  md += `---
+
+`;
+  for (let i = 0; i < actions.length; i++) {
+    const action = actions[i];
+    const relativeTime = action.startTime - startTime;
+    const duration = (action.endTime || action.startTime) - action.startTime;
+    const hasError = !!action.error;
+    md += `## ${i + 1}. [${relativeTime}ms] ${action.class}.${action.method}${hasError ? " - ERROR" : ""}
+
+`;
+    if (action.params && Object.keys(action.params).length > 0) {
+      const paramsStr = formatParams(action.params);
+      md += `- **Params:** \`${paramsStr}\`
+`;
+    }
+    if (hasError)
+      md += `- **Error:** ${action.error.message}
+`;
+    else if (action.result !== void 0)
+      md += `- **Result:** ${formatResult(action.result)}
+`;
+    else
+      md += `- **Result:** Success
+`;
+    md += `- **Duration:** ${duration}ms
+`;
+    if (action.stack && action.stack.length > 0) {
+      const frame = action.stack[0];
+      md += `- **Source:** \`${frame.file}:${frame.line}\`
+`;
+    }
+    const beforeSnapshot = action.beforeSnapshot ? resolveSnapshotLink(action.beforeSnapshot, assetMap) : null;
+    const afterSnapshot = action.afterSnapshot ? resolveSnapshotLink(action.afterSnapshot, 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.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: ${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 += `
+---
+
+`;
+  }
+  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: error.message,
+      stack: error.stack
+    });
+  }
+  for (const action of actions) {
+    if (action.error) {
+      allErrors.push({
+        message: 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 renderSnapshotToHtml(snapshot) {
+  const parts = [];
+  parts.push("<!DOCTYPE html>");
+  parts.push(`<!-- Playwright Snapshot: ${snapshot.snapshotName} -->`);
+  parts.push(`<!-- URL: ${snapshot.frameUrl} -->`);
+  parts.push(`<!-- Timestamp: ${snapshot.timestamp} -->`);
+  renderNode(snapshot.html, parts);
+  return parts.join("");
+}
+function renderNode(node, parts) {
+  if (typeof node === "string") {
+    parts.push(escapeHtml(node));
+    return;
+  }
+  if (!Array.isArray(node))
+    return;
+  if (Array.isArray(node[0]))
+    return;
+  const [tagName, ...rest] = node;
+  if (typeof tagName !== "string")
+    return;
+  let attrs = {};
+  let children = [];
+  if (rest.length > 0 && typeof rest[0] === "object" && !Array.isArray(rest[0])) {
+    attrs = rest[0] || {};
+    children = rest.slice(1);
+  } else {
+    children = rest;
+  }
+  parts.push(`<${tagName.toLowerCase()}`);
+  for (const [key, value] of Object.entries(attrs)) {
+    if (key.startsWith("__playwright"))
+      continue;
+    parts.push(` ${key}="${escapeHtml(String(value))}"`);
+  }
+  parts.push(">");
+  for (const child of children)
+    renderNode(child, parts);
+  const selfClosing = ["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"];
+  if (!selfClosing.includes(tagName.toLowerCase()))
+    parts.push(`</${tagName.toLowerCase()}>`);
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+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`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  exportTraceToMarkdown
+});