stably 4.12.6 → 4.12.8

package/dist/stably-browser.js

@@ -1,8 +1,11 @@
 #!/usr/bin/env node
 
-// ../../app/node_modules/.pnpm/@stablyai-internal+playwright-cli@0.4.16/node_modules/@stablyai-internal/playwright-cli/playwright-cli.js
+// ../../app/node_modules/.pnpm/@stablyai-internal+playwright-cli@0.4.19/node_modules/@stablyai-internal/playwright-cli/playwright-cli.js
 var fs = require("fs");
 var path = require("path");
+if (process.platform === "darwin" && !process.env.PLAYWRIGHT_DAEMON_SOCKETS_DIR) {
+  process.env.PLAYWRIGHT_DAEMON_SOCKETS_DIR = "/tmp/playwright-cli";
+}
 var argv = process.argv.slice(2);
 var cmdIndex = argv.findIndex((arg) => !arg.startsWith("-"));
 if (cmdIndex !== -1 && argv[cmdIndex] === "run-file") {
@@ -193,10 +196,19 @@ const test = realPw.test.extend({
 
   page: async ({ context }, use) => {
     const page = context.pages()[0] || await context.newPage();
+    // Clear any stale device emulation left by a prior test's page.setViewportSize() call.
+    // setViewportSize sets Emulation.setDeviceMetricsOverride which persists across run-test
+    // invocations on the same daemon. Without clearing, window.innerWidth returns the emulated
+    // (fake) size, corrupting decoration measurements and causing progressive window shrink.
+    try {
+      const clearSession = await context.newCDPSession(page);
+      await clearSession.send('Emulation.clearDeviceMetricsOverride').catch(() => {});
+      await clearSession.detach();
+    } catch (_) {}
     // Resize the browser window to match the user's configured viewport.
     // Strategy: resize the OS window via Browser.setWindowBounds when the viewport fits
     // on screen (no device emulation needed). When it doesn't fit, maximize the window
-    // and use setViewportSize (device emulation) to force the exact dimensions \u2014 this is
+    // and use Emulation.setDeviceMetricsOverride to force the exact dimensions \u2014 this is
     // safe because the emulated viewport is larger than the window, so no white borders.
     const vp = process.env.PLAYWRIGHT_CLI_VIEWPORT;
     if (vp) {
@@ -228,15 +240,16 @@ const test = realPw.test.extend({
             if (currentBounds.windowState === 'maximized' || currentBounds.windowState === 'fullscreen') {
               await cdpSession.send('Browser.setWindowBounds', { windowId, bounds: { windowState: 'normal' } });
             }
-            // Clear any prior device emulation so innerWidth/Height reflect actual window size.
-            await cdpSession.send('Emulation.clearDeviceMetricsOverride').catch(() => {});
             const { bounds: measuredBounds } = await cdpSession.send('Browser.getWindowBounds', { windowId });
             const inner = await page.evaluate(() => ({ width: window.innerWidth, height: window.innerHeight }));
             const decoW = measuredBounds.width - inner.width;
             const decoH = measuredBounds.height - inner.height;
-            const targetW = w + decoW;
-            const targetH = h + decoH;
-            await cdpSession.send('Browser.setWindowBounds', { windowId, bounds: { width: targetW, height: targetH } });
+            // Sanity check: negative decorations means measurement is corrupted \u2014 skip resize.
+            if (decoW >= 0 && decoH >= 0) {
+              const targetW = w + decoW;
+              const targetH = h + decoH;
+              await cdpSession.send('Browser.setWindowBounds', { windowId, bounds: { width: targetW, height: targetH } });
+            }
           }
           await cdpSession.detach();
         } catch (_) { /* best-effort \u2014 headed only, fails silently in headless */ }

package/dist/stably-plugin-cli/skills/debugging-test-failures/SKILL.md

@@ -88,9 +88,10 @@ Five types of issues cause test failures:
 4. **Fix or explore**:
    - If error-context clearly explains the issue (wrong text, element missing, on wrong page) → fix the code directly
    - If error-context is insufficient → open the browser and explore manually (see below)
-5. **Verify**: Run the test again. Run at least **twice** to confirm the fix is stable.
-6. **One fix at a time**: Fix the first failure point, re-run. Do not speculatively rewrite multiple parts at once.
-7. **Group related failures**: Only group tests that share the same root cause
+5. **Analyze traces**: If `trace.zip` exists in test-results/, use `pwtrace show <trace.zip>` for step-by-step replay. See the `pwtrace-debugging` skill for the full workflow.
+6. **Verify**: Run the test again. Run at least **twice** to confirm the fix is stable.
+7. **One fix at a time**: Fix the first failure point, re-run. Do not speculatively rewrite multiple parts at once.
+8. **Group related failures**: Only group tests that share the same root cause
 
 ## When to Open the Browser for Manual Exploration
 

package/dist/stably-plugin-cli/skills/pwtrace-debugging/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: pwtrace-debugging
+description: Debug Playwright test failures by analyzing trace files using pwtrace CLI. Use after stably-browser run-test fails and a trace.zip exists. Provides systematic debugging from overview to detailed DOM/console/network inspection.
+---
+
+# Trace-Based Test Debugging with pwtrace
+
+After a `stably-browser run-test` failure, use `pwtrace` to analyze the trace file without re-running the test.
+
+## When to Use
+
+- After `stably-browser run-test` fails and `trace.zip` exists in test-results/
+- When error messages are unclear and you need DOM state, console errors, or network failures
+- To understand what the page looked like at the moment of failure
+
+## Workflow: Progressive Disclosure
+
+Always start broad, then drill down:
+
+```
+pwtrace show → identify failed step
+pwtrace step N → get error details
+pwtrace dom/console/network → understand why
+```
+
+### Step 1: Overview
+
+```bash
+pwtrace show test-results/<test-name>/trace.zip
+```
+
+This shows all actions with status, duration, and errors. Find the step number(s) marked as failed.
+
+### Step 2: Failed Step Details
+
+```bash
+pwtrace step test-results/<test-name>/trace.zip <N>
+```
+
+Shows the specific action, its parameters, duration, and error message.
+
+### Step 3: Investigate Root Cause
+
+Based on the error type, use the appropriate command:
+
+**Element not found / wrong element:**
+```bash
+# See all interactive elements at that step
+pwtrace dom --step <N> --interactive test-results/<test-name>/trace.zip
+
+# Search for specific elements
+pwtrace dom --step <N> --selector "button" test-results/<test-name>/trace.zip
+```
+
+**JavaScript errors:**
+```bash
+# All console errors
+pwtrace console --level error test-results/<test-name>/trace.zip
+
+# Errors around a specific step
+pwtrace console --step <N> --level error test-results/<test-name>/trace.zip
+```
+
+**API/network failures:**
+```bash
+# Show only failed requests (4xx/5xx) with response bodies
+pwtrace network --failed test-results/<test-name>/trace.zip
+
+# All network requests
+pwtrace network test-results/<test-name>/trace.zip
+```
+
+## Debugging Decision Tree
+
+| Symptom | Command | What to look for |
+|---------|---------|-----------------|
+| Timeout waiting for selector | `dom --step N --interactive` | Element missing, different name, or disabled |
+| Assertion failed | `dom --step N` | Actual page content vs expected |
+| Click did nothing | `console --step N --level error` | JS errors preventing handler |
+| Page didn't load | `network --failed` | 4xx/5xx responses, CORS, timeouts |
+| Wrong page state | `dom --step N` vs `dom --step N-1` | Compare before/after |
+
+## Example: Debugging a Login Test Failure
+
+```bash
+# 1. See what failed
+pwtrace show test-results/login-test/trace.zip
+# Output: Step 8 (click "Sign In") failed
+
+# 2. Get error details
+pwtrace step test-results/login-test/trace.zip 8
+# Output: TimeoutError waiting for selector
+
+# 3. Check what elements exist
+pwtrace dom --step 8 --interactive test-results/login-test/trace.zip
+# Output: Button says "Log In" not "Sign In"
+
+# 4. Check for JS errors
+pwtrace console --step 8 --level error test-results/login-test/trace.zip
+# Output: No errors — selector is just wrong
+```
+
+## Important Notes
+
+- Trace files are only generated when `trace` is enabled in playwright config or via `--trace=on`
+- The `--interactive` flag on `dom` filters to actionable elements only — use it first
+- All commands support `--format json` for programmatic analysis
+- Use `pwtrace dom --step N --after` to see DOM state after the action (default is before)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stably",
-  "version": "4.12.6",
+  "version": "4.12.8",
   "packageManager": "pnpm@10.24.0",
   "description": "AI-powered E2E Playwright testing CLI. Stably can understand your codebase, edit/run tests, and handle complex test scenarios for you.",
   "main": "dist/index.mjs",
@@ -87,7 +87,8 @@
     "playwright": "1.59.0-alpha-1771104257000",
     "@stablyai/codegen-agent-constants": "workspace:*",
     "@stablyai-internal/api-client": "workspace:*",
-    "@stablyai-internal/playwright-cli": "0.4.16",
+    "@stablyai-internal/playwright-cli": "0.4.19",
+    "@stablyai-internal/pwtrace": "0.3.1",
     "@stablyai/agent-hooks": "workspace:*",
     "@stablyai/agent-schemas": "workspace:*",
     "@stablyai/agent-security-hooks": "workspace:*",

package/dist/node_modules/playwright/lib/mcp/browser/config.js.rej

@@ -1,11 +0,0 @@
---- lib/mcp/browser/config.js
-+++ lib/mcp/browser/config.js
-@@ -305,7 +305,7 @@
- function outputDir(config, clientInfo) {
-   if (config.outputDir)
-     return import_path.default.resolve(config.outputDir);
-   const rootPath = (0, import_server2.firstRootPath)(clientInfo);
-   if (rootPath)
--    return import_path.default.resolve(rootPath, config.skillMode ? ".playwright-cli" : ".playwright-mcp");
-+    return import_path.default.resolve(rootPath, config.skillMode ? ".stably-browser" : ".playwright-mcp");
-   const tmpDir = process.env.PW_TMPDIR_FOR_TEST ?? import_os.default.tmpdir();