v1.22.0

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

v1.21.1

Highlights

This patch includes the following bug fixes:

#13597 - [BUG] fullyParallel created too many workers, slowing down test run
#13530 - [REGRESSION]: Pull request #12877 prevents the library from being used on any linux distro that is not Ubuntu

Browser Versions

• Chromium 101.0.4951.26
• Mozilla Firefox 98.0.2
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 100
• Microsoft Edge 100

v1.21.0

Playwright v1.21 updates

Highlights

• New experimental role selectors that 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"]')

  To use role selectors, make sure to pass PLAYWRIGHT_EXPERIMENTAL_FEATURES=1 environment variable:

  // playwright.config.js
  process.env.PLAYWRIGHT_EXPERIMENTAL_FEATURES = '1';
  module.exports = {
    /* ... */
  };

  Read more in our documentation.

• New scale option in Page.screenshot for smaller sized screenshots.

• New caret option in Page.screenshot to control text caret. Defaults to "hide".

• New method expect.poll to wait for an arbitrary condition:

  // Poll the method until it returns an expected result.
  await expect.poll(async () => {
    const response = await page.request.get('https://api.example.com');
    return response.status();
  }).toBe(200);

  expect.poll supports most synchronous matchers, like .toBe(), .toContain(), etc.
  Read more in our documentation.

Behavior Changes

• ESM support when running TypeScript tests is now enabled by default. The PLAYWRIGHT_EXPERIMENTAL_TS_ESM env variable is
  no longer required.
• The mcr.microsoft.com/playwright docker image no longer contains Python. Please use mcr.microsoft.com/playwright/python
  as a Playwright-ready docker image with pre-installed Python.
• Playwright now supports large file uploads (100s of MBs) via Locator.setInputFiles API.

Browser Versions

• Chromium 101.0.4951.26
• Mozilla Firefox 98.0.2
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 100
• Microsoft Edge 100

v1.20.2

Highlights

This patch includes the following bug fixes:

#13078 - [BUG] Extension required when importing other files with type="module"
#13099 - [BUG] beforeAll is called before each test (fullyParallel)
#13204 - [BUG] mask stalls the screenshot

Browser Versions

• Chromium 101.0.4921.0
• Mozilla Firefox 97.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 99
• Microsoft Edge 99

v1.20.1

Highlights

This patch includes the following bug fixes:

#12711 - [REGRESSION] Page.screenshot hangs on some sites
#12807 - [BUG] Cookies get assigned before fulfilling a response
#12814 - [Question] how to use expect.any in playwright
#12821 - [BUG] Chromium: Cannot click, element intercepts pointer events
#12836 - [REGRESSION]: Tests not detected as ES module in v1.20
#12862 - [Feature] Allow to use toMatchSnapshot for file formats other than txt (e.g. csv)
#12887 - [BUG] Locator.count() with _vue selector with Repro
#12940 - [BUG] npm audit - High Severity vulnerability in json5 package forcing to install Playwright 1.18.1
#12974 - [BUG] Regression - chromium browser closes during test or debugging session on macos

Browser Versions

• Chromium 101.0.4921.0
• Mozilla Firefox 97.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 99
• Microsoft Edge 99

v1.20.0

Playwright v1.20 updates

Highlights

• New options for methods page.screenshot(), locator.screenshot() and elementHandle.screenshot():

  • Option animations: "disabled" rewinds all CSS animations and transitions to a consistent state.
  • Option mask: Locator[] masks given elements, overlaying them with pink #FF00FF boxes.

• expect().toMatchSnapshot() now supports anonymous snapshots: when snapshot name is missing, Playwright Test will generate one
  automatically:

  expect('Web is Awesome <3').toMatchSnapshot();

• New maxDiffPixels and maxDiffPixelRatio options for fine-grained screenshot comparison using expect().toMatchSnapshot():

  expect(await page.screenshot()).toMatchSnapshot({
    maxDiffPixels: 27, // allow no more than 27 different pixels.
  });

  It is most convenient to specify maxDiffPixels or maxDiffPixelRatio once in TestConfig.expect.

• Playwright Test now adds TestConfig.fullyParallel mode. By default, Playwright Test parallelizes between files. In fully parallel mode, tests inside a single file are also run in parallel. You can also use --fully-parallel command line flag.

  // playwright.config.ts
  export default {
    fullyParallel: true,
  };

