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 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
  await component.click();
});

Read more in our documentation.

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 page.click('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' });
  await submitButton.click();

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('https://playwright.dev');
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