@openclaw/diffs 2026.7.2-beta.5 → 2026.8.1-beta.2

package/node_modules/playwright-core/lib/server/electron/loader.js

@@ -23,12 +23,13 @@ var disabledFeatures = [
   "PaintHolding",
   // See https://github.com/microsoft/playwright/issues/32230
   "ThirdPartyStoragePartitioning",
+  // Chromium 149 rejects re-applying the `origin` header on a redirect (as request interception
+  // does) with net::ERR_INVALID_ARGUMENT. See https://github.com/microsoft/playwright/issues/41690
+  "BlockOriginHeaderModificationOnRedirect",
   // See https://github.com/microsoft/playwright/issues/16126
   "Translate",
   // See https://issues.chromium.org/u/1/issues/435410220
   "AutoDeElevate",
-  // See https://github.com/microsoft/playwright/issues/37714
-  "RenderDocument",
   // Prevents downloading optimization hints on startup.
   "OptimizationHints",
   // Disables forced sign-in in Edge.
@@ -63,6 +64,8 @@ var chromiumSwitches = (options) => [
   "--disable-popup-blocking",
   "--disable-prompt-on-repost",
   "--disable-renderer-backgrounding",
+  "--disable-updater-scheduler",
+  // Prevents Edge-specific updater from being launched when Edge is launched on mac.
   "--force-color-profile=srgb",
   "--metrics-recording-only",
   "--no-first-run",

package/node_modules/playwright-core/lib/serverRegistry.js

@@ -6,7 +6,11 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  try {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  } catch (e) {
+    throw mod = 0, e;
+  }
 };
 var __export = (target, all) => {
   for (var name in all)

package/node_modules/playwright-core/lib/tools/cli-client/help.json

@@ -1,12 +1,14 @@
 {
-  "global": "Usage: playwright-cli <command> [args] [options]\nUsage: playwright-cli -s=<session> <command> [args] [options]\n\nCore:\n  open [url]                  open the browser\n  attach [name]               attach to a running playwright browser\n  close                       close the browser\n  detach                      detach from an attached browser\n  goto <url>                  navigate to a url\n  type <text>                 type text into editable element\n  click <target> [button]     perform click on a web page\n  dblclick <target> [button]  perform double click on a web page\n  fill <target> <text>        fill text into editable element\n  drag <startTarget> <endTarget> perform drag and drop between two elements\n  drop <target>               drop files or data onto an element\n  hover <target>              hover over element on page\n  select <target> <val>       select an option in a dropdown\n  upload <file>               upload one or multiple files\n  check <target>              check a checkbox or radio button\n  uncheck <target>            uncheck a checkbox or radio button\n  snapshot [target]           capture page snapshot to obtain element ref\n  eval <func> [target]        evaluate javascript expression on page or element\n  dialog-accept [prompt]      accept a dialog\n  dialog-dismiss              dismiss a dialog\n  resize <w> <h>              resize the browser window\n  delete-data                 delete session data\n\nNavigation:\n  go-back                     go back to the previous page\n  go-forward                  go forward to the next page\n  reload                      reload the current page\n\nKeyboard:\n  press <key>                 press a key on the keyboard, `a`, `arrowleft`\n  keydown <key>               press a key down on the keyboard\n  keyup <key>                 press a key up on the keyboard\n\nMouse:\n  mousemove <x> <y>           move mouse to a given position\n  mousedown [button]          press mouse down\n  mouseup [button]            press mouse up\n  mousewheel <dx> <dy>        scroll mouse wheel\n\nSave as:\n  screenshot [target]         screenshot of the current page or element\n  pdf                         save page as pdf\n\nTabs:\n  tab-list                    list all tabs\n  tab-new [url]               create a new tab\n  tab-close [index]           close a browser tab\n  tab-select <index>          select a browser tab\n\nStorage:\n  state-load <filename>       loads browser storage (authentication) state from a file\n  state-save [filename]       saves the current storage (authentication) state to a file\n  cookie-list                 list all cookies (optionally filtered by domain/path)\n  cookie-get <name>           get a specific cookie by name\n  cookie-set <name> <value>   set a cookie with optional flags\n  cookie-delete <name>        delete a specific cookie\n  cookie-clear                clear all cookies\n  localstorage-list           list all localstorage key-value pairs\n  localstorage-get <key>      get a localstorage item by key\n  localstorage-set <key> <value> set a localstorage item\n  localstorage-delete <key>   delete a localstorage item\n  localstorage-clear          clear all localstorage\n  sessionstorage-list         list all sessionstorage key-value pairs\n  sessionstorage-get <key>    get a sessionstorage item by key\n  sessionstorage-set <key> <value> set a sessionstorage item\n  sessionstorage-delete <key> delete a sessionstorage item\n  sessionstorage-clear        clear all sessionstorage\n\nNetwork:\n  requests                    list all network requests since loading the page. each request is numbered for use with the `request` command.\n  request <index>             show full details (headers, body, response) of a single network request by its number from the `requests` command.\n  request-headers <index>     print only the request headers for a single network request by its number from the `requests` command.\n  request-body <index>        print only the request body for a single network request by its number from the `requests` command.\n  response-headers <index>    print only the response headers for a single network request by its number from the `requests` command.\n  response-body <index>       print the response body for a single network request by its number from the `requests` command. textual bodies are inlined; binary bodies are saved to a file and the path is printed.\n  route <pattern>             mock network requests matching a url pattern\n  route-list                  list all active network routes\n  unroute [pattern]           remove routes matching a pattern (or all routes)\n  network-state-set <state>   set the browser network state to online or offline\n\nDevTools:\n  console [min-level]         list console messages\n  run-code [code]             run playwright code snippet\n  tracing-start               start trace recording\n  tracing-stop                stop trace recording\n  video-start [filename]      start video recording\n  video-stop                  stop video recording\n  video-chapter <title>       add a chapter marker to the video recording\n  video-show-actions          annotate subsequent cli/mcp actions on the page with a callout that names the action and highlights the target element\n  video-hide-actions          stop annotating actions performed on the page\n  show                        show playwright dashboard\n  pause-at <location>         run the test up to a specific location and pause there\n  resume                      resume the test execution\n  step-over                   step over the next call in the test\n  generate-locator <target>   generate a playwright locator for the given element\n  highlight [target]          show (or with --hide, remove) a highlight overlay for an element; `--hide` without a target hides all page highlights.\n\nInstall:\n  install                     initialize workspace\n  install-browser [browser]   install browser\n\nBrowser sessions:\n  list                        list browser sessions\n  close-all                   close all browser sessions\n  kill-all                    forcefully kill all browser sessions (for stale/zombie processes)\n\nGlobal options:\n  --help [command]            print help\n  --json                      output response as JSON\n  --raw                       output only the result value, without status and code\n  --version                   print version",
+  "global": "Usage: playwright-cli <command> [args] [options]\nUsage: playwright-cli -s=<session> <command> [args] [options]\n\nCore:\n  open [url]                  open the browser\n  attach [name]               attach to a running playwright browser\n  close                       close the browser\n  detach                      detach from an attached browser\n  goto <url>                  navigate to a url\n  type <text>                 type text into editable element\n  click <target> [button]     perform click on a web page\n  dblclick <target> [button]  perform double click on a web page\n  fill <target> <text>        fill text into editable element\n  drag <startTarget> <endTarget> perform drag and drop between two elements\n  drop <target>               drop files or data onto an element\n  hover <target>              hover over element on page\n  select <target> <val>       select an option in a dropdown\n  upload <file>               upload one or multiple files\n  check <target>              check a checkbox or radio button\n  uncheck <target>            uncheck a checkbox or radio button\n  snapshot [target]           capture page snapshot to obtain element ref\n  find [text]                 search the page snapshot for text or a regexp, returning matching nodes with surrounding context (like search snippets)\n  eval <func> [target]        evaluate javascript expression on page or element\n  dialog-accept [prompt]      accept a dialog\n  dialog-dismiss              dismiss a dialog\n  resize <w> <h>              resize the browser window\n  delete-data                 delete session data\n\nNavigation:\n  go-back                     go back to the previous page\n  go-forward                  go forward to the next page\n  reload                      reload the current page\n\nKeyboard:\n  press <key>                 press a key on the keyboard, `a`, `arrowleft`\n  keydown <key>               press a key down on the keyboard\n  keyup <key>                 press a key up on the keyboard\n\nMouse:\n  mousemove <x> <y>           move mouse to a given position\n  mousedown [button]          press mouse down\n  mouseup [button]            press mouse up\n  mousewheel <dx> <dy>        scroll mouse wheel\n\nSave as:\n  screenshot [target]         screenshot of the current page or element\n  pdf                         save page as pdf\n\nTabs:\n  tab-list                    list all tabs\n  tab-new [url]               create a new tab\n  tab-close [index]           close a browser tab\n  tab-select <index>          select a browser tab\n\nStorage:\n  state-load <filename>       loads browser storage (authentication) state from a file\n  state-save [filename]       saves the current storage (authentication) state to a file\n  cookie-list                 list all cookies (optionally filtered by domain/path)\n  cookie-get <name>           get a specific cookie by name\n  cookie-set <name> <value>   set a cookie with optional flags\n  cookie-delete <name>        delete a specific cookie\n  cookie-clear                clear all cookies\n  localstorage-list           list all localstorage key-value pairs\n  localstorage-get <key>      get a localstorage item by key\n  localstorage-set <key> <value> set a localstorage item\n  localstorage-delete <key>   delete a localstorage item\n  localstorage-clear          clear all localstorage\n  sessionstorage-list         list all sessionstorage key-value pairs\n  sessionstorage-get <key>    get a sessionstorage item by key\n  sessionstorage-set <key> <value> set a sessionstorage item\n  sessionstorage-delete <key> delete a sessionstorage item\n  sessionstorage-clear        clear all sessionstorage\n\nNetwork:\n  requests                    list all network requests since loading the page. each request is numbered for use with the `request` command.\n  request <index>             show full details (headers, body, response) of a single network request by its number from the `requests` command.\n  request-headers <index>     print only the request headers for a single network request by its number from the `requests` command.\n  request-body <index>        print only the request body for a single network request by its number from the `requests` command.\n  response-headers <index>    print only the response headers for a single network request by its number from the `requests` command.\n  response-body <index>       print the response body for a single network request by its number from the `requests` command. textual bodies are inlined; binary bodies are saved to a file and the path is printed.\n  route <pattern>             mock network requests matching a url pattern\n  route-list                  list all active network routes\n  unroute [pattern]           remove routes matching a pattern (or all routes)\n  network-state-set <state>   set the browser network state to online or offline\n\nDevTools:\n  console [min-level]         list console messages\n  run-code [code]             run playwright code snippet\n  tracing-start               start trace recording\n  tracing-stop                stop trace recording\n  video-start [filename]      start video recording\n  video-stop                  stop video recording\n  video-chapter <title>       add a chapter marker to the video recording\n  video-show-actions          annotate subsequent cli/mcp actions on the page with a callout that names the action and highlights the target element\n  video-hide-actions          stop annotating actions performed on the page\n  show                        show playwright dashboard\n  pause-at <location>         run the test up to a specific location and pause there\n  resume                      resume the test execution\n  step-over                   step over the next call in the test\n  generate-locator <target>   generate a playwright locator for the given element\n  highlight [target]          show (or with --hide, remove) a highlight overlay for an element; `--hide` without a target hides all page highlights.\n\nInstall:\n  install                     initialize workspace\n  install-browser [browser]   install browser\n\nBrowser sessions:\n  list                        list browser sessions\n  close-all                   close all browser sessions\n  kill-all                    forcefully kill all browser sessions (for stale/zombie processes)\n\nGlobal options:\n  --help [command]            print help\n  --json                      output response as JSON\n  --raw                       output only the result value, without status and code\n  --version                   print version",
   "commands": {
     "open": {
-      "help": "playwright-cli open [url]\n\nOpen the browser\n\nArguments:\n  [url]                       the url to navigate to\nOptions:\n  --browser                   browser or chrome channel to use, possible values: chrome, firefox, webkit, msedge.\n  --config                    path to the configuration file, defaults to .playwright/cli.config.json\n  --headed                    run browser in headed mode\n  --persistent                use persistent browser profile\n  --profile                   path to a persistent user data directory.",
+      "help": "playwright-cli open [url]\n\nOpen the browser\n\nArguments:\n  [url]                       the url to navigate to\nOptions:\n  --browser                   browser or chrome channel to use, possible values: chrome, firefox, webkit, msedge.\n  --config                    path to the configuration file, defaults to .playwright/cli.config.json\n  --device                    emulate a specific device, for example \"iphone 15\".\n  --headed                    run browser in headed mode\n  --mobile                    emulate a generic mobile device (pixel 10 for chromium, iphone 17 for webkit). mobile pages are usually lighter, which saves tokens.\n  --persistent                use persistent browser profile\n  --profile                   path to a persistent user data directory.",
       "flags": {
         "browser": "string",
         "config": "string",
+        "device": "string",
         "headed": "boolean",
+        "mobile": "boolean",
         "persistent": "boolean",
         "profile": "string"
       },
@@ -148,6 +150,15 @@
         "target"
       ]
     },
+    "find": {
+      "help": "playwright-cli find [text]\n\nSearch the page snapshot for text or a regexp, returning matching nodes with surrounding context (like search snippets)\n\nArguments:\n  [text]                      plain text to search for in the page snapshot (case-insensitive substring match)\nOptions:\n  --regex                     regular expression to search for in the page snapshot. provide either a text argument or --regex, not both.",
+      "flags": {
+        "regex": "string"
+      },
+      "args": [
+        "text"
+      ]
+    },
     "eval": {
       "help": "playwright-cli eval <func> [target]\n\nEvaluate JavaScript expression on page or element\n\nArguments:\n  <func>                      () => { /* code */ } or (element) => { /* code */ } when element is provided\n  [target]                    exact target element reference from the page snapshot, or a unique element selector\nOptions:\n  --filename                  save evaluation result to a file instead of returning it in the response.",
       "flags": {
@@ -268,10 +279,12 @@
       ]
     },
     "screenshot": {
-      "help": "playwright-cli screenshot [target]\n\nscreenshot of the current page or element\n\nArguments:\n  [target]                    exact target element reference from the page snapshot, or a unique element selector\nOptions:\n  --filename                  file name to save the screenshot to. defaults to `page-{timestamp}.{png|jpeg}` if not specified.\n  --full-page                 when true, takes a screenshot of the full scrollable page, instead of the currently visible viewport.",
+      "help": "playwright-cli screenshot [target]\n\nscreenshot of the current page or element\n\nArguments:\n  [target]                    exact target element reference from the page snapshot, or a unique element selector\nOptions:\n  --filename                  file name to save the screenshot to. defaults to `page-{timestamp}.{png|jpeg|webp}` if not specified.\n  --type                      image format. if unset, inferred from the filename extension, otherwise png. (one of: png, jpeg, webp)\n  --full-page                 when true, takes a screenshot of the full scrollable page, instead of the currently visible viewport.\n  --hires                     when true, captures a high-resolution screenshot using device pixels (accounts for the device pixel ratio), instead of css pixels.",
       "flags": {
         "filename": "string",
-        "full-page": "boolean"
+        "type": "string",
+        "full-page": "boolean",
+        "hires": "boolean"
       },
       "args": [
         "target"
@@ -342,7 +355,7 @@
       "raw": true
     },
     "cookie-set": {
-      "help": "playwright-cli cookie-set <name> <value>\n\nSet a cookie with optional flags\n\nArguments:\n  <name>                      cookie name\n  <value>                     cookie value\nOptions:\n  --domain                    cookie domain\n  --path                      cookie path\n  --expires                   cookie expiration as unix timestamp\n  --httpOnly                  whether the cookie is http only\n  --secure                    whether the cookie is secure\n  --sameSite                  cookie samesite attribute",
+      "help": "playwright-cli cookie-set <name> <value>\n\nSet a cookie with optional flags\n\nArguments:\n  <name>                      cookie name\n  <value>                     cookie value\nOptions:\n  --domain                    cookie domain\n  --path                      cookie path\n  --expires                   cookie expiration as unix timestamp\n  --httpOnly                  whether the cookie is http only\n  --secure                    whether the cookie is secure\n  --sameSite                  cookie samesite attribute (one of: Strict, Lax, None)",
       "flags": {
         "domain": "string",
         "path": "string",
@@ -588,7 +601,7 @@
       ]
     },
     "video-show-actions": {
-      "help": "playwright-cli video-show-actions \n\nAnnotate subsequent CLI/MCP actions on the page with a callout that names the action and highlights the target element\n\nOptions:\n  --duration                  how long each action annotation stays on screen, in milliseconds. defaults to 500.\n  --position                  where to place the action title: top-left, top, top-right, bottom-left, bottom, bottom-right. defaults to top-right.\n  --cursor                    cursor decoration: \"pointer\" (default) animates a mouse pointer between action points; \"none\" disables it.",
+      "help": "playwright-cli video-show-actions \n\nAnnotate subsequent CLI/MCP actions on the page with a callout that names the action and highlights the target element\n\nOptions:\n  --duration                  how long each action annotation stays on screen, in milliseconds. defaults to 500.\n  --position                  where to place the action title: top-left, top, top-right, bottom-left, bottom, bottom-right. defaults to top-right. (one of: top-left, top, top-right, bottom-left, bottom, bottom-right)\n  --cursor                    cursor decoration: \"pointer\" (default) animates a mouse pointer between action points; \"none\" disables it. (one of: none, pointer)",
       "flags": {
         "duration": "string",
         "position": "string",
@@ -671,11 +684,13 @@
   },
   "booleanOptions": [
     "headed",
+    "mobile",
     "persistent",
     "submit",
     "boxes",
     "clear",
     "full-page",
+    "hires",
     "httpOnly",
     "secure",
     "static",

package/node_modules/playwright-core/lib/tools/cli-client/program.js

@@ -78,7 +78,7 @@ async function program(options) {
     } else {
       const lines = ["playwright-cli - run playwright mcp commands from terminal"];
       if (process.env.CLAUDECODE || process.env.COPILOT_CLI)
-        lines.push(`Agent skill: ${import_path.default.relative(process.cwd(), (0, import_package.libPath)("tools", "cli-client", "skill", "SKILL.md"))}`);
+        lines.push(`Agent skill: ${import_path.default.relative(process.cwd(), (0, import_package.libPath)("tools", "skills", "playwright-cli", "SKILL.md"))}`);
       lines.push(help.global);
       output.help(lines.join("\n\n"));
     }

package/node_modules/playwright-core/lib/tools/cli-client/session.js

@@ -130,6 +130,10 @@ to start the browser session.`);
     ];
     if (cliArgs.headed)
       args.push("--headed");
+    if (cliArgs.mobile)
+      args.push("--mobile");
+    if (cliArgs.device)
+      args.push(`--device=${cliArgs.device}`);
     if (cliArgs.browser)
       args.push(`--browser=${cliArgs.browser}`);
     if (cliArgs.persistent)

package/node_modules/playwright-core/lib/tools/{cli-client/skill → skills/playwright-cli}/SKILL.md

@@ -47,6 +47,11 @@ playwright-cli upload ./document.pdf
 playwright-cli check e12
 playwright-cli uncheck e12
 playwright-cli snapshot
+# search the snapshot for text or a regexp, returns matching nodes with surrounding context
+playwright-cli find "Sign in"
+playwright-cli find --regex "Sign (in|up)"
+# wrap the regexp in slashes to add flags, e.g. /i for case-insensitive
+playwright-cli find --regex "/sign (in|up)/i"
 playwright-cli eval "document.title"
 playwright-cli eval "el => el.textContent" e5
 # get element id, class, or any attribute not visible in the snapshot
@@ -93,6 +98,7 @@ playwright-cli mousewheel 0 100
 playwright-cli screenshot
 playwright-cli screenshot e5
 playwright-cli screenshot --filename=page.png
+playwright-cli screenshot --hires
 playwright-cli pdf --filename=page.pdf
 ```
 
@@ -209,6 +215,12 @@ playwright-cli open --browser=firefox
 playwright-cli open --browser=webkit
 playwright-cli open --browser=msedge
 
+# Emulate a generic mobile device (Pixel 10 for Chromium, iPhone 17 for WebKit).
+# Prefer this when a mobile layout is acceptable: mobile pages are usually
+# lighter, so snapshots are smaller and cheaper.
+playwright-cli open --mobile
+playwright-cli open --device="iPhone 15"
+
 # Use persistent profile (by default profile is in-memory)
 playwright-cli open --persistent
 # Use persistent profile with custom directory
@@ -278,6 +290,11 @@ playwright-cli snapshot e34
 
 # include each element's bounding box as [box=x,y,width,height]
 playwright-cli snapshot --boxes
+
+# search a large snapshot instead of capturing it all — returns matching nodes
+# with 3 lines of context around each match (like grep -C)
+playwright-cli find "Add to cart"
+playwright-cli find --regex "\\$[0-9]+\\.[0-9]{2}"
 ```
 
 ## Targeting elements
@@ -325,13 +342,13 @@ playwright-cli kill-all
 
 ## Installation
 
-If global `playwright-cli` command is not available, try a local version via `npx playwright-cli`:
+If global `playwright-cli` command is not available, try a local version via `npx playwright cli`:
 
 ```bash
-npx --no-install playwright-cli --version
+npx --no-install playwright --version
 ```
 
-When local version is available, use `npx playwright-cli` in all commands. Otherwise, install `playwright-cli` as a global command:
+When local version is available, use `npx playwright cli` in all commands. Otherwise, install `playwright-cli` as a global command:
 
 ```bash
 npm install -g @playwright/cli@latest
@@ -396,9 +413,8 @@ playwright-cli show --annotate
 * **Request mocking** [references/request-mocking.md](references/request-mocking.md)
 * **Running Playwright code** [references/running-code.md](references/running-code.md)
 * **Browser session management** [references/session-management.md](references/session-management.md)
-* **Spec-driven testing (plan / generate / heal)** [references/spec-driven-testing.md](references/spec-driven-testing.md)
 * **Storage state (cookies, localStorage)** [references/storage-state.md](references/storage-state.md)
-* **Test generation** [references/test-generation.md](references/test-generation.md)
+* **Test generation (plan / generate / heal)** [references/test-generation.md](references/test-generation.md)
 * **Tracing** [references/tracing.md](references/tracing.md)
 * **Video recording** [references/video-recording.md](references/video-recording.md)
 * **Inspecting element attributes** [references/element-attributes.md](references/element-attributes.md)

package/node_modules/playwright-core/lib/tools/{cli-client/skill/references/spec-driven-testing.md → skills/playwright-cli/references/test-generation.md}

@@ -1,12 +1,141 @@
-# Spec-driven testing (plan → generate → heal)
+# Test generation (plan → generate → heal)
 
-End-to-end workflow for authoring and maintaining Playwright tests using `playwright-cli`. The three sections below can be used independently:
+End-to-end workflow for authoring and maintaining Playwright tests with `playwright-cli`. Every `playwright-cli` action emits the equivalent Playwright TypeScript, and that generated code is the raw material for every test. The sections below can be used independently:
 
-- **Planning** — explore the app, produce a spec file describing what to test.
+- **How generation works** — the core mechanic everything else relies on: actions become TypeScript, plus how to add assertions.
+- **Plan** — explore the app, produce a spec file describing what to test.
 - **Generate** — turn a spec into Playwright test files. Update the spec if it's vague or stale.
 - **Heal** — diagnose failing tests, fix the code, reconcile the spec with reality.
 
-All three lean on the same mechanic: run `npx playwright test --debug=cli` in the background, then `playwright-cli attach tw-XXXX` to drive the paused page interactively. See [playwright-tests.md](playwright-tests.md) for the debug/attach mechanics and [test-generation.md](test-generation.md) for how every `playwright-cli` action emits Playwright TypeScript.
+Plan / generate / heal lean on the same mechanic: run `npx playwright test --debug=cli` in the background, then `playwright-cli attach tw-XXXX` to drive the paused page interactively. See [playwright-tests.md](playwright-tests.md) for the debug/attach mechanics.
+
+---
+
+## 0. How generation works
+
+Every action you perform with `playwright-cli` generates corresponding Playwright TypeScript code. This code appears in the output and can be copied directly into your test files.
+
+```bash
+# Start a session
+playwright-cli open https://example.com/login
+
+# Take a snapshot to see elements
+playwright-cli snapshot
+# Output shows: e1 [textbox "Email"], e2 [textbox "Password"], e3 [button "Sign In"]
+
+# Fill form fields - generates code automatically
+playwright-cli fill e1 "user@example.com"
+# Ran Playwright code:
+# await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com');
+
+playwright-cli fill e2 "password123"
+# Ran Playwright code:
+# await page.getByRole('textbox', { name: 'Password' }).fill('password123');
+
+playwright-cli click e3
+# Ran Playwright code:
+# await page.getByRole('button', { name: 'Sign In' }).click();
+```
+
+### Building a test file
+
+Collect the generated code into a Playwright test:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('login flow', async ({ page }) => {
+  // Generated code from playwright-cli session:
+  await page.goto('https://example.com/login');
+  await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com');
+  await page.getByRole('textbox', { name: 'Password' }).fill('password123');
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  // Add assertions
+  await expect(page).toHaveURL(/.*dashboard/);
+});
+```
+
+### Use semantic locators
+
+The generated code uses role-based locators when possible, which are more resilient:
+
+```typescript
+// Generated (good - semantic)
+await page.getByRole('button', { name: 'Submit' }).click();
+
+// Avoid (fragile - CSS selectors)
+await page.locator('#submit-btn').click();
+```
+
+### Explore before recording
+
+Take snapshots to understand the page structure before recording actions:
+
+```bash
+playwright-cli open https://example.com
+playwright-cli snapshot
+# Review the element structure
+playwright-cli click e5
+```
+
+### Add assertions manually
+
+Generated code captures actions but not assertions. Add expectations in your test using one of the recommended matchers:
+
+- `toBeVisible()` — element is rendered and visible
+- `toHaveText(text)` — element text content matches
+- `toHaveValue(value) / toBeEmpty()` — input/select value matches
+- `toBeChecked() / toBeUnchecked()` — checkbox state matches
+- `toMatchAriaSnapshot(snapshot)` — page (or locator) matches a partial accessibility snapshot
+
+Use `playwright-cli generate-locator <target>` to produce the locator expression for the assertion, and the snapshot/eval commands to capture the expected value.
+
+When asserting text content, make sure that generated locator does not contain text from the element itself. `getByTestId()` or `getByLabel()` usually work well with asserting text. When locator is text-based, prefer `toBeVisible()` instead.
+
+Snapshot to be matched does not have to contain all the information - only capture what's necessary for the assertion. You can use regular expressions for unstable values.
+
+```bash
+# Get a stable locator for an element ref to use in the assertion
+playwright-cli --raw generate-locator e5
+# getByRole('button', { name: 'Submit' })
+
+# Capture expected text content for toHaveText
+playwright-cli --raw eval "el => el.textContent" e5
+
+# Capture expected input value for toHaveValue/toBeEmpty
+playwright-cli --raw eval "el => el.value" e5
+
+# Capture expected aria snapshot for toMatchAriaSnapshot/toBeChecked
+# (whole page, or use a ref to scope to a region)
+playwright-cli --raw snapshot
+playwright-cli --raw snapshot e5
+```
+
+```typescript
+// Generated action
+await page.getByRole('button', { name: 'Submit' }).click();
+
+// Manual assertions using the outputs above:
+await expect(page.getByRole('alert', { name: 'Success' })).toBeVisible();
+await expect(page.getByTestId('main-header')).toHaveText('Welcome, user');
+await expect(page.getByRole('textbox', { name: 'Email' })).toHaveValue('user@example.com');
+await expect(page.getByRole('checkbox', { name: 'Enable notifications' })).toBeChecked();
+
+// toMatchAriaSnapshot on the whole page, finds a matching region
+await expect(page).toMatchAriaSnapshot(`
+  - heading "Welcome, user"
+  - link /\\d+ new messages?/
+  - button "Sign out"
+`);
+
+// toMatchAriaSnapshot scoped to a region
+await expect(page.getByRole('navigation')).toMatchAriaSnapshot(`
+  - link "Home"
+  - link /\\d+ new messages?/
+  - link "Profile"
+`);
+```
 
 ---
 
@@ -173,7 +302,7 @@ playwright-cli attach tw-XXXX
 
 Walk the scenario's `Steps:` one by one with `playwright-cli`, treating the spec as the plan and the live app as the source of truth. If a step is vague ("click the button" — which button?), references an element that no longer exists, or contradicts the app's actual behaviour, use your judgement: update the spec to match what the app really does, then keep going. Editing the spec mid-generation is expected.
 
-Every action prints the equivalent Playwright TypeScript (see [test-generation.md](test-generation.md)):
+Every action prints the equivalent Playwright TypeScript (see [How generation works](#0-how-generation-works)):
 
 ```bash
 playwright-cli snapshot                         # find refs
@@ -182,7 +311,7 @@ playwright-cli press Enter
 playwright-cli click e7
 ```
 
-For each `- expect:` bullet, add an explicit assertion. See [test-generation.md](test-generation.md) for details.
+For each `- expect:` bullet, add an explicit assertion. See [How generation works](#0-how-generation-works) for details.
 
 Collect the generated code and write the test file at the path given in the spec:
 
@@ -300,6 +429,5 @@ Only after the user answers, either update the spec (intentional change) or file
 | For... | See |
 |---|---|
 | `--debug=cli` / attach mechanics | [playwright-tests.md](playwright-tests.md) |
-| How `playwright-cli` actions become TS | [test-generation.md](test-generation.md) |
 | Mocking requests during exploration/generation | [request-mocking.md](request-mocking.md) |
 | Managing the CLI browser session | [session-management.md](session-management.md) |

package/node_modules/playwright-core/lib/tools/skills/playwright-component-testing/SKILL.md

@@ -0,0 +1,143 @@
+---
+name: playwright-component-testing
+description: Set up component testing with Playwright using a story gallery — scaffold stories and a gallery dev page driven by the built-in mount fixture, no dedicated component-testing runtime. Use when asked to test React or Vue components in isolation with Playwright, or to migrate off @playwright/experimental-ct-react / -vue.
+---
+
+# Component Testing with Playwright
+
+Test components with regular Playwright e2e tests against a small **story gallery** page hosted by the app's own dev server. No extra test runner, bundler integration or npm packages are required.
+
+## Concept
+
+- A **story** is a tiny wrapper component that embeds the component under test in one specific scenario: hard-coded props, mock data, providers, recorded callbacks. Stories live next to the component in `*.story.tsx` (or `.ts`/`.jsx`/`.js`/`.vue`) files; each named export is one story.
+- The **gallery** is a single page you implement to `references/gallery-spec.md`: it exposes `window.mount(params)` / `window.unmount()` that render a story — resolved from your story files (e.g. with `import.meta.glob`) — into `#root`. It is framework-specific and yours to own — there is no template to copy for it.
+- Tests are plain Playwright tests. The built-in **`mount(storyId, props?)` fixture** (from `@playwright/test`) drives the gallery's `window.mount` and returns a `Locator` for the gallery root (`#root`). Scope the queries from there — `component.getByRole('button').click()`, not `component.click()`. Nothing to scaffold for it.
+
+Everything the component needs must be set up *inside the story* (it runs in the browser); everything the test asserts must be observable *through the page* (DOM, URL, network). Where the component takes callbacks, the story creates the state, provides the callbacks and records the state into a hidden form for the test to assert on. `mount(id, props)` passes plain serializable `props` to the story.
+
+## Setup workflow
+
+1. **Detect the framework and bundler.** React vs Vue decides the framework notes and example story to follow. Then:
+   - **App runs on Vite** (has `vite.config.*`): the gallery is served by the existing dev server at `/playwright/gallery/index.html` — Vite serves any `.html` file under the project root, the app's plugins/aliases/CSS apply automatically, and `vite build` ignores it. No extra server needed.
+   - **Anything else** (Next.js, webpack, no dev server): run a small standalone dev server (e.g. Vite) that serves the gallery page, and point `baseURL` at it. Requires `vite` and the framework plugin as devDependencies.
+2. **Implement the gallery** to `references/gallery-spec.md`: a page at `<project>/playwright/gallery/` that renders the requested story into `#root`. Start from the worked example in the spec and the framework notes in `references/react.md` / `references/vue.md`. Keep story discovery (`import.meta.glob`) and the framework mount here — this is the only framework-specific glue, so keep it small. Import the app's global CSS the same way the app's own entry does.
+3. **Configure Playwright** — add to `playwright.config.ts`:
+
+   ```ts
+   projects: [
+     {
+       name: 'components',
+       testDir: './tests/components',
+       use: { ...devices['Desktop Chrome'], baseURL: 'http://localhost:5173/playwright/gallery/index.html', serviceWorkers: 'block', reuseContext: true },
+     },
+   ],
+   webServer: {
+     command: 'npm run dev',                                       // or: npx vite --config playwright/vite.config.ts
+     url: 'http://localhost:5173/playwright/gallery/index.html',   // standalone server: http://localhost:3100/playwright/gallery/index.html
+     reuseExistingServer: !process.env.CI,
+   },
+   ```
+
+   Match the port to the dev server. `mount` navigates to `baseURL`, so set `baseURL` to the gallery's URL. `serviceWorkers: 'block'` keeps the app's own service worker from serving cached responses that would shadow your `page.route()` mocks. `reuseContext: true` reuses the browser context across tests in a worker (as the old component-testing runtime did) — a large speedup for component suites. If the config already has projects/webServer, merge instead of replacing.
+4. **Write a first story** next to an existing component, modeled on `templates/<react|vue>/Button.story.*`.
+5. **Write a first spec**, modeled on `templates/react/button.spec.ts`, importing `test`/`expect` from `@playwright/test`.
+6. **Run**: `npx playwright test --project=components`. Open `http://localhost:5173/playwright/gallery/index.html` in a browser to eyeball all stories.
+
+## Conventions
+
+- Story id: path under `src/` without the `.story.*` extension, plus the export name — `src/components/Button.story.tsx` export `Primary` → `components/Button/Primary`. Any unique suffix works too: `mount('Button/Primary')`. A `.story.vue` single-file component is one story, addressable by its path alone (its `default` export).
+- One export per scenario. Prefer a new story export over parameterizing an existing one — stories are greppable, reviewable documentation of component states.
+
+## Testing patterns
+
+Examples are React; the Vue equivalents differ only in story syntax.
+
+### Callbacks and events
+
+**The story owns the state and provides the callbacks.** Where the component takes callbacks, create the state inside the story, wire the callbacks to it, and record the state into a hidden form next to the component. Tests perform operations and assert on the recorded values:
+
+```tsx
+export const Stateful = () => {
+  const [expanded, setExpanded] = useState(false);
+  return <>
+    <Expandable expanded={expanded} setExpanded={setExpanded} title="Title">Details</Expandable>
+    <form hidden><input data-testid="expanded" readOnly value={String(expanded)} /></form>
+  </>;
+};
+```
+
+```ts
+test('click should expand', async ({ mount }) => {
+  const component = await mount('components/Expandable/Stateful');
+  await component.locator('.codicon-chevron-right').click();
+  await expect(component.getByTestId('expanded')).toHaveValue('true');
+});
+```
+
+This keeps the whole scenario in the browser: no callback marshalling, the story doubles as documentation, and the recorded state is visible when eyeballing the gallery. Record each observed value in its own `data-testid` input (`String(...)` or `JSON.stringify(...)` for payloads) and assert with `toHaveValue()` — a web-first assertion that retries until the state lands. The negative direction works the same way: perform the operation, then assert the value did **not** change.
+
+### Per-test props
+
+When a scenario is genuinely parametric (e.g. a boundary-value sweep), pass props as the second argument to `mount`; the gallery hands them to the story as its props. Keep props to plain serializable data — callbacks belong inside the story.
+
+```tsx
+export const WithTitle = ({ title = 'Default' }: { title?: string }) =>
+  <Button title={title} />;
+```
+
+```ts
+const component = await mount('components/Button/WithTitle', { title: 'Hello' });
+```
+
+`mount` is generic over the story: pass the story type as a template argument to type-check the props (and `update()`):
+
+```ts
+import type { WithTitle } from './Button.story';
+
+const component = await mount<typeof WithTitle>('components/Button/WithTitle', { title: 'Hello' });
+```
+
+This works for React and Vue stories alike; Vue stories must additionally declare the props at runtime — see the `Typed props` sections in `references/react.md` / `references/vue.md`.
+
+### Prop transitions with `update()`
+
+To test how a component reacts to a prop change **without remounting** (state preserved), call `component.update(newProps)` — it re-renders the same story with new props on the existing root:
+
+```ts
+const component = await mount('components/Counter/Default', { value: 1 });
+await expect(component.getByTestId('value')).toHaveText('1');
+await component.update({ value: 2 });
+await expect(component.getByTestId('value')).toHaveText('2');
+```
+
+This requires the gallery to reuse its root/instance (`references/gallery-spec.md`); state survives as long as the story stays the same.
+
+### Multiple states in one test
+
+Each `mount()` navigates fresh, so tests are fully isolated and mounting several stories in one test is cheap:
+
+```ts
+await expect(await mount('Button/Primary')).toHaveScreenshot('primary.png');
+await expect(await mount('Button/Disabled')).toHaveScreenshot('disabled.png');
+```
+
+For visual comparison, screenshot the returned root locator (as above), not the page, to avoid asserting on browser chrome.
+
+### Network mocking
+
+Use `page.route()` as usual — register routes before `mount()`, since mounting navigates. `serviceWorkers: 'block'` (set in the config above) keeps the app's own service worker from serving cached responses that shadow the routes. Teams with MSW handler libraries can start the worker inside a story or decorator instead.
+
+### Debugging stories
+
+Open your gallery URL (`baseURL`) in a browser and call `await window.mount({ story: 'components/Button/Primary' })` from the devtools console — that is exactly what the `mount` fixture does. An unknown story rejects `window.mount`, which surfaces as the test's `mount()` throwing with a real stack. To browse without the console, give your gallery an optional index page.
+
+## Decision points
+
+- **Monorepos / non-`src` layouts**: change the glob and the id derivation in your gallery (`references/gallery-spec.md`) to match.
+- **Global providers** (theme, i18n, store, router): create a shared `decorator` helper next to the gallery and wrap components in stories; see `references/react.md` / `references/vue.md`.
+## References
+
+- `references/gallery-spec.md` — the gallery endpoint contract to implement (**start here**).
+- `references/react.md` — React walkthrough: providers, StrictMode, CSS.
+- `references/vue.md` — Vue walkthrough: `.story.ts` and `.story.vue` stories, plugins.
+- `references/migration.md` — migrating off `@playwright/experimental-ct-react` / `-vue`.