---
id: release-notes
title: "Release notes"
toc_max_heading_level: 2
---
import LiteYouTube from '@site/src/components/LiteYouTube';
## Version 1.32
### Introducing UI Mode (preview)
New UI Mode lets you explore, run and debug tests. Comes with a built-in watch mode.
Engage with a new flag `--ui`:
```sh
npx playwright test --ui
```
### New APIs
- New options [`option: updateMode`] and [`option: updateContent`] in [`method: Page.routeFromHAR`] and [`method: BrowserContext.routeFromHAR`].
- Chaining existing locator objects, see [locator docs](./locators.md#chaining-locators) for details.
- New property [`property: TestInfo.testId`].
- New option [`option: name`] in method [`method: Tracing.startChunk`].
### β οΈ Breaking change in component tests
Note: **component tests only**, does not affect end-to-end tests.
* `@playwright/experimental-ct-react` now supports **React 18 only**.
* If you're running component tests with React 16 or 17, please replace
`@playwright/experimental-ct-react` with `@playwright/experimental-ct-react17`.
### Browser Versions
* Chromium 112.0.5615.29
* Mozilla Firefox 111.0
* WebKit 16.4
This version was also tested against the following stable channels:
* Google Chrome 111
* Microsoft Edge 111
## Version 1.31
### New APIs
- New property [`property: TestProject.dependencies`] to configure dependencies between projects.
Using dependencies allows global setup to produce traces and other artifacts,
see the setup steps in the test report and more.
```js
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
projects: [
{
name: 'setup',
testMatch: /global.setup\.ts/,
},
{
name: 'chromium',
use: devices['Desktop Chrome'],
dependencies: ['setup'],
},
{
name: 'firefox',
use: devices['Desktop Firefox'],
dependencies: ['setup'],
},
{
name: 'webkit',
use: devices['Desktop Safari'],
dependencies: ['setup'],
},
],
});
```
- New assertion [`method: LocatorAssertions.toBeInViewport`] ensures that locator points to an element that intersects viewport, according to the [intersection observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
```js
const button = page.getByRole('button');
// Make sure at least some part of element intersects viewport.
await expect(button).toBeInViewport();
// Make sure element is fully outside of viewport.
await expect(button).not.toBeInViewport();
// Make sure that at least half of the element intersects viewport.
await expect(button).toBeInViewport({ ratio: 0.5 });
```
### Miscellaneous
- DOM snapshots in trace viewer can be now opened in a separate window.
- New method `defineConfig` to be used in `playwright.config`.
- New option [`option: Route.fetch.maxRedirects`] for method [`method: Route.fetch`].
- Playwright now supports Debian 11 arm64.
- Official [docker images](./docker.md) now include Node 18 instead of Node 16.
### β οΈ Breaking change in component tests
Note: **component tests only**, does not affect end-to-end tests.
`playwright-ct.config` configuration file for [component testing](./test-components.md) now requires calling `defineConfig`.
```js
// Before
import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-react';
const config: PlaywrightTestConfig = {
// ... config goes here ...
};
export default config;
```
Replace `config` variable definition with `defineConfig` call:
```js
// After
import { defineConfig, devices } from '@playwright/experimental-ct-react';
export default defineConfig({
// ... config goes here ...
});
```
### Browser Versions
* Chromium 111.0.5563.19
* Mozilla Firefox 109.0
* WebKit 16.4
This version was also tested against the following stable channels:
* Google Chrome 110
* Microsoft Edge 110
## Version 1.30
### Browser Versions
* Chromium 110.0.5481.38
* Mozilla Firefox 108.0.2
* WebKit 16.4
This version was also tested against the following stable channels:
* Google Chrome 109
* Microsoft Edge 109
## Version 1.29
### New APIs
- New method [`method: Route.fetch`] and new option `json` for [`method: Route.fulfill`]:
```js
await page.route('**/api/settings', async route => {
// Fetch original settings.
const response = await route.fetch();
// Force settings theme to a predefined value.
const json = await response.json();
json.theme = 'Solorized';
// Fulfill with modified data.
await route.fulfill({ json });
});
```
- New method [`method: Locator.all`] to iterate over all matching elements:
```js
// Check all checkboxes!
const checkboxes = page.getByRole('checkbox');
for (const checkbox of await checkboxes.all())
await checkbox.check();
```
- [`method: Locator.selectOption`] matches now by value or label:
```html
```
```js
await element.selectOption('Red');
```
- Retry blocks of code until all assertions pass:
```js
await expect(async () => {
const response = await page.request.get('https://api.example.com');
await expect(response).toBeOK();
}).toPass();
```
Read more in [our documentation](./test-assertions.md#retrying).
- Automatically capture **full page screenshot** on test failure:
```js
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
screenshot: {
mode: 'only-on-failure',
fullPage: true,
}
}
});
```
### Miscellaneous
- Playwright Test now respects [`jsconfig.json`](https://code.visualstudio.com/docs/languages/jsconfig).
- New options `args` and `proxy` for [`method: AndroidDevice.launchBrowser`].
- Option `postData` in method [`method: Route.continue`] now supports [Serializable] values.
### Browser Versions
* Chromium 109.0.5414.46
* Mozilla Firefox 107.0
* WebKit 16.4
This version was also tested against the following stable channels:
* Google Chrome 108
* Microsoft Edge 108
## Version 1.28
### Playwright Tools
* **Record at Cursor in VSCode.** You can run the test, position the cursor at the end of the test and continue generating the test.
* **Live Locators in VSCode.** You can hover and edit locators in VSCode to get them highlighted in the opened browser.
* **Live Locators in CodeGen.** Generate a locator for any element on the page using "Explore" tool.
* **Codegen and Trace Viewer Dark Theme.** Automatically picked up from operating system settings.
### Test Runner
* Configure retries and test timeout for a file or a test with [`method: Test.describe.configure`].
```js
// Each test in the file will be retried twice and have a timeout of 20 seconds.
test.describe.configure({ retries: 2, timeout: 20_000 });
test('runs first', async ({ page }) => {});
test('runs second', async ({ page }) => {});
```
* Use [`property: TestProject.snapshotPathTemplate`] and [`property: TestConfig.snapshotPathTemplate`] to configure a template controlling location of snapshots generated by [`method: PageAssertions.toHaveScreenshot#1`] and [`method: SnapshotAssertions.toMatchSnapshot#1`].
```js
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
testDir: './tests',
snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
});
```
### New APIs
- [`method: Locator.blur`]
- [`method: Locator.clear`]
- [`method: Android.launchServer`] and [`method: Android.connect`]
- [`event: AndroidDevice.close`]
### Browser Versions
* Chromium 108.0.5359.29
* Mozilla Firefox 106.0
* WebKit 16.4
This version was also tested against the following stable channels:
* Google Chrome 107
* Microsoft Edge 107
## Version 1.27
### Locators
With these new APIs writing locators is a joy:
- [`method: Page.getByText`] to locate by text content.
- [`method: Page.getByRole`] to locate by [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).
- [`method: Page.getByLabel`] to locate a form control by associated label's text.
- [`method: Page.getByTestId`] to locate an element based on its `data-testid` attribute (other attribute can be configured).
- [`method: Page.getByPlaceholder`] to locate an input by placeholder.
- [`method: Page.getByAltText`] to locate an element, usually image, by its text alternative.
- [`method: Page.getByTitle`] to locate an element by its title.
```js
await page.getByLabel('User Name').fill('John');
await page.getByLabel('Password').fill('secret-password');
await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page.getByText('Welcome, John!')).toBeVisible();
```
All the same methods are also available on [Locator], [FrameLocator] and [Frame] classes.
### Other highlights
- `workers` option in the `playwright.config.ts` now accepts a percentage string to use some of the available CPUs. You can also pass it in the command line:
```bash
npx playwright test --workers=20%
```
- New options `host` and `port` for the html reporter.
```js
reporters: [['html', { host: 'localhost', port: '9223' }]]
```
- New field `FullConfig.configFile` is available to test reporters, specifying the path to the config file if any.
- As announced in v1.25, Ubuntu 18 will not be supported as of Dec 2022. In addition to that, there will be no WebKit updates on Ubuntu 18 starting from the next Playwright release.
### Behavior Changes
- [`method: LocatorAssertions.toHaveAttribute`] with an empty value does not match missing attribute anymore. For example, the following snippet will succeed when `button` **does not** have a `disabled` attribute.
```js
await expect(page.getByRole('button')).toHaveAttribute('disabled', '');
```
- Command line options `--grep` and `--grep-invert` previously incorrectly ignored `grep` and `grepInvert` options specified in the config. Now all of them are applied together.
### Browser Versions
* Chromium 107.0.5304.18
* Mozilla Firefox 105.0.1
* WebKit 16.0
This version was also tested against the following stable channels:
* Google Chrome 106
* Microsoft Edge 106
## Version 1.26
### Assertions
- New option `enabled` for [`method: LocatorAssertions.toBeEnabled`].
- [`method: LocatorAssertions.toHaveText`] now pierces open shadow roots.
- New option `editable` for [`method: LocatorAssertions.toBeEditable`].
- New option `visible` for [`method: LocatorAssertions.toBeVisible`].
### Other highlights
- New option `maxRedirects` for [`method: APIRequestContext.get`] and others to limit redirect count.
- New command-line flag `--pass-with-no-tests` that allows the test suite to pass when no files are found.
- New command-line flag `--ignore-snapshots` to skip snapshot expectations, such as `expect(value).toMatchSnapshot()` and `expect(page).toHaveScreenshot()`.
### Behavior Change
A bunch of Playwright APIs already support the `waitUntil: 'domcontentloaded'` option.
For example:
```js
await page.goto('https://playwright.dev', {
waitUntil: 'domcontentloaded',
});
```
Prior to 1.26, this would wait for all iframes to fire the `DOMContentLoaded`
event.
To align with web specification, the `'domcontentloaded'` value only waits for
the target frame to fire the `'DOMContentLoaded'` event. Use `waitUntil: 'load'` to wait for all iframes.
### Browser Versions
* Chromium 106.0.5249.30
* Mozilla Firefox 104.0
* WebKit 16.0
This version was also tested against the following stable channels:
* Google Chrome 105
* Microsoft Edge 105
## Version 1.25
### VSCode Extension
* Watch your tests running live & keep devtools open.
* Pick selector.
* Record new test from current page state.
### Test Runner
* [`method: Test.step`] now returns the value of the step function:
```ts
test('should work', async ({ page }) => {
const pageTitle = await test.step('get title', async () => {
await page.goto('https://playwright.dev');
return await page.title();
});
console.log(pageTitle);
});
```
* Added [`method: Test.describe.fixme`].
* New `'interrupted'` test status.
* Enable tracing via CLI flag: `npx playwright test --trace=on`.
### Announcements
* π We now ship Ubuntu 22.04 Jammy Jellyfish docker image: `mcr.microsoft.com/playwright:v1.33.0-jammy`.
* πͺ¦ This is the last release with macOS 10.15 support (deprecated as of 1.21).
* πͺ¦ This is the last release with Node.js 12 support, we recommend upgrading to Node.js LTS (16).
* β οΈ Ubuntu 18 is now deprecated and will not be supported as of Dec 2022.
### Browser Versions
* Chromium 105.0.5195.19
* Mozilla Firefox 103.0
* WebKit 16.0
This version was also tested against the following stable channels:
* Google Chrome 104
* Microsoft Edge 104
## Version 1.24
### π Multiple Web Servers in `playwright.config.ts`
Launch multiple web servers, databases, or other processes by passing an array of configurations:
```ts
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
webServer: [
{
command: 'npm run start',
url: 'http://127.0.0.1:3000',
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI,
},
{
command: 'npm run backend',
url: 'http://127.0.0.1:3333',
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI,
}
],
use: {
baseURL: 'http://localhost:3000/',
},
});
```
### π Debian 11 Bullseye Support
Playwright now supports Debian 11 Bullseye on x86_64 for Chromium, Firefox and WebKit. Let us know
if you encounter any issues!
Linux support looks like this:
| | Ubuntu 20.04 | Ubuntu 22.04 | Debian 11
| :--- | :---: | :---: | :---: | :---: |
| Chromium | β
| β
| β
|
| WebKit | β
| β
| β
|
| Firefox | β
| β
| β
|
### π΅οΈ Anonymous Describe
It is now possible to call [`method: Test.describe#2`] to create suites without a title. This is useful for giving a group of tests a common option with [`method: Test.use`].
```ts
test.describe(() => {
test.use({ colorScheme: 'dark' });
test('one', async ({ page }) => {
// ...
});
test('two', async ({ page }) => {
// ...
});
});
```
### 𧩠Component Tests Update
Playwright 1.24 Component Tests introduce `beforeMount` and `afterMount` hooks.
Use these to configure your app for tests.
For example, this could be used to setup App router in Vue.js:
```js
// src/component.spec.ts
import { test } from '@playwright/experimental-ct-vue';
import { Component } from './mycomponent';
test('should work', async ({ mount }) => {
const component = await mount(Component, {
hooksConfig: {
/* anything to configure your app */
}
});
});
```
```js
// playwright/index.ts
import { router } from '../router';
import { beforeMount } from '@playwright/experimental-ct-vue/hooks';
beforeMount(async ({ app, hooksConfig }) => {
app.use(router);
});
```
A similar configuration in Next.js would look like this:
```js
// src/component.spec.jsx
import { test } from '@playwright/experimental-ct-react';
import { Component } from './mycomponent';
test('should work', async ({ mount }) => {
const component = await mount(, {
// Pass mock value from test into `beforeMount`.
hooksConfig: {
router: {
query: { page: 1, per_page: 10 },
asPath: '/posts'
}
}
});
});
```
```js
// playwright/index.js
import router from 'next/router';
import { beforeMount } from '@playwright/experimental-ct-react/hooks';
beforeMount(async ({ hooksConfig }) => {
// Before mount, redefine useRouter to return mock value from test.
router.useRouter = () => hooksConfig.router;
});
```
## Version 1.23
### Network Replay
Now you can record network traffic into a HAR file and re-use this traffic in your tests.
To record network into HAR file:
```bash
npx playwright open --save-har=github.har.zip https://github.com/microsoft
```
Alternatively, you can record HAR programmatically:
```ts
const context = await browser.newContext({
recordHar: { path: 'github.har.zip' }
});
// ... do stuff ...
await context.close();
```
Use the new methods [`method: Page.routeFromHAR`] or [`method: BrowserContext.routeFromHAR`] to serve matching responses from the [HAR](http://www.softwareishard.com/blog/har-12-spec/) file:
```ts
await context.routeFromHAR('github.har.zip');
```
Read more in [our documentation](./network#record-and-replay-requests).
### Advanced Routing
You can now use [`method: Route.fallback`] to defer routing to other handlers.
Consider the following example:
```ts
// Remove a header from all requests.
test.beforeEach(async ({ page }) => {
await page.route('**/*', async route => {
const headers = await route.request().allHeaders();
delete headers['if-none-match'];
route.fallback({ headers });
});
});
test('should work', async ({ page }) => {
await page.route('**/*', route => {
if (route.request().resourceType() === 'image')
route.abort();
else
route.fallback();
});
});
```
Note that the new methods [`method: Page.routeFromHAR`] and [`method: BrowserContext.routeFromHAR`] also participate in routing and could be deferred to.
### Web-First Assertions Update
* New method [`method: LocatorAssertions.toHaveValues`] that asserts all selected values of `