v1.59.0

microsoft/playwright Releases Developers & Open Source 05/22/2026, 17:25 Score 7/10

Summary

<h2>🎬 Screencast</h2> New <a href="https://playwright.dev/docs/api/class-page#page-screencast" rel="nofollow">page.screencast</a> API provides a unified interface for capturing page content with: <ul> <li>Screencast recordings</li> <li>Action annotations</li> <li>Visual overlays</li> <li>Real-time frame capture</li> <li>Agentic video receipts</li> </ul> <a target="_blank" rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/microsoft/playwright/main/docs/src/images/release-notes-1.59-screencast-demo.gif"><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" style="max-width: 100%; height: auto; max-height: 313px;"></a> Screencast recording — record video with precise start/stop control, as an alternative to the <a href="https://playwright.dev/docs/api/class-browser#browser-new-context-option-record-video" rel="nofollow"><code>recordVideo</code></a> option: <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="await page.screencast.start({ path: 'video.webm' }); // ... perform actions ... await page.screencast.stop();"><pre>await page.screencast.start({ path: 'video.webm' }); // ... perform actions ... await page.screencast.stop();</pre></div> Action annotations — enable built-in visual annotations that highlight interacted elements and display action titles during recording: <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="await page.screencast.showActions({ position: 'top-right' });"><pre>await page.screencast.showActions({ position: 'top-right' });</pre></div> <a href="https://playwright.dev/docs/api/class-screencast#screencast-show-actions" rel="nofollow">screencast.showActions()</a> accepts <code>position</code> (<code>'top-left'</code>, <code>'top'</code>, <code>'top-right'</code>, <code>'bottom-left'</code>, <code>'bottom'</code>, <code>'bottom-right'</code>), <code>duration</code> (ms per annotation), and <code>fontSize</code> (px). Returns a disposable to stop showing actions. Action annotations can also be enabled in test fixtures via the <code>video</code> option: <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// playwright.config.ts export default defineConfig({ use: { video: { mode: 'on', show: { actions: { position: 'top-left' }, test: { position: 'top-right' }, }, }, }, });"><pre>// playwright.config.ts export default defineConfig({ use: { video: { mode: 'on', show: { actions: { position: 'top-left' }, test: { position: 'top-right' }, }, }, }, });</pre></div> Visual overlays — add chapter titles and custom HTML overlays on top of the page for richer narration: <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="await page.screencast.showChapter('Adding TODOs', { description: 'Type and press enter for each TODO', duration: 1000, }); await page.screencast.showOverlay('<div style="color: red">Recording</div>');"><pre>await page.screencast.showChapter('Adding TODOs', { description: 'Type and press enter for each TODO', duration: 1000, }); await page.screencast.showOverlay('<div style="color: red">Recording</div>');</pre></div> Real-time frame capture — stream JPEG-encoded frames for custom processing like thumbnails, live previews, AI vision, and more: <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="await page.screencast.start({ onFrame: ({ data }) => sendToVisionModel(data), size: { width: 800, height: 600 }, });"><pre>await page.screencast.start({ onFrame: ({ data }) => sendToVisionModel(data), size: { width: 800, height: 600 }, });</pre></div> 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: <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="await page.screencast.start({ path: 'receipt.webm' }); await page.screencast.showActions({ position: 'top-right' }); await page.screencast.showChapter('Verifying checkout flow', { description: 'Added coupon code support per ticket #1234', }); // Agent performs the verification steps... await page.locator('#coupon').fill('SAVE20'); await page.locator('#apply-coupon').click(); await expect(page.locator('.discount')).toContainText('20%'); await page.screencast.showChapter('Done', { description: 'Coupon applied, discount reflected in total', }); await page.screencast.stop();"><pre>await page.screencast.start({ path: 'receipt.webm' }); await page.screencast.showActions({ position: 'top-right' }); await page.screencast.showChapter('Verifying checkout flow', { description: 'Added coupon code support per ticket #1234', }); // Agent performs the verification steps... await page.locator('#coupon').fill('SAVE20'); await page.locator('#apply-coupon').click(); await expect(page.locator('.discount')).toContainText('20%'); await page.screencast.showChapter('Done', { description: 'Coupon applied, discount reflected in total', }); await page.screencast.stop();</pre></div> 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. <h2>🔗 Interoperability</h2> New <a href="https://playwright.dev/docs/api/class-browser#browser-bind" rel="nofollow">browser.bind()</a> API makes a launched browser available for <code>playwright-cli</code>, <code>@playwright/mcp</code>, and other clients to connect to. Bind a browser — start a browser and bind it so others can connect: <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const { endpoint } = await browser.bind('my-session', { workspaceDir: '/my/project', });"><pre>const { endpoint } = await browser.bind('my-session', { workspaceDir: '/my/project', });</pre></div> Connect from playwright-cli — connect to the running browser from your favorite coding agent. <div class="highlight highlight-source-shell notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="playwright-cli attach my-session playwright-cli -s my-session snapshot"><pre>playwright-cli attach my-session playwright-cli -s my-session snapshot</pre></div> Connect from @playwright/mcp — or point your MCP server to the running browser. <div class="highlight highlight-source-shell notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@playwright/mcp --endpoint=my-session"><pre>@playwright/mcp --endpoint=my-session</pre></div> Connect from a Playwright client — use API to connect to the browser. Multiple clients at a time are supported! <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const browser = await chromium.connect(endpoint);"><pre>const browser = await chromium.connect(endpoint);</pre></div> Pass <code>host</code> and <code>port</code> options to bind over WebSocket instead of a named pipe: <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const { endpoint } = await browser.bind('my-session', { host: 'localhost', port: 0, }); // endpoint is a ws:// URL"><pre>const { endpoint } = await browser.bind('my-session', { host: 'localhost', port: 0, }); // endpoint is a ws:// URL</pre></div> Call <a href="https://playwright.dev/docs/api/class-browser#browser-unbind" rel="nofollow">browser.unbind()</a> to stop accepting new connections. <h2>📊 Observability</h2> Run <code>playwright-cli show</code> to open the Dashboard that lists all the bound browsers, their statuses, and allows interacting with them: <ul> <li>See what your agent is doing on the background browsers</li> <li>Click into the sessions for manual interventions</li> <li>Open DevTools to inspect pages from the background browsers.</li> </ul> <a target="_blank" rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/microsoft/playwright/main/docs/src/images/release-notes-1.59-dashboard.png"><img src="https://raw.githubusercontent.com/microsoft/playwright/main/docs/src/images/release-notes-1.59-dashboard.png" alt="Demo" width="1169" height="835" style="max-width: 100%; height: auto; max-height: 835px;"></a> - `playwright-cli` binds all of its browsers automatically, so you can see what your agents are doing. - Pass `PLAYWRIGHT_DASHBOARD=1` env variable to see all `@playwright/test` browsers in the dashboard. <h2>🐛 CLI debugger for agents</h2> Coding agents can now run <code>npx playwright test --debug=cli</code> to attach and debug tests over <code>playwright-cli</code> — perfect for automatically fixing tests in agentic workflows: <div class="highlight highlight-source-shell notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ npx playwright test --debug=cli ### Debugging Instructions - Run "playwright-cli attach tw-87b59e" to attach to this test $ playwright-cli attach tw-87b59e ### Session `tw-87b59e` created, attached to `tw-87b59e`. Run commands with: playwright-cli --session=tw-87b59e <command> ### Paused - Navigate to "/" at output/tests/example.spec.ts:4 $ playwright-cli --session tw-87b59e step-over ### Page - Page URL: https://playwright.dev/ - Page Title: Fast and reliable end-to-end testing for modern web apps | Playwright ### Paused - Expect "toHaveTitle" at output/tests/example.spec.ts:7"><pre>$ npx playwright test --debug=cli ### Debugging Instructions - Run "playwright-cli attach tw-87b59e" to attach to this test $ playwright-cli attach tw-87b59e ### Session `tw-87b59e` created, attached to `tw-87b59e`. Run commands with: playwright-cli --session=tw-87b59e <command> ### Paused - Navigate to "/" at output/tests/example.spec.ts:4 $ playwright-cli --session tw-87b59e step-over ### Page - Page URL: https://playwright.dev/ - Page Title: Fast and reliable end-to-end testing for modern web apps | Playwright ### Paused - Expect "toHaveTitle" at output/tests/example.spec.ts:7</pre></div> <h2>📋 CLI trace analysis for agents</h2> Coding agents can run <code>npx playwright trace</code> to explore <a href="https://playwright.dev/docs/trace-viewer" rel="nofollow">Playwright Trace</a> and understand failing or flaky tests from the command line: <div class="highlight highlight-source-shell notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ npx playwright trace open test-results/example-has-title-chromium/trace.zip Title: example.spec.ts:3 › has title $ npx playwright trace actions --grep="expect" # Time Action Duration ──── ───────── ─────────────────────────────────────────────────────── ──────── 9. 0:00.859 Expect "toHaveTitle" 5.1s ✗ $ npx playwright trace action 9 Expect "toHaveTitle" Error: expect(page).toHaveTitle(expected) failed Expected pattern: /Wrong Title/ Received string: "Fast and reliable end-to-end testing for modern web apps | Playwright" Timeout: 5000ms Snapshots available: before, after usage: npx playwright trace snapshot 9 --name <before|after> $ npx playwright trace snapshot 9 --name after ### Page - Page Title: Fast and reliable end-to-end testing for modern web apps | Playwright $ npx playwright trace close"><pre>$ npx playwright trace open test-results/example-has-title-chromium/trace.zip Title: example.spec.ts:3 › has title $ npx playwright trace actions --grep="expect" # Time Action Duration ──── ───────── ─────────────────────────────────────────────────────── ──────── 9. 0:00.859 Expect "toHaveTitle" 5.1s ✗ $ npx playwright trace action 9 Expect "toHaveTitle" Error: expect(page).toHaveTitle(expected) failed Expected pattern: /Wrong Title/ Received string: "Fast and reliable end-to-end testing for modern web apps | Playwright" Timeout: 5000ms Snapshots available: before, after usage: npx playwright trace snapshot 9 --name <before|after> $ npx playwright trace snapshot 9 --name after ### Page - Page Title: Fast and reliable end-to-end testing for modern web apps | Playwright $ npx playwright trace close</pre></div> <h2>♻️ <code>await using</code></h2> Many APIs now return <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/asyncDispose" rel="nofollow">async disposables</a>, enabling the <code>await using</code> syntax for automatic cleanup: <div class="highlight highlight-source-js notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="await using page = await context.newPage(); { await using route = await page.route('**/*', route => route.continue()); await using script = await page.addInitScript('console.log("init script here")'); await page.goto('https://playwright.dev'); // do something } // route and init script have been removed at this point"><pre>await using page = await context.newPage(); { await using route = await page.route('**/*', route => route.continue()); await using script = await page.addInitScript('console.log("init script here")'); await page.goto('https://playwright.dev'); // do something } // route and init script have been removed at this point</pre></div> <h2>🔍 Snapshots and Locators</h2> <ul> <li>Method <a href="https://playwright.dev/docs/api/class-page#page-aria-snapshot" rel="nofollow">page.ariaSnapshot()</a> to capture the aria snapshot of the page — equivalent to <code>page.locator('body').ariaSnapshot()</code>.</li> <li>Options <code>depth</code> and <code>mode</code> in <a href="https://playwright.dev/docs/api/class-locator#locator-aria-snapshot" rel="nofollow">locator.ariaSnapshot()</a>.</li> <li>Method <a href="https://playwright.dev/docs/api/class-locator#locator-normalize" rel="nofollow">locator.normalize()</a> converts a locator to follow best practices like test ids and aria roles.</li> <li>Method <a href="https://playwright.dev/docs/api/class-page#page-pick-locator" rel="nofollow">page.pickLocator()</a> enters an interactive mode where hovering over elements highlights them and shows the corresponding locator. Click an element to get its <a href="https://playwright.dev/docs/api/class-locator" rel="nofollow">Locator</a> back. Use <a href="https://playwright.dev/docs/api/class-page#page-cancel-pick-locator" rel="nofollow">page.cancelPickLocator()</a> to cancel.</li> </ul> <h2>New APIs</h2> <h3>Screencast</h3> <ul> <li><a href="https://playwright.dev/docs/api/class-page#page-screencast" rel="nofollow">page.screencast</a> provides video recording, real-time frame streaming, and overlay management.</li> <li>Methods <a href="https://playwright.dev/docs/api/class-screencast#screencast-start" rel="nofollow">screencast.start()</a> and <a href="https://playwright.dev/docs/api/class-screencast#screencast-stop" rel="nofollow">screencast.stop()</a> for recording and frame capture.</li> <li>Methods <a href="https://playwright.dev/docs/api/class-screencast#screencast-show-actions" rel="nofollow">screencast.showActions()</a> and <a href="https://playwright.dev/docs/api/class-screencast#screencast-hide-actions" rel="nofollow">screencast.hideActions()</a> for action annotations.</li> <li>Methods <a href="https://playwright.dev/docs/api/class-screencast#screencast-show-chapter" rel="nofollow">screencast.showChapter()</a> and <a href="https://playwright.dev/docs/api/class-screencast#screencast-show-overlay" rel="nofollow">screencast.showOverlay()</a> for visual overlays.</li> <li>Methods <a href="https://playwright.dev/docs/api/class-screencast#screencast-show-overlays" rel="nofollow">screencast.showOverlays()</a> and <a href="https://playwright.dev/docs/api/class-screencast#screencast-hide-overlays" rel="nofollow">screencast.hideOverlays()</a> for overlay visibility control.</li> </ul> <h3>Storage, Console and Errors</h3> <ul> <li>Method <a href="https://playwright.dev/docs/api/class-browsercontext#browser-context-set-storage-state" rel="nofollow">browserContext.setStorageState()</a> clears existing cookies, local storage, and IndexedDB for all origins and sets a new storage state — no need to create a new context.</li> <li>Methods <a href="https://playwright.dev/docs/api/class-page#page-clear-console-messages" rel="nofollow">page.clearConsoleMessages()</a> and <a href="https://playwright.dev/docs/api/class-page#page-clear-page-errors" rel="nofollow">page.clearPageErrors()</a> to clear stored messages and errors.</li> <li>Option <code>filter</code> in <a href="https://playwright.dev/docs/api/class-page#page-console-messages" rel="nofollow">page.consoleMessages()</a> and <a href="https://playwright.dev/docs/api/class-page#page-page-errors" rel="nofollow">page.pageErrors()</a> controls which messages are returned.</li> <li>Method <a href="https://playwright.dev/docs/api/class-consolemessage#console-message-timestamp" rel="nofollow">consoleMessage.timestamp()</a>.</li> </ul> <h3>Miscellaneous</h3> <ul> <li><a href="https://playwright.dev/docs/api/class-browsercontext#browser-context-debugger" rel="nofollow">browserContext.debugger</a> provides programmatic control over the Playwright debugger.</li> <li>Method <a href="https://playwright.dev/docs/api/class-browsercontext#browser-context-is-closed" rel="nofollow">browserContext.isClosed()</a>.</li> <li>Method <a href="https://playwright.dev/docs/api/class-request#request-existing-response" rel="nofollow">request.existingResponse()</a> returns the response without waiting.</li> <li>Method <a href="https://playwright.dev/docs/api/class-response#response-http-version" rel="nofollow">response.httpVersion()</a> returns the HTTP version used by the response.</li> <li>Events <a href="https://playwright.dev/docs/api/class-cdpsession#cdp-session-event-event" rel="nofollow">cdpSession.on('event')</a> and <a href="https://playwright.dev/docs/api/class-cdpsession#cdp-session-event-close" rel="nofollow">cdpSession.on('close')</a> for CDP sessions.</li> <li>Option <code>live</code> in <a href="https://playwright.dev/docs/api/class-tracing#tracing-start" rel="nofollow">tracing.start()</a> for real-time trace updates.</li> <li>Option <code>artifactsDir</code> in <a href="https://playwright.dev/docs/api/class-browsertype#browser-type-launch" rel="nofollow">browserType.launch()</a> to configure the artifacts directory.</li> </ul> <h2>🛠️ Other improvements</h2> <ul> <li>UI Mode has an option to only show tests affected by source changes.</li> <li>UI Mode and Trace Viewer have improved action filtering.</li> <li>HTML Reporter shows the list of runs from the same worker.</li> <li>HTML Reporter allows filtering test steps for quick search.</li> <li>New trace mode <code>'retain-on-failure-and-retries'</code> 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.</li> </ul> <h2>Known Issues <g-emoji class="g-emoji" alias="warning">⚠️</g-emoji><g-emoji class="g-emoji" alias="warning">⚠️</g-emoji></h2> <ul> <li><code>navigator.platform</code> emulation can cause Ctrl or Meta dispatching errors (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="4188854024" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/40009" data-hovercard-type="issue" data-hovercard-url="/microsoft/playwright/issues/40009/hovercard" href="https://github.com/microsoft/playwright/issues/40009">#40009</a>). Pass <code>PLAYWRIGHT_NO_UA_PLATFORM = '1'</code> environment variable while we are issuing a patch release. Let us know in the issue how it affected you.</li> </ul> <h2>Breaking Changes <g-emoji class="g-emoji" alias="warning">⚠️</g-emoji></h2> <ul> <li>Removed macOS 14 support for WebKit. We recommend upgrading your macOS version, or keeping an older Playwright version.</li> <li>Removed <code>@playwright/experimental-ct-svelte</code> package.</li> <li><code>junit</code> test reporter now differentiates between types of errors, so some of the previous <code><failure></code>s are now reported as <code><error></code>s.</li> </ul> <h2>Browser Versions</h2> <ul> <li>Chromium 147.0.7727.15</li> <li>Mozilla Firefox 148.0.2</li> <li>WebKit 26.4</li> </ul> This version was also tested against the following stable channels: <ul> <li>Google Chrome 146</li> <li>Microsoft Edge 146</li> </ul>

Open SourceTestingDeveloper Tools

Read Original Back to News

News Radar provides aggregated summaries. Full content and copyright remain with the original publisher.