v0.33.4

Compare Source

v1.22.0

Compare Source

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.

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.

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