Zum Inhalt springen
verdict:

Playwright 1.59.0

featured

Release Notes

note: die Zusammenfassung und die Release Notes sind auf Englisch

note: keine Zusammenfassung für dieses ältere Release

Wir fassen die neueren Releases zusammen. Die originalen Release Notes dieser Version stehen hier unten.

release-notesgithub.com/microsoft/playwright · 271 Zeilen
  1. ## 🎬 Screencast
  3. New [page.screencast](https://playwright.dev/docs/api/class-page#page-screencast) API provides a unified interface for capturing page content with:
  4. - Screencast recordings
  5. - Action annotations
  6. - Visual overlays
  7. - Real-time frame capture
  8. - Agentic video receipts
  10. <center>
  12. <img src="https://raw.githubusercontent.com/microsoft/playwright/main/docs/src/images/release-notes-1.59-screencast-demo.gif" alt="Demo" width="500" height="313" />
  14. </center>
  16. **Screencast recording** — record video with precise start/stop control, as an alternative to the [`recordVideo`](https://playwright.dev/docs/api/class-browser#browser-new-context-option-record-video) option:
  18. ```js
  19. await page.screencast.start({ path: 'video.webm' });
  20. // ... perform actions ...
  21. await page.screencast.stop();
  22. ```
  24. **Action annotations** — enable built-in visual annotations that highlight interacted elements and display action titles during recording:
  26. ```js
  27. await page.screencast.showActions({ position: 'top-right' });
  28. ```
  30. [screencast.showActions()](https://playwright.dev/docs/api/class-screencast#screencast-show-actions) accepts `position` (`'top-left'`, `'top'`, `'top-right'`, `'bottom-left'`, `'bottom'`, `'bottom-right'`), `duration` (ms per annotation), and `fontSize` (px). Returns a disposable to stop showing actions.
  32. Action annotations can also be enabled in test fixtures via the `video` option:
  34. ```js
  35. // playwright.config.ts
  36. export default defineConfig({
  37. use: {
  38. video: {
  39. mode: 'on',
  40. show: {
  41. actions: { position: 'top-left' },
  42. test: { position: 'top-right' },
  43. },
  44. },
  45. },
  46. });
  47. ```
  49. **Visual overlays** — add chapter titles and custom HTML overlays on top of the page for richer narration:
  51. ```js
  52. await page.screencast.showChapter('Adding TODOs', {
  53. description: 'Type and press enter for each TODO',
  54. duration: 1000,
  55. });
  57. await page.screencast.showOverlay('<div style="color: red">Recording</div>');
  58. ```
  60. **Real-time frame capture** — stream JPEG-encoded frames for custom processing like thumbnails, live previews, AI vision, and more:
  62. ```js
  63. await page.screencast.start({
  64. onFrame: ({ data }) => sendToVisionModel(data),
  65. size: { width: 800, height: 600 },
  66. });
  67. ```
  69. **Agentic video receipts** — coding agents can produce video evidence of their work. After completing a task, an agent can record a walkthrough video with rich annotations for human review:
  71. ```js
  72. await page.screencast.start({ path: 'receipt.webm' });
  73. await page.screencast.showActions({ position: 'top-right' });
  75. await page.screencast.showChapter('Verifying checkout flow', {
  76. description: 'Added coupon code support per ticket #1234',
  77. });
  79. // Agent performs the verification steps...
  80. await page.locator('#coupon').fill('SAVE20');
  81. await page.locator('#apply-coupon').click();
  82. await expect(page.locator('.discount')).toContainText('20%');
  84. await page.screencast.showChapter('Done', {
  85. description: 'Coupon applied, discount reflected in total',
  86. });
  88. await page.screencast.stop();
  89. ```
  91. The resulting video serves as a receipt: chapter titles provide context, action annotations highlight each interaction, and the visual walkthrough is faster to review than text logs.
  93. ## 🔗 Interoperability
  95. New [browser.bind()](https://playwright.dev/docs/api/class-browser#browser-bind) API makes a launched browser available for `playwright-cli`, `@playwright/mcp`, and other clients to connect to.
  97. **Bind a browser** — start a browser and bind it so others can connect:
  99. ```js
  100. const { endpoint } = await browser.bind('my-session', {
  101. workspaceDir: '/my/project',
  102. });
  103. ```
  105. **Connect from playwright-cli** — connect to the running browser from your favorite coding agent.
  107. ```bash
  108. playwright-cli attach my-session
  109. playwright-cli -s my-session snapshot
  110. ```
  112. **Connect from @playwright/mcp** — or point your MCP server to the running browser.
  114. ```bash
  115. @playwright/mcp --endpoint=my-session
  116. ```
  118. **Connect from a Playwright client** — use API to connect to the browser. Multiple clients at a time are supported!
  120. ```js
  121. const browser = await chromium.connect(endpoint);
  122. ```
  124. Pass `host` and `port` options to bind over WebSocket instead of a named pipe:
  126. ```js
  127. const { endpoint } = await browser.bind('my-session', {
  128. host: 'localhost',
  129. port: 0,
  130. });
  131. // endpoint is a ws:// URL
  132. ```
  134. Call [browser.unbind()](https://playwright.dev/docs/api/class-browser#browser-unbind) to stop accepting new connections.
  136. ## 📊 Observability
  138. Run `playwright-cli show` to open the Dashboard that lists all the bound browsers, their statuses, and allows interacting with them:
  139. - See what your agent is doing on the background browsers
  140. - Click into the sessions for manual interventions
  141. - Open DevTools to inspect pages from the background browsers.
  143. <center>
  145. <img src="https://raw.githubusercontent.com/microsoft/playwright/main/docs/src/images/release-notes-1.59-dashboard.png" alt="Demo" width="1169" height="835" />
  147. </center>
  148. - `playwright-cli` binds all of its browsers automatically, so you can see what your agents are doing.
  149. - Pass `PLAYWRIGHT_DASHBOARD=1` env variable to see all `@playwright/test` browsers in the dashboard.
  151. ## 🐛 CLI debugger for agents
  153. Coding agents can now run `npx playwright test --debug=cli` to attach and debug tests over `playwright-cli` — perfect for automatically fixing tests in agentic workflows:
  155. ```bash
  156. $ npx playwright test --debug=cli
  157. ### Debugging Instructions
  158. - Run "playwright-cli attach tw-87b59e" to attach to this test
  160. $ playwright-cli attach tw-87b59e
  161. ### Session `tw-87b59e` created, attached to `tw-87b59e`.
  162. Run commands with: playwright-cli --session=tw-87b59e <command>
  163. ### Paused
  164. - Navigate to "/" at output/tests/example.spec.ts:4
  166. $ playwright-cli --session tw-87b59e step-over
  167. ### Page
  168. - Page URL: https://playwright.dev/
  169. - Page Title: Fast and reliable end-to-end testing for modern web apps | Playwright
  170. ### Paused
  171. - Expect "toHaveTitle" at output/tests/example.spec.ts:7
  172. ```
  174. ## 📋 CLI trace analysis for agents
  176. Coding agents can run `npx playwright trace` to explore [Playwright Trace](https://playwright.dev/docs/trace-viewer) and understand failing or flaky tests from the command line:
  178. ```bash
  179. $ npx playwright trace open test-results/example-has-title-chromium/trace.zip
  180. Title: example.spec.ts:3 › has title
  182. $ npx playwright trace actions --grep="expect"
  183. # Time Action Duration
  184. ──── ───────── ─────────────────────────────────────────────────────── ────────
  185. 9. 0:00.859 Expect "toHaveTitle" 5.1s ✗
  187. $ npx playwright trace action 9
  188. Expect "toHaveTitle"
  189. Error: expect(page).toHaveTitle(expected) failed
  190. Expected pattern: /Wrong Title/
  191. Received string: "Fast and reliable end-to-end testing for modern web apps | Playwright"
  192. Timeout: 5000ms
  193. Snapshots
  194. available: before, after
  195. usage: npx playwright trace snapshot 9 --name <before|after>
  197. $ npx playwright trace snapshot 9 --name after
  198. ### Page
  199. - Page Title: Fast and reliable end-to-end testing for modern web apps | Playwright
  201. $ npx playwright trace close
  202. ```
  204. ## ♻️ `await using`
  206. Many APIs now return [async disposables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/asyncDispose), enabling the `await using` syntax for automatic cleanup:
  208. ```js
  209. await using page = await context.newPage();
  210. {
  211. await using route = await page.route('**/*', route => route.continue());
  212. await using script = await page.addInitScript('console.log("init script here")');
  213. await page.goto('https://playwright.dev');
  214. // do something
  215. }
  216. // route and init script have been removed at this point
  217. ```
  219. ## 🔍 Snapshots and Locators
  220. - Method [page.ariaSnapshot()](https://playwright.dev/docs/api/class-page#page-aria-snapshot) to capture the aria snapshot of the page — equivalent to `page.locator('body').ariaSnapshot()`.
  221. - Options `depth` and `mode` in [locator.ariaSnapshot()](https://playwright.dev/docs/api/class-locator#locator-aria-snapshot).
  222. - Method [locator.normalize()](https://playwright.dev/docs/api/class-locator#locator-normalize) converts a locator to follow best practices like test ids and aria roles.
  223. - Method [page.pickLocator()](https://playwright.dev/docs/api/class-page#page-pick-locator) enters an interactive mode where hovering over elements highlights them and shows the corresponding locator. Click an element to get its [Locator](https://playwright.dev/docs/api/class-locator) back. Use [page.cancelPickLocator()](https://playwright.dev/docs/api/class-page#page-cancel-pick-locator) to cancel.
  225. ## New APIs
  227. ### Screencast
  228. - [page.screencast](https://playwright.dev/docs/api/class-page#page-screencast) provides video recording, real-time frame streaming, and overlay management.
  229. - Methods [screencast.start()](https://playwright.dev/docs/api/class-screencast#screencast-start) and [screencast.stop()](https://playwright.dev/docs/api/class-screencast#screencast-stop) for recording and frame capture.
  230. - Methods [screencast.showActions()](https://playwright.dev/docs/api/class-screencast#screencast-show-actions) and [screencast.hideActions()](https://playwright.dev/docs/api/class-screencast#screencast-hide-actions) for action annotations.
  231. - Methods [screencast.showChapter()](https://playwright.dev/docs/api/class-screencast#screencast-show-chapter) and [screencast.showOverlay()](https://playwright.dev/docs/api/class-screencast#screencast-show-overlay) for visual overlays.
  232. - Methods [screencast.showOverlays()](https://playwright.dev/docs/api/class-screencast#screencast-show-overlays) and [screencast.hideOverlays()](https://playwright.dev/docs/api/class-screencast#screencast-hide-overlays) for overlay visibility control.
  234. ### Storage, Console and Errors
  235. - Method [browserContext.setStorageState()](https://playwright.dev/docs/api/class-browsercontext#browser-context-set-storage-state) clears existing cookies, local storage, and IndexedDB for all origins and sets a new storage state — no need to create a new context.
  236. - Methods [page.clearConsoleMessages()](https://playwright.dev/docs/api/class-page#page-clear-console-messages) and [page.clearPageErrors()](https://playwright.dev/docs/api/class-page#page-clear-page-errors) to clear stored messages and errors.
  237. - Option `filter` in [page.consoleMessages()](https://playwright.dev/docs/api/class-page#page-console-messages) and [page.pageErrors()](https://playwright.dev/docs/api/class-page#page-page-errors) controls which messages are returned.
  238. - Method [consoleMessage.timestamp()](https://playwright.dev/docs/api/class-consolemessage#console-message-timestamp).
  240. ### Miscellaneous
  241. - [browserContext.debugger](https://playwright.dev/docs/api/class-browsercontext#browser-context-debugger) provides programmatic control over the Playwright debugger.
  242. - Method [browserContext.isClosed()](https://playwright.dev/docs/api/class-browsercontext#browser-context-is-closed).
  243. - Method [request.existingResponse()](https://playwright.dev/docs/api/class-request#request-existing-response) returns the response without waiting.
  244. - Method [response.httpVersion()](https://playwright.dev/docs/api/class-response#response-http-version) returns the HTTP version used by the response.
  245. - Events [cdpSession.on('event')](https://playwright.dev/docs/api/class-cdpsession#cdp-session-event-event) and [cdpSession.on('close')](https://playwright.dev/docs/api/class-cdpsession#cdp-session-event-close) for CDP sessions.
  246. - Option `live` in [tracing.start()](https://playwright.dev/docs/api/class-tracing#tracing-start) for real-time trace updates.
  247. - Option `artifactsDir` in [browserType.launch()](https://playwright.dev/docs/api/class-browsertype#browser-type-launch) to configure the artifacts directory.
  249. ## 🛠️ Other improvements
  250. - UI Mode has an option to only show tests affected by source changes.
  251. - UI Mode and Trace Viewer have improved action filtering.
  252. - HTML Reporter shows the list of runs from the same worker.
  253. - HTML Reporter allows filtering test steps for quick search.
  254. - New trace mode `'retain-on-failure-and-retries'` records a trace for each test run and retains all traces when an attempt fails — great for comparing a passing trace with a failing one from a flaky test.
  256. ## Known Issues ⚠️⚠️
  257. - `navigator.platform` emulation can cause Ctrl or Meta dispatching errors (https://github.com/microsoft/playwright/issues/40009). Pass `PLAYWRIGHT_NO_UA_PLATFORM = '1'` environment variable while we are issuing a patch release. Let us know in the issue how it affected you.
  259. ## Breaking Changes ⚠️
  260. - Removed macOS 14 support for WebKit. We recommend upgrading your macOS version, or keeping an older Playwright version.
  261. - Removed `@playwright/experimental-ct-svelte` package.
  262. - `junit` test reporter now differentiates between types of errors, so some of the previous `<failure>`s are now reported as `<error>`s.
  264. ## Browser Versions
  265. - Chromium 147.0.7727.15
  266. - Mozilla Firefox 148.0.2
  267. - WebKit 26.4
  269. This version was also tested against the following stable channels:
  270. - Google Chrome 146
  271. - Microsoft Edge 146

auf github ansehenimported 2026-09-28 über npm