feat(screencast): style action decorations, keep cursor visible - #42758
Pavel Feldman (pavelfeldman) merged 1 commit into
Conversation
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
- `showActions({ style: { point, highlight, title } })` takes CSS declarations for each decoration
- point marker and target highlight are opt-in, rendered via dedicated screencast elements
- deprecate `fontSize` in favor of `style.title`
- cursor stays at the last action point, survives navigations and travels along a slightly curved path
- macOS-style cursor
- `--cursor` for `video-start`, `--point-style`, `--highlight-style`, `--title-style` for `video-show-actions`
e252a42 to
51fb242
Compare
Test results for "tests 1"2 failed 7 flaky51979 passed, 1247 skipped Merge workflow run. |
🟢 Both failures are a known CDN flake — the PR is clearHi, I'm the Playwright bot and I triaged the red CI here. The two failures are DetailsOverall: nothing in this PR reaches browser downloading. The diff is screencast action decorations — Pre-existing flake / infra
No re-run needed for correctness; a retry should go green. Triaged by the Playwright bot - agent run |
Test results for "MCP"1 failed 8602 passed, 1446 skipped Merge workflow run. |
🟢 All three failures are known flakes — the PR is clearHi, I'm the Playwright bot and I triaged the red CI here. The MCP failure is DetailsOverall: the diff is screencast action decorations — Pre-existing flake / infra
A retry should go green; nothing here needs a code change. Triaged by the Playwright bot - agent run |
d7ce229
into
microsoft:main
## ✨ Highlights - **🎬 Smooth 60 fps, styleable videos** — `video-start --fps=60` records smooth 60 fps videos instead of the default 25, and `video-start --cursor` renders an animated mouse cursor that travels to each action point and stays visible between actions. `video-show-actions` takes `--point-style`, `--highlight-style` and `--title-style` CSS declarations; the action point marker and the target highlight are now only shown when styled. ([microsoft/playwright#42752](microsoft/playwright#42752), [microsoft/playwright#42758](microsoft/playwright#42758)) - **🧰 WebMCP tools show up in the snapshot** — the tools a page registers are listed at the top of the page snapshot with their descriptions and input schemas, so `webmcp-call` can be used without running `webmcp-list` first. Set `webmcp: false` in the config file (env `PLAYWRIGHT_MCP_WEBMCP=false`) to stop collecting page-registered tools. ([microsoft/playwright#42671](microsoft/playwright#42671)) - **🌗 Switch between light and dark color scheme** ([microsoft/playwright#42243](microsoft/playwright#42243)) — an agent working on a dark theme had no way to see it mid-session. New `set-color-scheme`, `set-reduced-motion`, `set-forced-colors`, `set-contrast` and `set-media` commands emulate media features on the fly, and the matching `clear-*` commands reset them. ([microsoft/playwright#42668](microsoft/playwright#42668)) - **📁 Absolute paths in results** ([microsoft/playwright#42497](microsoft/playwright#42497)) — links to snapshots, screenshots, console logs and downloads are relative to the working directory, which a consumer without one cannot resolve. Set `filePaths: "absolute"` in the config file (env `PLAYWRIGHT_MCP_FILE_PATHS=absolute`) to get absolute paths instead. ([microsoft/playwright#42673](microsoft/playwright#42673)) ## 🐛 Fixes - `fix(chromium): bypass service workers on the storage state page` — `state-save` no longer runs the site's own scripts, or fails when they redirect, for origins with an active service worker ([microsoft/playwright#42656](microsoft/playwright#42656)). ([#42664](microsoft/playwright#42664), [#42741](microsoft/playwright#42741)) - `fix(mcp): keep upload modal, skip short secrets and bad headers` — a failed `upload` keeps the file chooser open so it can be retried, secrets shorter than 4 characters no longer rewrite the whole output with `<secret>` markers, and `route` ignores header lines that have no name. ([#42713](microsoft/playwright#42713)) ## 📦 Upgrading ```bash npm install -g @playwright/cli@0.1.21 ```
This PR contains the following updates: | Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) | |---|---|---|---| | [@types/node](https://redirect.github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/node) ([source](https://redirect.github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node)) | [`^26.6.1` → `^26.6.2`](https://renovatebot.com/diffs/npm/@types%2fnode/26.6.1/26.6.2) |  |  | | [npm:@playwright/mcp](https://playwright.dev) ([source](https://redirect.github.com/microsoft/playwright-mcp)) | `0.0.81` → `0.0.82` |  |  | --- ### Release Notes <details> <summary>microsoft/playwright-mcp (npm:@​playwright/mcp)</summary> ### [`v0.0.82`](https://redirect.github.com/microsoft/playwright-mcp/releases/tag/v0.0.82) [Compare Source](https://redirect.github.com/microsoft/playwright-mcp/compare/v0.0.81...v0.0.82) #### ✨ Highlights - **🎬 Smooth 60 fps, styleable videos** — `browser_start_video` (opt-in via `--caps=devtools`) takes `fps`, so `fps: 60` records smooth 60 fps videos instead of the default 25, and `cursor: true` renders an animated mouse cursor that travels to each action point and stays visible between actions. `browser_video_show_actions` takes a `style` with `point`, `highlight` and `title` CSS declarations; the action point marker and the target highlight are now only shown when styled. ([microsoft/playwright#42752](https://redirect.github.com/microsoft/playwright/pull/42752), [microsoft/playwright#42758](https://redirect.github.com/microsoft/playwright/pull/42758)) - **🧰 WebMCP tools become real MCP tools** — the tools a page registers through the [WebMCP](https://webmachinelearning.github.io/webmcp/) API now show up right in the tool list as `webmcp_<tool>`, with the page's own input schema and annotations, so an agent can call them directly and let the page do the work instead of driving its UI. The list follows the current tab, and clients get a `tools/list_changed` notification when it changes. This replaces `browser_webmcp_list` / `browser_webmcp_call` from v0.0.81, which are no longer exposed over MCP. Tool names, descriptions, schemas and results come from the page, so treat them as untrusted input. Pass `--no-webmcp` (config `webmcp: false`, env `PLAYWRIGHT_MCP_WEBMCP=false`) to opt out. WebMCP is experimental, see [WebMCP in Chrome](https://developer.chrome.com/docs/ai/webmcp) for how to enable it. ([microsoft/playwright#42671](https://redirect.github.com/microsoft/playwright/pull/42671)) - **🌗 Switch between light and dark color scheme** ([microsoft/playwright#42243](https://redirect.github.com/microsoft/playwright/issues/42243)) — an agent working on a dark theme had no way to see it mid-session. The new **`browser_emulate_media`** tool emulates media features on the fly: `colorScheme`, `reducedMotion`, `forcedColors`, `contrast` and the `media` type (screen / print). Omitted parameters are left unchanged, `null` clears an override. ([microsoft/playwright#42668](https://redirect.github.com/microsoft/playwright/pull/42668)) - **📁 Absolute paths in results** ([microsoft/playwright#42497](https://redirect.github.com/microsoft/playwright/issues/42497)) — links to snapshots, screenshots, console logs and downloads are relative to the workspace root, which a client without one cannot resolve. Pass `--file-paths=absolute` (config `filePaths: "absolute"`, env `PLAYWRIGHT_MCP_FILE_PATHS=absolute`) to get absolute paths instead. ([microsoft/playwright#42673](https://redirect.github.com/microsoft/playwright/pull/42673)) #### 🐛 Fixes - `fix(mcp): keep upload modal and reject bad headers` — a failed `browser_file_upload` (e.g. a missing file) reports the error and keeps the file chooser open so it can be retried, and `browser_route` (opt-in via `--caps=network`) returns an error for a header that is not in the `Name: Value` form instead of setting a header named `""`. ([microsoft/playwright#42713](https://redirect.github.com/microsoft/playwright/pull/42713)) - `fix(chromium): bypass service workers on the storage state page` — `browser_storage_state` (opt-in via `--caps=storage`) no longer runs the site's own scripts, or fails when they redirect, for origins with an active service worker ([microsoft/playwright#42656](https://redirect.github.com/microsoft/playwright/issues/42656)). ([microsoft/playwright#42664](https://redirect.github.com/microsoft/playwright/pull/42664), [microsoft/playwright#42741](https://redirect.github.com/microsoft/playwright/pull/42741)) #### 📦 Upgrading Configs that use `@playwright/mcp@latest` pick this release up on the next client restart. To pin it: ```bash npx @playwright/mcp@0.0.82 ``` </details> --- ### Configuration 📅 **Schedule**: (UTC) - Branch creation - At any time (no schedule defined) - Automerge - At any time (no schedule defined) 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://redirect.github.com/renovatebot/renovate/discussions) if that's undesired. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/soodoh/dotfiles). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0NC4xMDMuMCIsInVwZGF0ZWRJblZlciI6IjQ0LjEwMy4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
This PR contains the following updates: | Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Adoption](https://docs.renovatebot.com/merge-confidence/) | [Passing](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) | |---|---|---|---|---|---| | [@playwright/mcp](https://playwright.dev) ([source](https://redirect.github.com/microsoft/playwright-mcp)) | `0.0.81` → `0.0.82` |  |  |  |  | --- > [!WARNING] > Some dependencies could not be looked up. Check the warning logs for more information. --- ### Release Notes <details> <summary>microsoft/playwright-mcp (@​playwright/mcp)</summary> ### [`v0.0.82`](https://redirect.github.com/microsoft/playwright-mcp/releases/tag/v0.0.82) [Compare Source](https://redirect.github.com/microsoft/playwright-mcp/compare/v0.0.81...v0.0.82) #### ✨ Highlights - **🎬 Smooth 60 fps, styleable videos** — `browser_start_video` (opt-in via `--caps=devtools`) takes `fps`, so `fps: 60` records smooth 60 fps videos instead of the default 25, and `cursor: true` renders an animated mouse cursor that travels to each action point and stays visible between actions. `browser_video_show_actions` takes a `style` with `point`, `highlight` and `title` CSS declarations; the action point marker and the target highlight are now only shown when styled. ([microsoft/playwright#42752](https://redirect.github.com/microsoft/playwright/pull/42752), [microsoft/playwright#42758](https://redirect.github.com/microsoft/playwright/pull/42758)) - **🧰 WebMCP tools become real MCP tools** — the tools a page registers through the [WebMCP](https://webmachinelearning.github.io/webmcp/) API now show up right in the tool list as `webmcp_<tool>`, with the page's own input schema and annotations, so an agent can call them directly and let the page do the work instead of driving its UI. The list follows the current tab, and clients get a `tools/list_changed` notification when it changes. This replaces `browser_webmcp_list` / `browser_webmcp_call` from v0.0.81, which are no longer exposed over MCP. Tool names, descriptions, schemas and results come from the page, so treat them as untrusted input. Pass `--no-webmcp` (config `webmcp: false`, env `PLAYWRIGHT_MCP_WEBMCP=false`) to opt out. WebMCP is experimental, see [WebMCP in Chrome](https://developer.chrome.com/docs/ai/webmcp) for how to enable it. ([microsoft/playwright#42671](https://redirect.github.com/microsoft/playwright/pull/42671)) - **🌗 Switch between light and dark color scheme** ([microsoft/playwright#42243](https://redirect.github.com/microsoft/playwright/issues/42243)) — an agent working on a dark theme had no way to see it mid-session. The new **`browser_emulate_media`** tool emulates media features on the fly: `colorScheme`, `reducedMotion`, `forcedColors`, `contrast` and the `media` type (screen / print). Omitted parameters are left unchanged, `null` clears an override. ([microsoft/playwright#42668](https://redirect.github.com/microsoft/playwright/pull/42668)) - **📁 Absolute paths in results** ([microsoft/playwright#42497](https://redirect.github.com/microsoft/playwright/issues/42497)) — links to snapshots, screenshots, console logs and downloads are relative to the workspace root, which a client without one cannot resolve. Pass `--file-paths=absolute` (config `filePaths: "absolute"`, env `PLAYWRIGHT_MCP_FILE_PATHS=absolute`) to get absolute paths instead. ([microsoft/playwright#42673](https://redirect.github.com/microsoft/playwright/pull/42673)) #### 🐛 Fixes - `fix(mcp): keep upload modal and reject bad headers` — a failed `browser_file_upload` (e.g. a missing file) reports the error and keeps the file chooser open so it can be retried, and `browser_route` (opt-in via `--caps=network`) returns an error for a header that is not in the `Name: Value` form instead of setting a header named `""`. ([microsoft/playwright#42713](https://redirect.github.com/microsoft/playwright/pull/42713)) - `fix(chromium): bypass service workers on the storage state page` — `browser_storage_state` (opt-in via `--caps=storage`) no longer runs the site's own scripts, or fails when they redirect, for origins with an active service worker ([microsoft/playwright#42656](https://redirect.github.com/microsoft/playwright/issues/42656)). ([microsoft/playwright#42664](https://redirect.github.com/microsoft/playwright/pull/42664), [microsoft/playwright#42741](https://redirect.github.com/microsoft/playwright/pull/42741)) #### 📦 Upgrading Configs that use `@playwright/mcp@latest` pick this release up on the next client restart. To pin it: ```bash npx @playwright/mcp@0.0.82 ``` </details> --- ### Configuration 📅 **Schedule**: (UTC) - Branch creation - At any time (no schedule defined) - Automerge - At any time (no schedule defined) 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/paulnsorensen/dotfiles). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0NC4xMDMuMCIsInVwZGF0ZWRJblZlciI6IjQ0LjEwMy4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119--> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Chores** - Updated the Playwright MCP package to version 0.0.82. - Synchronized the package version used by the Codex profile test. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: dep-harvest-bot <paulnsorensen@gmail.com> Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
Summary
showActions({ style: { point, highlight, title } })takes CSS declarations per decoration; point marker and target highlight are now opt-infontSizein favor ofstyle.title--cursorforvideo-start,--point-style/--highlight-style/--title-styleforvideo-show-actions