@smoothdeploy/playwright-core 1.58.3 → 1.60.0-beta-1780662356000

package/lib/tools/cli-client/skill/references/tracing.md

@@ -0,0 +1,139 @@
+# Tracing
+
+Capture detailed execution traces for debugging and analysis. Traces include DOM snapshots, screenshots, network activity, and console logs.
+
+## Basic Usage
+
+```bash
+# Start trace recording
+playwright-cli tracing-start
+
+# Perform actions
+playwright-cli open https://example.com
+playwright-cli click e1
+playwright-cli fill e2 "test"
+
+# Stop trace recording
+playwright-cli tracing-stop
+```
+
+## Trace Output Files
+
+When you start tracing, Playwright creates a `traces/` directory with several files:
+
+### `trace-{timestamp}.trace`
+
+**Action log** - The main trace file containing:
+- Every action performed (clicks, fills, navigations)
+- DOM snapshots before and after each action
+- Screenshots at each step
+- Timing information
+- Console messages
+- Source locations
+
+### `trace-{timestamp}.network`
+
+**Network log** - Complete network activity:
+- All HTTP requests and responses
+- Request headers and bodies
+- Response headers and bodies
+- Timing (DNS, connect, TLS, TTFB, download)
+- Resource sizes
+- Failed requests and errors
+
+### `resources/`
+
+**Resources directory** - Cached resources:
+- Images, fonts, stylesheets, scripts
+- Response bodies for replay
+- Assets needed to reconstruct page state
+
+## What Traces Capture
+
+| Category | Details |
+|----------|---------|
+| **Actions** | Clicks, fills, hovers, keyboard input, navigations |
+| **DOM** | Full DOM snapshot before/after each action |
+| **Screenshots** | Visual state at each step |
+| **Network** | All requests, responses, headers, bodies, timing |
+| **Console** | All console.log, warn, error messages |
+| **Timing** | Precise timing for each operation |
+
+## Use Cases
+
+### Debugging Failed Actions
+
+```bash
+playwright-cli tracing-start
+playwright-cli open https://app.example.com
+
+# This click fails - why?
+playwright-cli click e5
+
+playwright-cli tracing-stop
+# Open trace to see DOM state when click was attempted
+```
+
+### Analyzing Performance
+
+```bash
+playwright-cli tracing-start
+playwright-cli open https://slow-site.com
+playwright-cli tracing-stop
+
+# View network waterfall to identify slow resources
+```
+
+### Capturing Evidence
+
+```bash
+# Record a complete user flow for documentation
+playwright-cli tracing-start
+
+playwright-cli open https://app.example.com/checkout
+playwright-cli fill e1 "4111111111111111"
+playwright-cli fill e2 "12/25"
+playwright-cli fill e3 "123"
+playwright-cli click e4
+
+playwright-cli tracing-stop
+# Trace shows exact sequence of events
+```
+
+## Trace vs Video vs Screenshot
+
+| Feature | Trace | Video | Screenshot |
+|---------|-------|-------|------------|
+| **Format** | .trace file | .webm video | .png/.jpeg image |
+| **DOM inspection** | Yes | No | No |
+| **Network details** | Yes | No | No |
+| **Step-by-step replay** | Yes | Continuous | Single frame |
+| **File size** | Medium | Large | Small |
+| **Best for** | Debugging | Demos | Quick capture |
+
+## Best Practices
+
+### 1. Start Tracing Before the Problem
+
+```bash
+# Trace the entire flow, not just the failing step
+playwright-cli tracing-start
+playwright-cli open https://example.com
+# ... all steps leading to the issue ...
+playwright-cli tracing-stop
+```
+
+### 2. Clean Up Old Traces
+
+Traces can consume significant disk space:
+
+```bash
+# Remove traces older than 7 days
+find .playwright-cli/traces -mtime +7 -delete
+```
+
+## Limitations
+
+- Traces add overhead to automation
+- Large traces can consume significant disk space
+- Some dynamic content may not replay perfectly

package/lib/tools/cli-client/skill/references/video-recording.md