• TestProject.grep and TestProject.grepInvert are now configurable per project. For example, you can now
  configure smoke tests project using grep:

  // playwright.config.ts
  export default {
    projects: [
      {
        name: 'smoke tests',
        grep: /@smoke/,
      },
    ],
  };

• Trace Viewer now shows API testing requests.

• locator.highlight() visually reveals element(s) for easier debugging.

Announcements

• We now ship a designated Python docker image mcr.microsoft.com/playwright/python. Please switch over to it if you use Python. This is the last release that includes Python inside our javascript mcr.microsoft.com/playwright docker image.
• v1.20 is the last release to receive WebKit update for macOS 10.15 Catalina. Please update MacOS to keep using latest & greatest WebKit!

Browser Versions

• Chromium 101.0.4921.0
• Mozilla Firefox 97.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 99
• Microsoft Edge 99

v1.19.2

Highlights

This patch includes the following bug fixes:

#12091 - [BUG] playwright 1.19.0 generates more than 1 trace file per test
#12106 - [BUG] Error: EBUSY: resource busy or locked when using volumes in docker-compose with playwright 1.19.0 and mcr.microsoft.com/playwright:v1.15.0-focal

Browser Versions

• Chromium 100.0.4863.0
• Mozilla Firefox 96.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 98
• Microsoft Edge 98

v1.19.1

Highlights

This patch includes the following bug fixes:

#12075 - [Question] After update to 1.19 firefox fails to run
#12090 - [BUG] did something change on APIRequest/Response APIs ?

Browser Versions

• Chromium 100.0.4863.0
• Mozilla Firefox 96.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 98
• Microsoft Edge 98

v1.19.0

Playwright v1.19 updates

Playwright Test Updates

Soft assertions

Playwright Test v1.19 now supports soft assertions. Failed soft assertions do not terminate test execution, but mark the test as failed. Read more in our documentation.

// Make a few checks that will not stop the test when failed...
await expect.soft(page.locator('#status')).toHaveText('Success');
await expect.soft(page.locator('#eta')).toHaveText('1 day');

// ... and continue the test to check more things.
await page.locator('#next-page').click();
await expect.soft(page.locator('#title')).toHaveText('Make another order');

Custom error messages

You can now specify a custom error message as a second argument to the expect and expect.soft functions, for example:

await expect(page.locator('text=Name'), 'should be logged in').toBeVisible();

The error would look like this:

    Error: should be logged in

    Call log:
      - expect.toBeVisible with timeout 5000ms
      - waiting for selector "text=Name"


      2 |
      3 | test('example test', async({ page }) => {
    > 4 |   await expect(page.locator('text=Name'), 'should be logged in').toBeVisible();
        |                                                                  ^
      5 | });
      6 |

Parallel mode in file

By default, tests in a single file are run in order. If you have many independent tests in a single file, you can now
run them in parallel with method: test.describe.configure:

import { test } from '@playwright/test';

test.describe.configure({ mode: 'parallel' });

test('parallel 1', async () => {});
test('parallel 2', async () => {});

⚠️ Potentially breaking change in Playwright Test Global Setup

It is unlikely that this change will affect you, no action is required if your tests keep running as they did.

We've noticed that in rare cases, the set of tests to be executed was configured in the global setup by means of the environment variables. We also noticed some applications that were post processing the reporters' output in the global teardown. If you are doing one of the two, learn more

Locator Updates

Locator now supports a has option that makes sure it contains another locator inside:

await page.locator('article', {
  has: page.locator('.highlight'),
}).locator('button').click();

The snippet above will select article that has highlight in it and will press the button in it.
Read more in locator documentation

Other Updates

• New method: Locator.page
• method: Page.screenshot and method: Locator.screenshot now automatically hides blinking caret
• Playwright Codegen now generates locators and frame locators
• New option url in testConfig.webServer to ensure your web server is ready before running the tests
• New property: TestInfo.errors and property: TestResult.errors that contain all failed assertions and soft assertions.

Browser Versions

• Chromium 100.0.4863.0
• Mozilla Firefox 96.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 98
• Microsoft Edge 98

---

v1.18.1

Highlights

This patch includes improvements to the TypeScript support and the following bug fixes:

#11550 - [REGRESSION]: Errors inside route handler does not lead to unhandled rejections anymore
#11552 - [BUG] Could not resolve "C:\repo\framework\utils" in file C:\repo\tests\test.ts.

Browser Versions

• Chromium 99.0.4812.0
• Mozilla Firefox 95.0
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 97
• Microsoft Edge 97