stably 4.12.6 → 4.12.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.mjs +1 -1
- package/dist/node_modules/playwright/lib/cli/daemon/daemon.js +0 -99
- package/dist/node_modules/playwright/lib/index.js +1 -32
- package/dist/node_modules/playwright/lib/mcp/browser/browserServerBackend.js +0 -27
- package/dist/node_modules/playwright/lib/mcp/browser/context.js +0 -52
- package/dist/node_modules/playwright/lib/mcp/browser/sessionLog.js +0 -50
- package/dist/node_modules/playwright/lib/mcp/test/browserBackend.js +1 -6
- package/dist/pwtrace.js +7185 -0
- package/dist/stably-browser.js +20 -7
- package/dist/stably-plugin-cli/skills/debugging-test-failures/SKILL.md +4 -3
- package/dist/stably-plugin-cli/skills/pwtrace-debugging/SKILL.md +108 -0
- package/package.json +3 -2
- package/dist/node_modules/playwright/lib/mcp/browser/config.js.rej +0 -11
|
@@ -75,105 +75,6 @@ async function startMcpDaemonServer(config, contextFactory) {
|
|
|
75
75
|
timestamp: Date.now()
|
|
76
76
|
};
|
|
77
77
|
const { browserContext, close } = await contextFactory.createContext(clientInfo, new AbortController().signal, {});
|
|
78
|
-
// For CDP connections: resize the browser window to match the user's configured viewport.
|
|
79
|
-
// We only use Browser.setWindowBounds (no setViewportSize) so the page viewport is
|
|
80
|
-
// determined naturally by the window's content area. Using setViewportSize would trigger
|
|
81
|
-
// Emulation.setDeviceMetricsOverride which creates a device emulation frame with white
|
|
82
|
-
// borders inside the window — the page renders at the viewport size but doesn't fill
|
|
83
|
-
// the window's content area.
|
|
84
|
-
if (config.browser.cdpEndpoint) {
|
|
85
|
-
try {
|
|
86
|
-
// Pages may not be immediately available after CDP connection — wait briefly for discovery.
|
|
87
|
-
let page = browserContext.pages()[0];
|
|
88
|
-
if (!page) {
|
|
89
|
-
daemonDebug("no pages found, waiting for page discovery...");
|
|
90
|
-
page = await Promise.race([
|
|
91
|
-
new Promise(resolve => browserContext.once("page", resolve)),
|
|
92
|
-
new Promise(resolve => setTimeout(() => resolve(null), 5000))
|
|
93
|
-
]);
|
|
94
|
-
}
|
|
95
|
-
if (page) {
|
|
96
|
-
daemonDebug("found page for viewport resize:", page.url());
|
|
97
|
-
// Try to load viewport from the user's playwright.config (most authoritative source),
|
|
98
|
-
// then fall back to config.browser.contextOptions.viewport (which may just be the 1280x720 default).
|
|
99
|
-
let viewport = null;
|
|
100
|
-
if (config.playwrightConfigPath) {
|
|
101
|
-
try {
|
|
102
|
-
const { requireOrImport } = require("../../transform/transform");
|
|
103
|
-
let userConfig = await requireOrImport(config.playwrightConfigPath);
|
|
104
|
-
if (userConfig && typeof userConfig === "object" && "default" in userConfig)
|
|
105
|
-
userConfig = userConfig.default;
|
|
106
|
-
viewport = userConfig?.use?.viewport || userConfig?.projects?.[0]?.use?.viewport;
|
|
107
|
-
daemonDebug("extracted viewport from playwright config:", viewport);
|
|
108
|
-
} catch (e) {
|
|
109
|
-
daemonDebug("failed to load playwright config for viewport", e);
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
// Fall back to config viewport if playwright.config didn't provide one
|
|
113
|
-
if (!viewport) {
|
|
114
|
-
viewport = config.browser.contextOptions?.viewport;
|
|
115
|
-
}
|
|
116
|
-
const cdpSession = await browserContext.newCDPSession(page);
|
|
117
|
-
const { windowId } = await cdpSession.send("Browser.getWindowForTarget");
|
|
118
|
-
const vp = viewport || { width: 1280, height: 720 };
|
|
119
|
-
// Get current window state and measure chrome decoration overhead.
|
|
120
|
-
const { bounds: currentBounds } = await cdpSession.send("Browser.getWindowBounds", { windowId });
|
|
121
|
-
daemonDebug("current window state:", currentBounds.windowState, "bounds:", currentBounds.width, "x", currentBounds.height);
|
|
122
|
-
// Get screen size to know if the desired viewport can fit.
|
|
123
|
-
const { result: screenSize } = await cdpSession.send("Runtime.evaluate", {
|
|
124
|
-
expression: "JSON.stringify({ width: screen.width, height: screen.height })",
|
|
125
|
-
returnByValue: true
|
|
126
|
-
});
|
|
127
|
-
const screen = JSON.parse(screenSize.value);
|
|
128
|
-
daemonDebug("screen size:", screen.width, "x", screen.height);
|
|
129
|
-
// Quick check: if viewport won't fit with decorations (~100px width, ~200px height),
|
|
130
|
-
// skip measurement and go straight to maximize + device emulation.
|
|
131
|
-
if (vp.width + 100 > screen.width || vp.height + 200 > screen.height) {
|
|
132
|
-
daemonDebug("viewport", vp.width, "x", vp.height, "exceeds screen, using maximize + device emulation");
|
|
133
|
-
// Chrome requires fullscreen → normal → maximized (can't go directly fullscreen → maximized).
|
|
134
|
-
if (currentBounds.windowState === "fullscreen") {
|
|
135
|
-
await cdpSession.send("Browser.setWindowBounds", { windowId, bounds: { windowState: "normal" } });
|
|
136
|
-
}
|
|
137
|
-
await cdpSession.send("Browser.setWindowBounds", { windowId, bounds: { windowState: "maximized" } });
|
|
138
|
-
// Use Emulation.setDeviceMetricsOverride directly instead of page.setViewportSize()
|
|
139
|
-
// because setViewportSize also resizes the window, pushing it off-screen and hiding
|
|
140
|
-
// the tab bar and address bar.
|
|
141
|
-
await cdpSession.send("Emulation.setDeviceMetricsOverride", {
|
|
142
|
-
width: vp.width, height: vp.height, deviceScaleFactor: 0, mobile: false
|
|
143
|
-
});
|
|
144
|
-
daemonDebug("device emulation applied:", vp.width, "x", vp.height);
|
|
145
|
-
} else {
|
|
146
|
-
// Viewport fits — un-maximize, measure decorations, resize window exactly.
|
|
147
|
-
if (currentBounds.windowState === "maximized" || currentBounds.windowState === "fullscreen") {
|
|
148
|
-
await cdpSession.send("Browser.setWindowBounds", { windowId, bounds: { windowState: "normal" } });
|
|
149
|
-
daemonDebug("un-maximized window for measurement");
|
|
150
|
-
}
|
|
151
|
-
const { bounds: measuredBounds } = await cdpSession.send("Browser.getWindowBounds", { windowId });
|
|
152
|
-
const { result: innerSize } = await cdpSession.send("Runtime.evaluate", {
|
|
153
|
-
expression: "JSON.stringify({ width: window.innerWidth, height: window.innerHeight })",
|
|
154
|
-
returnByValue: true
|
|
155
|
-
});
|
|
156
|
-
const inner = JSON.parse(innerSize.value);
|
|
157
|
-
const decorationWidth = measuredBounds.width - inner.width;
|
|
158
|
-
const decorationHeight = measuredBounds.height - inner.height;
|
|
159
|
-
daemonDebug("measured chrome decorations:", decorationWidth, "x", decorationHeight, "(window:", measuredBounds.width, "x", measuredBounds.height, "inner:", inner.width, "x", inner.height, ")");
|
|
160
|
-
const targetWidth = vp.width + decorationWidth;
|
|
161
|
-
const targetHeight = vp.height + decorationHeight;
|
|
162
|
-
daemonDebug("resizing window to:", targetWidth, "x", targetHeight, "for viewport:", vp.width, "x", vp.height);
|
|
163
|
-
await cdpSession.send("Browser.setWindowBounds", {
|
|
164
|
-
windowId,
|
|
165
|
-
bounds: { width: targetWidth, height: targetHeight }
|
|
166
|
-
});
|
|
167
|
-
daemonDebug("window resize succeeded");
|
|
168
|
-
}
|
|
169
|
-
await cdpSession.detach();
|
|
170
|
-
} else {
|
|
171
|
-
daemonDebug("no page available for viewport resize after waiting");
|
|
172
|
-
}
|
|
173
|
-
} catch (e) {
|
|
174
|
-
daemonDebug("failed to resize window for CDP connection (best-effort)", e);
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
78
|
browserContext.on("close", () => {
|
|
178
79
|
daemonDebug("browser closed, shutting down daemon");
|
|
179
80
|
shutdown(0);
|
|
@@ -92,21 +92,6 @@ const playwrightFixtures = {
|
|
|
92
92
|
browser: [async ({ playwright, browserName, _browserOptions, connectOptions }, use) => {
|
|
93
93
|
if (!["chromium", "firefox", "webkit"].includes(browserName))
|
|
94
94
|
throw new Error(`Unexpected browserName "${browserName}", must be one of "chromium", "firefox" or "webkit"`);
|
|
95
|
-
// CDP endpoint support via environment variable or connectOptions with /browser-cdp/ path
|
|
96
|
-
const cdpEndpoint = process.env.PLAYWRIGHT_CDP_ENDPOINT;
|
|
97
|
-
const connectWsEndpoint = connectOptions == null ? void 0 : connectOptions.wsEndpoint;
|
|
98
|
-
const isCdpWsEndpoint = typeof connectWsEndpoint === "string" && (connectWsEndpoint.includes("/browser-cdp/") || connectWsEndpoint.includes("/browser/cdp"));
|
|
99
|
-
if (cdpEndpoint || isCdpWsEndpoint) {
|
|
100
|
-
if (browserName !== "chromium")
|
|
101
|
-
throw new Error("CDP endpoint is only supported for Chromium browsers");
|
|
102
|
-
const endpoint = cdpEndpoint || connectWsEndpoint;
|
|
103
|
-
const cdpHeadersFromEnv = process.env.PLAYWRIGHT_CDP_HEADERS ? JSON.parse(process.env.PLAYWRIGHT_CDP_HEADERS) : void 0;
|
|
104
|
-
const browser2 = await playwright.chromium.connectOverCDP(endpoint, {
|
|
105
|
-
headers: cdpHeadersFromEnv || (connectOptions == null ? void 0 : connectOptions.headers)
|
|
106
|
-
});
|
|
107
|
-
await use(browser2);
|
|
108
|
-
return;
|
|
109
|
-
}
|
|
110
95
|
if (connectOptions) {
|
|
111
96
|
const browser2 = await playwright[browserName].connect({
|
|
112
97
|
...connectOptions,
|
|
@@ -350,13 +335,7 @@ const playwrightFixtures = {
|
|
|
350
335
|
size: typeof video === "string" ? void 0 : video.size
|
|
351
336
|
}
|
|
352
337
|
} : {};
|
|
353
|
-
|
|
354
|
-
// creating a new one. This preserves browser state (pages, cookies, etc.)
|
|
355
|
-
// after the test completes, allowing the daemon to interact with the result.
|
|
356
|
-
const isCdpSession = !!process.env.PLAYWRIGHT_CDP_ENDPOINT;
|
|
357
|
-
const context = isCdpSession && browser.contexts().length > 0
|
|
358
|
-
? browser.contexts()[0]
|
|
359
|
-
: await browser.newContext({ ...videoOptions, ...options });
|
|
338
|
+
const context = await browser.newContext({ ...videoOptions, ...options });
|
|
360
339
|
if (process.env.PW_CLOCK === "frozen") {
|
|
361
340
|
await context._wrapApiCall(async () => {
|
|
362
341
|
await context.clock.install({ time: 0 });
|
|
@@ -372,10 +351,6 @@ const playwrightFixtures = {
|
|
|
372
351
|
if (closed)
|
|
373
352
|
return;
|
|
374
353
|
closed = true;
|
|
375
|
-
// Skip context.close() when connected via CDP — preserve browser state
|
|
376
|
-
// so the daemon can continue interacting with the test's pages.
|
|
377
|
-
if (isCdpSession)
|
|
378
|
-
return;
|
|
379
354
|
const closeReason = testInfo.status === "timedOut" ? "Test timeout of " + testInfo.timeout + "ms exceeded." : "Test ended.";
|
|
380
355
|
await context.close({ reason: closeReason });
|
|
381
356
|
const testFailed = testInfo.status !== testInfo.expectedStatus;
|
|
@@ -428,12 +403,6 @@ const playwrightFixtures = {
|
|
|
428
403
|
await browserImpl._wrapApiCall(() => browserImpl._disconnectFromReusedContext(closeReason), { internal: true });
|
|
429
404
|
},
|
|
430
405
|
page: async ({ context, _reuseContext }, use) => {
|
|
431
|
-
// When connected via CDP, reuse the existing page (the daemon's page)
|
|
432
|
-
// instead of creating a new one, so the daemon sees the test's navigation.
|
|
433
|
-
if (process.env.PLAYWRIGHT_CDP_ENDPOINT && context.pages().length > 0) {
|
|
434
|
-
await use(context.pages()[0]);
|
|
435
|
-
return;
|
|
436
|
-
}
|
|
437
406
|
if (!_reuseContext) {
|
|
438
407
|
await use(await context.newPage());
|
|
439
408
|
return;
|
|
@@ -27,22 +27,6 @@ var import_response = require("./response");
|
|
|
27
27
|
var import_sessionLog = require("./sessionLog");
|
|
28
28
|
var import_tools = require("./tools");
|
|
29
29
|
var import_tool = require("../sdk/tool");
|
|
30
|
-
var import_net = require("net");
|
|
31
|
-
function sendRecorderEvent(event) {
|
|
32
|
-
const port = process.env.CLAUDE_RECORDER_PORT;
|
|
33
|
-
if (!port)
|
|
34
|
-
return;
|
|
35
|
-
try {
|
|
36
|
-
const socket = import_net.createConnection({
|
|
37
|
-
port: Number(port),
|
|
38
|
-
host: process.env.CLAUDE_RECORDER_HOST || "127.0.0.1"
|
|
39
|
-
});
|
|
40
|
-
const payload = JSON.stringify(event) + "\n";
|
|
41
|
-
socket.on("error", () => socket.destroy());
|
|
42
|
-
socket.write(payload, () => socket.end());
|
|
43
|
-
} catch (error) {
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
30
|
class BrowserServerBackend {
|
|
47
31
|
constructor(config, factory, options = {}) {
|
|
48
32
|
this._config = config;
|
|
@@ -80,17 +64,6 @@ Tool "${name}" not found` }],
|
|
|
80
64
|
await tool.handle(context, parsedArguments, response);
|
|
81
65
|
responseObject = await response.serialize();
|
|
82
66
|
this._sessionLog?.logResponse(name, parsedArguments, responseObject);
|
|
83
|
-
// Send recorder event for user action tracking
|
|
84
|
-
const parsed = (0, import_response.parseResponse)(responseObject);
|
|
85
|
-
if (parsed && parsed.code) {
|
|
86
|
-
sendRecorderEvent({
|
|
87
|
-
type: "user-action",
|
|
88
|
-
action: { name: name, args: parsedArguments },
|
|
89
|
-
code: parsed.code,
|
|
90
|
-
url: this._context?.currentTab()?.page?.url() || "",
|
|
91
|
-
timestamp: Date.now()
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
67
|
} catch (error) {
|
|
95
68
|
return {
|
|
96
69
|
content: [{ type: "text", text: `### Error
|
|
@@ -40,55 +40,6 @@ var import_log = require("../log");
|
|
|
40
40
|
var import_tab = require("./tab");
|
|
41
41
|
var import_config = require("./config");
|
|
42
42
|
const testDebug = (0, import_utilsBundle.debug)("pw:mcp:test");
|
|
43
|
-
class InputRecorder {
|
|
44
|
-
constructor(context, browserContext) {
|
|
45
|
-
this._context = context;
|
|
46
|
-
this._browserContext = browserContext;
|
|
47
|
-
}
|
|
48
|
-
static async create(context, browserContext) {
|
|
49
|
-
const recorder = new InputRecorder(context, browserContext);
|
|
50
|
-
await recorder._initialize();
|
|
51
|
-
return recorder;
|
|
52
|
-
}
|
|
53
|
-
async _initialize() {
|
|
54
|
-
const sessionLog = this._context.sessionLog;
|
|
55
|
-
if (!sessionLog) return;
|
|
56
|
-
await this._browserContext._enableRecorder({
|
|
57
|
-
mode: "recording",
|
|
58
|
-
recorderMode: "api"
|
|
59
|
-
}, {
|
|
60
|
-
actionAdded: (page, data, code) => {
|
|
61
|
-
if (this._context.isRunningTool())
|
|
62
|
-
return;
|
|
63
|
-
const tab = import_tab.Tab.forPage(page);
|
|
64
|
-
if (tab)
|
|
65
|
-
sessionLog.logUserAction(data.action, tab, code, false);
|
|
66
|
-
},
|
|
67
|
-
actionUpdated: (page, data, code) => {
|
|
68
|
-
if (this._context.isRunningTool())
|
|
69
|
-
return;
|
|
70
|
-
const tab = import_tab.Tab.forPage(page);
|
|
71
|
-
if (tab)
|
|
72
|
-
sessionLog.logUserAction(data.action, tab, code, true);
|
|
73
|
-
},
|
|
74
|
-
signalAdded: (page, data) => {
|
|
75
|
-
if (this._context.isRunningTool())
|
|
76
|
-
return;
|
|
77
|
-
if (data.signal.name !== "navigation")
|
|
78
|
-
return;
|
|
79
|
-
const tab = import_tab.Tab.forPage(page);
|
|
80
|
-
const navigateAction = {
|
|
81
|
-
name: "navigate",
|
|
82
|
-
url: data.signal.url,
|
|
83
|
-
signals: []
|
|
84
|
-
};
|
|
85
|
-
if (tab)
|
|
86
|
-
sessionLog.logUserAction(navigateAction, tab, `await page.goto('${data.signal.url}');`, false);
|
|
87
|
-
}
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
|
|
92
43
|
class Context {
|
|
93
44
|
constructor(options) {
|
|
94
45
|
this._tabs = [];
|
|
@@ -300,9 +251,6 @@ class Context {
|
|
|
300
251
|
_live: true
|
|
301
252
|
});
|
|
302
253
|
}
|
|
303
|
-
// Initialize InputRecorder for user action capture
|
|
304
|
-
if (this.sessionLog)
|
|
305
|
-
await InputRecorder.create(this, browserContext);
|
|
306
254
|
return result;
|
|
307
255
|
}
|
|
308
256
|
lookupSecret(secretName) {
|
|
@@ -33,24 +33,8 @@ __export(sessionLog_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(sessionLog_exports);
|
|
34
34
|
var import_fs = __toESM(require("fs"));
|
|
35
35
|
var import_path = __toESM(require("path"));
|
|
36
|
-
var import_net = require("net");
|
|
37
36
|
var import_config = require("./config");
|
|
38
37
|
var import_response = require("./response");
|
|
39
|
-
function sendRecorderEvent(event) {
|
|
40
|
-
const port = process.env.CLAUDE_RECORDER_PORT;
|
|
41
|
-
if (!port)
|
|
42
|
-
return;
|
|
43
|
-
try {
|
|
44
|
-
const socket = import_net.createConnection({
|
|
45
|
-
port: Number(port),
|
|
46
|
-
host: process.env.CLAUDE_RECORDER_HOST || "127.0.0.1"
|
|
47
|
-
});
|
|
48
|
-
const payload = JSON.stringify(event) + "\n";
|
|
49
|
-
socket.on("error", () => socket.destroy());
|
|
50
|
-
socket.write(payload, () => socket.end());
|
|
51
|
-
} catch (error) {
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
38
|
class SessionLog {
|
|
55
39
|
constructor(sessionFolder) {
|
|
56
40
|
this._sessionFileQueue = Promise.resolve();
|
|
@@ -84,40 +68,6 @@ class SessionLog {
|
|
|
84
68
|
lines.push("");
|
|
85
69
|
this._sessionFileQueue = this._sessionFileQueue.then(() => import_fs.default.promises.appendFile(this._file, lines.join("\n")));
|
|
86
70
|
}
|
|
87
|
-
logUserAction(action, tab, code, isUpdate) {
|
|
88
|
-
code = code.trim();
|
|
89
|
-
// Send recorder event for user action tracking
|
|
90
|
-
const actionForLog = { ...action };
|
|
91
|
-
delete actionForLog.ariaSnapshot;
|
|
92
|
-
delete actionForLog.selector;
|
|
93
|
-
actionForLog.isUpdate = !!isUpdate;
|
|
94
|
-
sendRecorderEvent({
|
|
95
|
-
type: "user-action",
|
|
96
|
-
action: actionForLog,
|
|
97
|
-
code,
|
|
98
|
-
url: tab.page.url(),
|
|
99
|
-
timestamp: Date.now()
|
|
100
|
-
});
|
|
101
|
-
// Also log to session file
|
|
102
|
-
const lines = [""];
|
|
103
|
-
lines.push(
|
|
104
|
-
`### User action: ${action.name}`,
|
|
105
|
-
"- Args",
|
|
106
|
-
"```json",
|
|
107
|
-
JSON.stringify(actionForLog, null, 2),
|
|
108
|
-
"```"
|
|
109
|
-
);
|
|
110
|
-
if (code) {
|
|
111
|
-
lines.push(
|
|
112
|
-
"- Code",
|
|
113
|
-
"```js",
|
|
114
|
-
code,
|
|
115
|
-
"```"
|
|
116
|
-
);
|
|
117
|
-
}
|
|
118
|
-
lines.push("");
|
|
119
|
-
this._sessionFileQueue = this._sessionFileQueue.then(() => import_fs.default.promises.appendFile(this._file, lines.join("\n")));
|
|
120
|
-
}
|
|
121
71
|
}
|
|
122
72
|
// Annotate the CommonJS export names for ESM import in node:
|
|
123
73
|
0 && (module.exports = {
|
|
@@ -32,14 +32,9 @@ function createCustomMessageHandler(testInfo, context) {
|
|
|
32
32
|
if (data.initialize) {
|
|
33
33
|
if (backend)
|
|
34
34
|
throw new Error("MCP backend is already initialized");
|
|
35
|
-
backend = new import_browserServerBackend.BrowserServerBackend({ ...import_config.defaultConfig, capabilities: ["testing"]
|
|
35
|
+
backend = new import_browserServerBackend.BrowserServerBackend({ ...import_config.defaultConfig, capabilities: ["testing"] }, (0, import_browserContextFactory.identityBrowserContextFactory)(context));
|
|
36
36
|
await backend.initialize(data.initialize.clientInfo);
|
|
37
37
|
const pausedMessage = await generatePausedMessage(testInfo, context);
|
|
38
|
-
// Ensure recorder UI appears immediately by triggering a benign action that doesn't change page state.
|
|
39
|
-
try {
|
|
40
|
-
await backend.callTool("browser_tabs", { action: "list" });
|
|
41
|
-
} catch (e) {
|
|
42
|
-
}
|
|
43
38
|
return { initialize: { pausedMessage } };
|
|
44
39
|
}
|
|
45
40
|
if (data.listTools) {
|