@@ -0,0 +1,143 @@
+# Video Recording
+
+Capture browser automation sessions as video for debugging, documentation, or verification. Produces WebM (VP8/VP9 codec).
+
+## Basic Recording
+
+```bash
+# Open browser first
+playwright-cli open
+
+# Start recording
+playwright-cli video-start demo.webm
+
+# Add a chapter marker for section transitions
+playwright-cli video-chapter "Getting Started" --description="Opening the homepage" --duration=2000
+
+# Navigate and perform actions
+playwright-cli goto https://example.com
+playwright-cli snapshot
+playwright-cli click e1
+
+# Add another chapter
+playwright-cli video-chapter "Filling Form" --description="Entering test data" --duration=2000
+playwright-cli fill e2 "test input"
+
+# Stop and save
+playwright-cli video-stop
+```
+
+## Best Practices
+
+### 1. Use Descriptive Filenames
+
+```bash
+# Include context in filename
+playwright-cli video-start recordings/login-flow-2024-01-15.webm
+playwright-cli video-start recordings/checkout-test-run-42.webm
+```
+
+### 2. Record entire hero scripts.
+
+When recording a video for the user or as a proof of work, it is best to create a code snippet and execute it with run-code.
+It allows pulling appropriate pauses between the actions and annotating the video. There are new Playwright APIs for that.
+
+1) Perform scenario using CLI and take note of all locators and actions. You'll need those locators to request their bounding boxes for highlight.
+2) Create a file with the intended script for video (below). Use pressSequentially w/ delay for nice typing, make reasonable pauses.
+3) Use playwright-cli run-code --filename your-script.js
+
+**Important**: Overlays are `pointer-events: none` — they do not interfere with page interactions. You can safely keep sticky overlays visible while clicking, filling, or performing any actions on the page.
+
+```js
+async page => {
+  await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } });
+  await page.goto('https://demo.playwright.dev/todomvc');
+
+  // Show a chapter card — blurs the page and shows a dialog.
+  // Blocks until duration expires, then auto-removes.
+  // Use this for simple use cases, but always feel free to hand-craft your own beautiful
+  // overlay via await page.screencast.showOverlay().
+  await page.screencast.showChapter('Adding Todo Items', {
+    description: 'We will add several items to the todo list.',
+    duration: 2000,
+  });
+
+  // Perform action
+  await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Walk the dog', { delay: 60 });
+  await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter');
+  await page.waitForTimeout(1000);
+
+  // Show next chapter
+  await page.screencast.showChapter('Verifying Results', {
+    description: 'Checking the item appeared in the list.',
+    duration: 2000,
+  });
+
+  // Add a sticky annotation that stays while you perform actions.
+  // Overlays are pointer-events: none, so they won't block clicks.
+  const annotation = await page.screencast.showOverlay(`
+    <div style="position: absolute; top: 8px; right: 8px;
+      padding: 6px 12px; background: rgba(0,0,0,0.7);
+      border-radius: 8px; font-size: 13px; color: white;">
+      ✓ Item added successfully
+    </div>
+  `);
+
+  // Perform more actions while the annotation is visible
+  await page.getByRole('textbox', { name: 'What needs to be done?' }).pressSequentially('Buy groceries', { delay: 60 });
+  await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter');
+  await page.waitForTimeout(1500);
+
+  // Remove the annotation when done
+  await annotation.dispose();
+
+  // You can also highlight relevant locators and provide contextual annotations.
+  const bounds = await page.getByText('Walk the dog').boundingBox();
+  await page.screencast.showOverlay(`
+    <div style="position: absolute;
+      top: ${bounds.y}px;
+      left: ${bounds.x}px;
+      width: ${bounds.width}px;
+      height: ${bounds.height}px;
+      border: 1px solid red;">
+    </div>
+    <div style="position: absolute;
+      top: ${bounds.y + bounds.height + 5}px;
+      left: ${bounds.x + bounds.width / 2}px;
+      transform: translateX(-50%);
+      padding: 6px;
+      background: #808080;
+      border-radius: 10px;
+      font-size: 14px;
+      color: white;">Check it out, it is right above this text
+    </div>
+  `, { duration: 2000 });
+
+  await page.screencast.stop();
+}
+```
+
+Embrace creativity, overlays are powerful.
+
+### Overlay API Summary
+
+| Method | Use Case |
+|--------|----------|
+| `page.screencast.showChapter(title, { description?, duration?, styleSheet? })` | Full-screen chapter card with blurred backdrop — ideal for section transitions |
+| `page.screencast.showOverlay(html, { duration? })` | Custom HTML overlay — use for callouts, labels, highlights |
+| `disposable.dispose()` | Remove a sticky overlay added without duration |
+| `page.screencast.hideOverlays()` / `page.screencast.showOverlays()` | Temporarily hide/show all overlays |
+
+## Tracing vs Video
+
+| Feature | Video | Tracing |
+|---------|-------|---------|
+| Output | WebM file | Trace file (viewable in Trace Viewer) |
+| Shows | Visual recording | DOM snapshots, network, console, actions |
+| Use case | Demos, documentation | Debugging, analysis |
+| Size | Larger | Smaller |
+
+## Limitations
+
+- Recording adds slight overhead to automation
+- Large recordings can consume significant disk space

