Sourced from @playwright/test's releases.
v1.62.0
🧱 New component testing model
Component testing moves to a stories and galleries model. A story wraps your component in one specific scenario — hard-coded props, mock data, providers — and a gallery page that you serve renders stories on demand. The new fixtures.mount() fixture navigates to the gallery, mounts a story by id, and returns a Locator scoped to the story's root element:
test('click should expand', async ({ mount }) => { const component = await mount('components/Expandable/Stateful'); await component.getByRole('button').click(); await expect(component.getByTestId('expanded')).toHaveValue('true'); });Pass a story type as a template argument to type-check its props, and use
update(props)/unmount()on the returned locator to re-render or tear down within a test.🛑 Cancel operations with AbortSignal
Most operations and web-first assertions now accept a
signaloption that takes anAbortSignal, letting you cancel long-running actions, navigations, waits, and assertions:const controller = new AbortController(); setTimeout(() => controller.abort(), 1000);await page.getByRole('button', { name: 'Submit' }).click({ signal: controller.signal });
await expect(page.getByText('Done')).toBeVisible({ signal: controller.signal });
Providing a signal does not disable the default timeout; pass
timeout: 0to disable it.🖼️ WebP screenshots
expect(page).toHaveScreenshot() and expect(locator).toHaveScreenshot() can now store snapshots in the WebP format — just give the snapshot a
.webpname:// Visual comparisons store the golden snapshot as lossless WebP. await expect(page).toHaveScreenshot('homepage.webp');// Standalone screenshots can trade quality for size with lossy WebP.
await page.screenshot({ path: 'homepage.webp', quality: 50 });
page.screenshot() and [locator.screenshot() (https://playwright.dev/docs/api/class-locator#locator-screenshot) also accept
webpas atype, where quality100(the default) is lossless and lower values use lossy compression.🧩 Custom test filtering with Reporter.preprocess()
New reporter.preprocess() hook runs after the configuration is resolved and before reporter.onBegin(), letting a reporter mark individual tests as skipped, excluded, fixed, or failing through a TestRun object:
</tr></table>
... (truncated)
e3950d9
chore: mark v1.62.0 (#41981)f07e0f7
cherry-pick(#41940):
docs: release notes for v1.62 (#41967)05a306c
cherry-pick(#41964):
Revert "feat(routeFromHar): add interceptAPIRequests opt...2934858
fix: correct pending navigation log spacing (#41949)4b0cc99
fix(test): unflake screencast backpressure test on slow macOS runner (#41951)bbbae6d
test: fixme WebSocket locale test in Chromium 150 (#41944)15c4f55
fix(mcp): identify downloads explicitly (#41933)f5fa967
fix(network): request.postData() returns null for empty string body
override ...0edafe4
fix(mcp): launch the Chrome profile that has the extension installed (#41939)244a1ff
feat(firefox): roll to r1538 (#41938)