Skip to content


Choose a tag to compare
@aslushnikov aslushnikov released this 12 May 23:22
· 13 commits to release-1.22 since this release

Introducing Component Testing (preview)

Playwright Test can now test your React, Vue.js or Svelte components. You can use all the features of Playwright Test (such as parallelization, emulation & debugging) while running components in real browsers.

component testing
Component Tests (Preview)

Here is what a typical component test looks like:

// 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

Read more in our documentation.

release update
Playwright v1.22 updates

Locators Update

  • Role selectors allow selecting elements by their ARIA role, ARIA attributes and accessible name.

    // Click a button with accessible name "log in"
    await'role=button[name="log in"]')

    Read more in our documentation.

  • New locator.filter([options]) API to filter an existing locator

    const buttons = page.locator('role=button');
    // ...
    const submitButton = buttons.filter({ hasText: 'Submit' });

Screenshots Update

New web-first assertions expect(page).toHaveScreenshot() and expect(locator).toHaveScreenshot() that wait for screenshot stabilization and enhances test reliability.

The new assertions has screenshot-specific defaults, such as:

  • disables animations
  • uses CSS scale option
await page.goto('');
await expect(page).toHaveScreenshot();

The new expect(page).toHaveScreenshot() saves screenshots at the same location as expect(screenshot).toMatchSnapshot().

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