package/lib/tools/trace/SKILL.md

@@ -0,0 +1,171 @@
+---
+name: playwright-trace
+description: Inspect Playwright trace files from the command line — list actions, view requests, console, errors, snapshots and screenshots.
+allowed-tools: Bash(npx:*)
+---
+
+# Playwright Trace CLI
+
+Inspect `.zip` trace files produced by Playwright tests without opening a browser.
+
+## Workflow
+
+1. Start with `trace open <trace.zip>` to extract the trace and see its metadata.
+2. Use `trace actions` to see all actions with their action IDs.
+3. Use `trace action <action-id>` to drill into a specific action — see parameters, logs, source location, and available snapshots.
+4. Use `trace requests`, `trace console`, or `trace errors` for cross-cutting views.
+5. Use `trace snapshot <action-id>` to get the DOM snapshot, or run a browser command against it.
+6. Use `trace close` to remove the extracted trace data when done.
+
+All commands after `open` operate on the currently opened trace — no need to pass the trace file again. Opening a new trace replaces the previous one.
+
+## Commands
+
+### Open a trace
+
+```bash
+# Extract trace and show metadata: browser, viewport, duration, action/error counts
+npx playwright trace open <trace.zip>
+```
+
+### Close a trace
+
+```bash
+# Remove extracted trace data
+npx playwright trace close
+```
+
+### Actions
+
+```bash
+# List all actions as a tree with action IDs and timing
+npx playwright trace actions
+
+# Filter by action title (regex, case-insensitive)
+npx playwright trace actions --grep "click"
+
+# Only failed actions
+npx playwright trace actions --errors-only
+```
+
+### Action details
+
+```bash
+# Show full details for one action: params, result, logs, source, snapshots
+npx playwright trace action <action-id>
+```
+
+The `action` command displays available snapshot phases (before, input, after) and the exact command to extract them.
+
+### Requests
+
+```bash
+# All network requests: method, status, URL, duration, size
+npx playwright trace requests
+
+# Filter by URL pattern
+npx playwright trace requests --grep "api"
+
+# Filter by HTTP method
+npx playwright trace requests --method POST
+
+# Only failed requests (status >= 400)
+npx playwright trace requests --failed
+```
+
+### Request details
+
+```bash
+# Show full details for one request: headers, body, security
+npx playwright trace request <request-id>
+```
+
+### Console
+
+```bash
+# All console messages and stdout/stderr
+npx playwright trace console
+
+# Only errors
+npx playwright trace console --errors-only
+
+# Only browser console (no stdout/stderr)
+npx playwright trace console --browser
+
+# Only stdout/stderr (no browser console)
+npx playwright trace console --stdio
+```
+
+### Errors
+
+```bash
+# All errors with stack traces and associated actions
+npx playwright trace errors
+```
+
+### Snapshots
+
+The `snapshot` command loads the DOM snapshot for an action into a headless browser and runs a single browser command against it. Without a browser command, it returns the accessibility snapshot.
+
+```bash
+# Get the accessibility snapshot (default)
+npx playwright trace snapshot <action-id>
+
+# Use a specific phase
+npx playwright trace snapshot <action-id> --name before
+
+# Run eval to query the DOM
+npx playwright trace snapshot <action-id> -- eval "document.title"
+npx playwright trace snapshot <action-id> -- eval "document.querySelector('#error').textContent"
+
+# Eval on a specific element ref (from the snapshot)
+npx playwright trace snapshot <action-id> -- eval "el => el.getAttribute('data-testid')" e5
+
+# Take a screenshot of the snapshot
+npx playwright trace snapshot <action-id> -- screenshot
+
+# Redirect output to a file
+npx playwright trace snapshot <action-id> -- eval "document.body.outerHTML" --filename=page.html
+npx playwright trace snapshot <action-id> -- screenshot --filename=screenshot.png
+```
+
+Only three browser commands are useful on a frozen snapshot: `snapshot`, `eval`, and `screenshot`.
+
+### Attachments
+
+```bash
+# List all trace attachments
+npx playwright trace attachments
+
+# Extract an attachment by its number
+npx playwright trace attachment 1
+npx playwright trace attachment 1 -o out.png
+```
+
+## Typical investigation
+
+```bash
+# 1. Open the trace and see what's inside
+npx playwright trace open test-results/my-test/trace.zip
+
+# 2. What actions ran?
+npx playwright trace actions
+
+# 3. Which action failed?
+npx playwright trace actions --errors-only
+
+# 4. What went wrong?
+npx playwright trace action 12
+
+# 5. What did the page look like at that moment?
+npx playwright trace snapshot 12
+
+# 6. Query the DOM for more detail
+npx playwright trace snapshot 12 -- eval "document.querySelector('.error-message').textContent"
+
+# 7. Any relevant network failures?
+npx playwright trace requests --failed
+
+# 8. Any console errors?
+npx playwright trace console --errors-only
+```

