// A synthetic browser URL bar, baked into the session recording itself.//// Playwright records the page viewport only (the recording is chromeless), so// a shared `session.mp4` gives no hint of which URL each moment was on. The// runs viewer reconstructs a URL bar from the nav timeline, but the raw video// (the thing people actually pass around) had none. This injects a thin URL bar// at the top of every top-level page so it shows up in the video AND the step// screenshots, fed by `location.href` and updated across SPA route changes.//// It must not perturb the scenario: it renders inside a CLOSED shadow root// (invisible to Playwright locators and the accessibility tree) and is// `pointer-events: none` (never intercepts a click). The styling mirrors the// viewer's synthetic chrome (traffic lights, #161b22 bar) so the in-viewer and// standalone-video looks agree.import type { BrowserContext } from "playwright";/** Runs in the page before any app script, on every top-level document. */function injectUrlBar(): void { // Top frame only (iframes should not each grow their own bar). if (window.top !== window.self) return; const flagged = window as Window & { __e2eUrlBar?: boolean }; if (flagged.__e2eUrlBar) return; flagged.__e2eUrlBar = true; const BAR_H = 32; const install = (): void => { const root = document.documentElement; if (!root) return; const host = document.createElement("div"); host.style.cssText = `position:fixed;top:0;left:0;width:100%;height:${BAR_H}px;z-index:2147483647;pointer-events:none`; const shadow = host.attachShadow({ mode: "closed" }); const bar = document.createElement("div"); bar.style.cssText = [ "display:flex", "align-items:center", "gap:8px", `height:${BAR_H}px`, "box-sizing:border-box", "padding:0 12px", "background:#161b22", "border-bottom:1px solid #21262d", "font:13px/1 ui-monospace,SFMono-Regular,Menlo,monospace", "color:#c9d1d9", "white-space:nowrap", "overflow:hidden", ].join(";"); const dot = (color: string): HTMLElement => { const d = document.createElement("span"); d.style.cssText = `width:11px;height:11px;border-radius:50%;flex:none;background:${color}`; return d; }; const lights = document.createElement("span"); lights.style.cssText = "display:inline-flex;gap:6px;margin-right:4px"; lights.append(dot("#ff5f57"), dot("#febc2e"), dot("#28c840")); const lock = document.createElement("span"); lock.textContent = "⌁"; // the viewer's URL-bar glyph lock.style.cssText = "color:#8b949e;flex:none"; const url = document.createElement("span"); url.style.cssText = "overflow:hidden;text-overflow:ellipsis"; bar.append(lights, lock, url); shadow.append(bar); root.appendChild(host); const render = (): void => { const next = location.href.replace(/^https?:\/\//, "") || "about:blank"; if (url.textContent !== next) url.textContent = next; }; render(); // SPA route changes don't reload the document, so re-read the URL on every // history transition; the interval also re-attaches the bar if a framework // re-render detached it, and is the catch-all for navigations we can't hook. window.setInterval(() => { if (!root.contains(host)) root.appendChild(host); render(); }, 250); for (const ev of ["popstate", "hashchange"] as const) window.addEventListener(ev, render); for (const name of ["pushState", "replaceState"] as const) { const orig = history[name] as (...args: unknown[]) => unknown; if (typeof orig === "function") { history[name] = function (this: History, ...args: unknown[]) { const result = orig.apply(this, args); render(); return result; } as History[typeof name]; } } }; if (document.documentElement) install(); else window.addEventListener("DOMContentLoaded", install, { once: true });}/** * Install the recording URL bar on a Playwright context. No-op on the desk * (E2E_DESK), where the browser is headed and already shows real chrome. */export const installRecordingUrlBar = async (context: BrowserContext): Promise<void> => { if (process.env.E2E_DESK === "1") return; await context.addInitScript(injectUrlBar);};
// A synthetic browser URL bar, baked into the session recording itself.
//
// Playwright records the page viewport only (the recording is chromeless), so
// a shared `session.mp4` gives no hint of which URL each moment was on. The
// runs viewer reconstructs a URL bar from the nav timeline, but the raw video
// (the thing people actually pass around) had none. This injects a thin URL bar
// at the top of every top-level page so it shows up in the video AND the step
// screenshots, fed by `location.href` and updated across SPA route changes.
//
// It must not perturb the scenario: it renders inside a CLOSED shadow root
// (invisible to Playwright locators and the accessibility tree) and is
// `pointer-events: none` (never intercepts a click). The styling mirrors the
// viewer's synthetic chrome (traffic lights, #161b22 bar) so the in-viewer and
// standalone-video looks agree.
import type { BrowserContext } from "playwright";
/** Runs in the page before any app script, on every top-level document. */
function injectUrlBar(): void {
// Top frame only (iframes should not each grow their own bar).
if (window.top !== window.self) return;
const flagged = window as Window & { __e2eUrlBar?: boolean };
if (flagged.__e2eUrlBar) return;
flagged.__e2eUrlBar = true;
const BAR_H = 32;
const install = (): void => {
const root = document.documentElement;
if (!root) return;
const host = document.createElement("div");
host.style.cssText = `position:fixed;top:0;left:0;width:100%;height:${BAR_H}px;z-index:2147483647;pointer-events:none`;
const shadow = host.attachShadow({ mode: "closed" });
const bar = document.createElement("div");
bar.style.cssText = [
"display:flex",
"align-items:center",
"gap:8px",
`height:${BAR_H}px`,
"box-sizing:border-box",
"padding:0 12px",
"background:#161b22",
"border-bottom:1px solid #21262d",
"font:13px/1 ui-monospace,SFMono-Regular,Menlo,monospace",
"color:#c9d1d9",
"white-space:nowrap",
"overflow:hidden",
].join(";");
const dot = (color: string): HTMLElement => {
const d = document.createElement("span");
d.style.cssText = `width:11px;height:11px;border-radius:50%;flex:none;background:${color}`;
return d;
};
const lights = document.createElement("span");
lights.style.cssText = "display:inline-flex;gap:6px;margin-right:4px";
lights.append(dot("#ff5f57"), dot("#febc2e"), dot("#28c840"));
const lock = document.createElement("span");
lock.textContent = "⌁"; // the viewer's URL-bar glyph
lock.style.cssText = "color:#8b949e;flex:none";
const url = document.createElement("span");
url.style.cssText = "overflow:hidden;text-overflow:ellipsis";
bar.append(lights, lock, url);
shadow.append(bar);
root.appendChild(host);
const render = (): void => {
const next = location.href.replace(/^https?:\/\//, "") || "about:blank";
if (url.textContent !== next) url.textContent = next;
};
render();
// SPA route changes don't reload the document, so re-read the URL on every
// history transition; the interval also re-attaches the bar if a framework
// re-render detached it, and is the catch-all for navigations we can't hook.
window.setInterval(() => {
if (!root.contains(host)) root.appendChild(host);
render();
}, 250);
for (const ev of ["popstate", "hashchange"] as const) window.addEventListener(ev, render);
for (const name of ["pushState", "replaceState"] as const) {
const orig = history[name] as (...args: unknown[]) => unknown;
if (typeof orig === "function") {
history[name] = function (this: History, ...args: unknown[]) {
const result = orig.apply(this, args);
render();
return result;
} as History[typeof name];
}
}
};
if (document.documentElement) install();
else window.addEventListener("DOMContentLoaded", install, { once: true });
}
/**
* Install the recording URL bar on a Playwright context. No-op on the desk
* (E2E_DESK), where the browser is headed and already shows real chrome.
*/
export const installRecordingUrlBar = async (context: BrowserContext): Promise<void> => {
if (process.env.E2E_DESK === "1") return;
await context.addInitScript(injectUrlBar);
};