v1.22.0
microsoft/playwrightv1.22.0May 12, 2022by aslushnikov
AI Summary
A major release introducing a preview of Component Testing for React, Vue, and Svelte, allowing real browser testing of UI components. It also enhances locators with ARIA role support and introduces web-first screenshot assertions.
Key Highlights
- Introduced Component Testing (Preview) for React, Vue, and Svelte.
- Added ARIA role selectors for more accessible element selection.
- Introduced new `locator.filter()` API to refine existing locators.
- Added web-first screenshot assertions with animation disabling.
New Features
- Component Testing (Preview).
- ARIA role selectors.
- `locator.filter()` API.
- Web-first screenshot assertions.
Full Release Notes
## 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