package/lib/{server/utils/profiler.js → tools/utils/extension.js}

@@ -26,40 +26,53 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var profiler_exports = {};
-__export(profiler_exports, {
-  startProfiling: () => startProfiling,
-  stopProfiling: () => stopProfiling
+var extension_exports = {};
+__export(extension_exports, {
+  isPlaywrightExtensionInstalled: () => isPlaywrightExtensionInstalled,
+  playwrightExtensionId: () => playwrightExtensionId,
+  playwrightExtensionInstallUrl: () => playwrightExtensionInstallUrl
 });
-module.exports = __toCommonJS(profiler_exports);
+module.exports = __toCommonJS(extension_exports);
 var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
-const profileDir = process.env.PWTEST_PROFILE_DIR || "";
-let session;
-async function startProfiling() {
-  if (!profileDir)
-    return;
-  session = new (require("inspector")).Session();
-  session.connect();
-  await new Promise((f) => {
-    session.post("Profiler.enable", () => {
-      session.post("Profiler.start", f);
-    });
-  });
+const playwrightExtensionId = "mmlmfjhmonkocbjadbfplnigmagldckm";
+const playwrightExtensionInstallUrl = `https://chromewebstore.google.com/detail/playwright-extension/${playwrightExtensionId}`;
+async function isPlaywrightExtensionInstalled(userDataDir) {
+  let entries;
+  try {
+    entries = await import_fs.default.promises.readdir(userDataDir);
+  } catch {
+    return false;
+  }
+  for (const entry of entries) {
+    if (entry !== "Default" && !entry.startsWith("Profile "))
+      continue;
+    if (await isExtensionInstalledInProfile(import_path.default.join(userDataDir, entry)))
+      return true;
+  }
+  return false;
 }
-async function stopProfiling(profileName) {
-  if (!profileDir)
-    return;
-  await new Promise((f) => session.post("Profiler.stop", (err, { profile }) => {
-    if (!err) {
-      import_fs.default.mkdirSync(profileDir, { recursive: true });
-      import_fs.default.writeFileSync(import_path.default.join(profileDir, profileName + ".json"), JSON.stringify(profile));
-    }
-    f();
-  }));
+async function isExtensionInstalledInProfile(profileDir) {
+  if (await pathExists(import_path.default.join(profileDir, "Extensions", playwrightExtensionId)))
+    return true;
+  try {
+    const prefs = await import_fs.default.promises.readFile(import_path.default.join(profileDir, "Preferences"), "utf-8");
+    return prefs.includes(`"${playwrightExtensionId}"`);
+  } catch {
+    return false;
+  }
+}
+async function pathExists(p) {
+  try {
+    await import_fs.default.promises.access(p);
+    return true;
+  } catch {
+    return false;
+  }
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  startProfiling,
-  stopProfiling
+  isPlaywrightExtensionInstalled,
+  playwrightExtensionId,
+  playwrightExtensionInstallUrl
 });

package/lib/tools/utils/socketConnection.js

@@ -0,0 +1,108 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var socketConnection_exports = {};
+__export(socketConnection_exports, {
+  SocketConnection: () => SocketConnection,
+  compareSemver: () => compareSemver
+});
+module.exports = __toCommonJS(socketConnection_exports);
+class SocketConnection {
+  constructor(socket) {
+    this._pendingBuffers = [];
+    this._socket = socket;
+    socket.on("data", (buffer) => this._onData(buffer));
+    socket.on("close", () => {
+      this.onclose?.();
+    });
+    socket.on("error", (e) => console.error(`error: ${e.message}`));
+  }
+  async send(message) {
+    await new Promise((resolve, reject) => {
+      this._socket.write(`${JSON.stringify(message)}
+`, (error) => {
+        if (error)
+          reject(error);
+        else
+          resolve(void 0);
+      });
+    });
+  }
+  close() {
+    this._socket.destroy();
+  }
+  _onData(buffer) {
+    let end = buffer.indexOf("\n");
+    if (end === -1) {
+      this._pendingBuffers.push(buffer);
+      return;
+    }
+    this._pendingBuffers.push(buffer.slice(0, end));
+    const message = Buffer.concat(this._pendingBuffers).toString();
+    this._dispatchMessage(message);
+    let start = end + 1;
+    end = buffer.indexOf("\n", start);
+    while (end !== -1) {
+      const message2 = buffer.toString(void 0, start, end);
+      this._dispatchMessage(message2);
+      start = end + 1;
+      end = buffer.indexOf("\n", start);
+    }
+    this._pendingBuffers = [buffer.slice(start)];
+  }
+  _dispatchMessage(message) {
+    try {
+      this.onmessage?.(JSON.parse(message));
+    } catch (e) {
+      console.error("failed to dispatch message", e);
+    }
+  }
+}
+function compareSemver(a, b) {
+  const aBase = a.replace(/-.*$/, "");
+  const bBase = b.replace(/-.*$/, "");
+  const aParts = aBase.split(".").map(Number);
+  const bParts = bBase.split(".").map(Number);
+  for (let i = 0; i < 3; i++) {
+    if (aParts[i] > bParts[i])
+      return 1;
+    if (aParts[i] < bParts[i])
+      return -1;
+  }
+  const aTimestamp = parseSuffixTimestamp(a);
+  const bTimestamp = parseSuffixTimestamp(b);
+  if (aTimestamp > bTimestamp)
+    return 1;
+  if (aTimestamp < bTimestamp)
+    return -1;
+  return 0;
+}
+function parseSuffixTimestamp(version) {
+  const match = version.match(/^\d+\.\d+\.\d+-(?:alpha|beta)-(.+)$/);
+  if (!match)
+    return Infinity;
+  const suffix = match[1];
+  if (/^\d{4}-\d{2}-\d{2}$/.test(suffix))
+    return new Date(suffix).getTime();
+  return Number(suffix);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SocketConnection,
+  compareSemver
+});