@pedropaulovc/playwright-core 1.59.0-next → 1.59.0-next.1

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

@@ -34,6 +34,7 @@ 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;
@@ -41,16 +42,14 @@ async function exportTraceToMarkdown(traceFile, options) {
   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);
-  }
+  await import_fs.default.promises.mkdir(screenshotsDir, { 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) },
+    { 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) }
@@ -72,7 +71,8 @@ async function parseTrace(traceFile) {
     errors: [],
     resources: [],
     pages: [],
-    snapshots: []
+    snapshots: [],
+    networkResourceMap: /* @__PURE__ */ new Map()
   };
   const actionMap = /* @__PURE__ */ new Map();
   const pageMap = /* @__PURE__ */ new Map();
@@ -124,7 +124,11 @@ function processTraceEvent(event, context, actionMap, pageMap) {
         log: [],
         stack: event.stack,
         beforeSnapshot: event.beforeSnapshot,
-        pageId: event.pageId
+        pageId: event.pageId,
+        parentId: event.parentId,
+        title: event.title,
+        group: event.group,
+        stepId: event.stepId
       });
       break;
     case "after":
@@ -162,10 +166,12 @@ function processTraceEvent(event, context, actionMap, pageMap) {
       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: event.snapshot.request?.url || ""
+            url
           },
           response: {
             status: event.snapshot.response?.status || 0,
@@ -173,6 +179,8 @@ function processTraceEvent(event, context, actionMap, pageMap) {
             _failureText: event.snapshot.response?._failureText
           }
         });
+        if (url && sha1)
+          context.networkResourceMap.set(url, sha1);
       }
       break;
     case "screencast-frame":
@@ -195,7 +203,10 @@ function processTraceEvent(event, context, actionMap, pageMap) {
           frameId: event.snapshot.frameId || "",
           frameUrl: event.snapshot.frameUrl || "",
           html: event.snapshot.html,
-          timestamp: event.snapshot.timestamp || 0
+          timestamp: event.snapshot.timestamp || 0,
+          resourceOverrides: event.snapshot.resourceOverrides || [],
+          doctype: event.snapshot.doctype,
+          viewport: event.snapshot.viewport
         });
       }
       break;
@@ -205,60 +216,147 @@ 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);
+  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);
   }
-  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 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);
+        }
       }
     }
   }
-  const resourceEntries = entries.filter((name) => name.startsWith("resources/") && !screenshotSha1s.has(name.replace("resources/", "")));
-  for (const entryName of resourceEntries) {
-    const sha1 = entryName.replace("resources/", "");
+  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);
+  for (const sha1 of neededSha1s) {
+    const resourcePath = `resources/${sha1}`;
+    if (!entries.includes(resourcePath))
+      continue;
     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}`);
-      }
+      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 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) {
-      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 {
+    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
+
+## 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 = context.endTime - context.startTime;
+  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;
@@ -299,10 +397,10 @@ function generateIndexMarkdown(context, traceFile) {
 function collectErrorSummary(context) {
   const errors = [];
   for (const error of context.errors)
-    errors.push(truncateString(error.message, 100));
+    errors.push(truncateString(stripAnsi(error.message), 100));
   for (const action of context.actions) {
     if (action.error)
-      errors.push(truncateString(action.error.message, 100));
+      errors.push(truncateString(stripAnsi(action.error.message), 100));
   }
   return errors.slice(0, 10);
 }
@@ -364,58 +462,120 @@ function generateMetadataMarkdown(context) {
 `;
   md += `| Wall Time | ${new Date(context.wallTime).toISOString()} |
 `;
-  md += `| Duration | ${context.endTime - context.startTime}ms |
+  md += `| Duration | ${Math.round(context.endTime - context.startTime)}ms |
 `;
   return md;
 }
-function generateTimelineMarkdown(actions, assetMap) {
+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 startTime = actions[0]?.startTime || 0;
-  const totalDuration = actions.length > 0 ? (actions[actions.length - 1].endTime || actions[actions.length - 1].startTime) - startTime : 0;
+  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: ${actions.length} | Duration: ${totalDuration}ms
-
-`;
-  md += `---
+  md += `Total actions: ${filteredActions.length} | Duration: ${Math.round(totalDuration)}ms
 
 `;
-  for (let i = 0; i < actions.length; i++) {
-    const action = actions[i];
+  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;
-    md += `## ${i + 1}. [${relativeTime}ms] ${action.class}.${action.method}${hasError ? " - ERROR" : ""}
+    const title = getActionTitle(action);
+    const headingLevel = Math.min(depth + 1, 6);
+    const heading = "#".repeat(headingLevel);
+    md += `${heading} ${number}. ${title}${hasError ? " - ERROR" : ""}
 
 `;
-    if (action.params && Object.keys(action.params).length > 0) {
+    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);
-      md += `- **Params:** \`${paramsStr}\`
+      if (paramsStr !== "{}")
+        md += `- **Params:** \`${paramsStr}\`
 `;
     }
     if (hasError)
-      md += `- **Error:** ${action.error.message}
+      md += `- **Error:** ${stripAnsi(action.error.message)}
 `;
-    else if (action.result !== void 0)
+    else if (action.result !== void 0 && action.group !== "internal")
       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;
+    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)
@@ -443,7 +603,7 @@ No actions recorded.
 
 `;
       md += "```\n";
-      md += `Error: ${action.error.message}
+      md += `Error: ${stripAnsi(action.error.message)}
 `;
       for (const frame of action.stack)
         md += `  at ${frame.function || "(anonymous)"} (${frame.file}:${frame.line}:${frame.column})
@@ -453,10 +613,12 @@ No actions recorded.
 `;
     }
     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) {
@@ -472,14 +634,14 @@ function generateErrorsMarkdown(errors, actions) {
   const allErrors = [];
   for (const error of errors) {
     allErrors.push({
-      message: error.message,
+      message: stripAnsi(error.message),
       stack: error.stack
     });
   }
   for (const action of actions) {
     if (action.error) {
       allErrors.push({
-        message: action.error.message,
+        message: stripAnsi(action.error.message),
         stack: action.stack,
         source: action.stack?.[0] ? `${action.stack[0].file}:${action.stack[0].line}` : void 0
       });
@@ -604,50 +766,180 @@ No network requests recorded.
   }
   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("");
+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 renderNode(node, parts) {
-  if (typeof node === "string") {
-    parts.push(escapeHtml(node));
-    return;
+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;
   }
-  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;
+  _getNodeIndex(snapshotIndex) {
+    let nodes = this._nodeIndexCache.get(snapshotIndex);
+    if (!nodes) {
+      nodes = buildNodeIndex(this._snapshots[snapshotIndex]);
+      this._nodeIndexCache.set(snapshotIndex, nodes);
+    }
+    return nodes;
   }
-  parts.push(`<${tagName.toLowerCase()}`);
-  for (const [key, value] of Object.entries(attrs)) {
-    if (key.startsWith("__playwright"))
-      continue;
-    parts.push(` ${key}="${escapeHtml(String(value))}"`);
+  // 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(", ");
   }
-  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)
@@ -673,6 +965,9 @@ function formatSize(bytes) {
     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