Impact Score: 5/10
Playwright v1.22.0 — Release Notes & Engineering Impact
Source available — automated, not human-reviewed
Component: playwright · Channel: stable. Automated analysis, not a compatibility certification. How this works.
Analysis updated: 2026-11-01.
⚡ Executive Summary (TL;DR)
Playwright v1.22.0. Source highlight: Introducing Component Testing (preview)
Who Does This Impact? (Role-Based Analysis)
💻 Software Engineers & Devs
Check the source notes against the package and APIs you use before upgrading.
📊 Product & Engineering Leads
Use the documented changes to assess relevance to your product; release frequency alone is not a quality measure.
⚙️ DevOps & Security
Verify the target version, runtime requirements and rollback procedure in the official documentation.
📄 View Raw Release Notes (Original Developer Log)
## Introducing Component Testing (preview)
Playwright Test can now test your [React](https://reactjs.org/), [Vue.js](https://vuejs.org/) or [Svelte](https://svelte.dev/) components. You can use all the features of Playwright Test (such as parallelization, emulation & debugging) while running components in real browsers.
<a href="https://youtu.be/y3YxX4sFJbM"></a>
<a href="https://youtu.be/y3YxX4sFJbM">Component Tests (Preview)</a>
Here is what a typical component test looks like:
```tsx
// App.spec.tsx
import { test, expect } from '@playwright/experimental-ct-react';
import App from './App';
// Let's test component in a dark scheme!
test.use({ colorScheme: 'dark' });
test('should render', async ({ mount }) => {
const component = await mount(<App></App>);
// As with any Playwright test, assert locator text.
await expect(component).toContainText('React');
// Or do a screenshot 🚀
await expect(component).toHaveScreenshot();
// Or use any Playwright method
await component.click();
});
```
Read more in [our documentation](https://playwright.dev/docs/test-components).
---
<a href="https://youtu.be/keV2CIgtBlg"></a>
<a href="https://youtu.be/keV2CIgtBlg">Playwright v1.22 updates</a>
## Locators Update
* Role selectors allow selecting elements by their [ARIA role](https://www.w3.org/TR/wai-aria-1.2/#roles), [ARIA attributes](https://www.w3.org/TR/wai-aria-1.2/#aria-attributes) and [accessible name](https://w3c.github.io/accname/#dfn-accessible-name).
```ts
// Click a button with accessible name "log in"
await page.click('role=button[name="log in"]')
```
Read more in [our documentation](https://playwright.dev/docs/selectors#role-selector).
* New [`locator.filter([options])`](https://playwright.dev/docs/api/class-locator#locator-filter) API to filter an existing locator
```ts
const buttons = page.locator('role=button');
// ...
const submitButton = buttons.filter({ hasText: 'Submit' });
await submitButton.click();
```
## Screenshots Update
New web-first assertions [`expect(page).toHaveScreenshot()`](https://playwright.dev/docs/test-assertions#page-assertions-to-have-screenshot) and [`expect(locator).toHaveScreenshot()`](https://playwright.dev/docs/test-assertions#locator-assertions-to-have-screenshot) that wait for screenshot stabilization and enhances test reliability.
The new assertions has screenshot-specific defaults, such as:
* disables animations
* uses CSS scale option
```ts
await page.goto('https://playwright.dev');
await expect(page).toHaveScreenshot();
```
The new [`expect(page).toHaveScreenshot()`](https://playwright.dev/docs/test-assertions#page-assertions-to-have-screenshot) saves screenshots at the same location as [`expect(screenshot).toMatchSnapshot()`](https://playwright.dev/docs/test-assertions#screenshot-assertions-to-match-snapshot-1).
## Browser Versions
- Chromium 102.0.5005.40
- Mozilla Firefox 99.0.1
- WebKit 15.4
This version was also tested against the following stable channels:
- Google Chrome 101
- Microsoft Edge 101